Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multi column controls #379

Closed
wizaerd opened this issue Mar 4, 2017 · 32 comments
Closed

Multi column controls #379

wizaerd opened this issue Mar 4, 2017 · 32 comments
Labels
enhancement

Comments

@wizaerd
Copy link

wizaerd commented Mar 4, 2017

Is there a convenient way to design a form that would display entered data in a multi-column control, either an HTML table or a multi-column listbox? If not, perhaps something could be added to this library to better facilitate this type of component on a user defined form.
@kevinchappell
Copy link
Owner

Currently not possible with formBuilder but considering this is an almost daily request I'm sure it will be added at some point. The hold-up is that it requires major restructuring of the data and therefore the plugin.

@kevinchappell
Copy link
Owner

kevinchappell commented Apr 6, 2017 •
edited
Loading

Considering the amount of refactoring to make this happen and the fact the its supported by formeo, I no longer don't see this in formBuilder's future. Would be awesome for someone to add it but I would like to focus all major feature development in formBuilder's successor.

@cccuscott
Copy link

I no longer don't see this in formBuilder's future.

So this is or is not going to be a feature? You used a double negative and that makes it ambiguous.

@kevinchappell
Copy link
Owner

@cccuscott wow I must have been super tired, what I wrote makes no sense.

To clarify- it would be a great feature for someone to add true drag and drop columns to formBuilder. @Jojoshua added some support for rendered forms. To use see: https://github.com/kevinchappell/formBuilder/blob/master/docs/formBuilder/demos/bootstrap-grid.md

@cccuscott
Copy link

@cccuscott wow I must have been super tired, what I wrote makes no sense.

To clarify- it would be a great feature for someone to add true drag and drop columns to formBuilder. @Jojoshua added some support for rendered forms. To use see: https://github.com/kevinchappell/formBuilder/blob/master/docs/formBuilder/demos/bootstrap-grid.md

Thanks for the speedy response thanks.

@oneplugin
Copy link

oneplugin commented Nov 6, 2021 •
edited
Loading

fb-demo.mov

Hey Guys _ I have done a multi column implementation of the form builder v3.7.3. Have a look at the above video to see how it works. I'm more than happy to share the code if anyone wants it. Cheers

@Jojoshua
Copy link
Collaborator

Jojoshua commented Nov 6, 2021

@oneplugin that's pretty cool, I would like to see the implementation

@oneplugin
Copy link

oneplugin commented Nov 6, 2021 •
edited
Loading

It’s not complete and may take two more days to nail it. But most of the basic stuff is done and now I have to save the structure and was thinking about adding a new field called rows in the JSON which will include a set of rows which apparently holds all the fields in that row. I can share it as it is if you want or do you want to wait until this is fully done?

Heads up - this may not be the perfect implementation of multi column as I did this in a day and a half. So bear with me if there are any issues..

@Jojoshua
Copy link
Collaborator

Jojoshua commented Nov 6, 2021

@oneplugin keep working at it. I kind of figured you were using building of the previous bootstrap work and automating the row and row-groups creation.

@oneplugin
Copy link

@Jojoshua actually I’m not. I’m not using sortable at all but I added extra divs inside the stage which are all droppable instances and that made the whole thing a lot simpler. It was only a matter of manipulating the dom on drop events

@billystalnaker
Copy link

@oneplugin I’m interested in your code for multi column support. How’s it coming?

@oneplugin
Copy link

@Jojoshua @billystalnaker You can download the source archive from the link below

formBuilder-3.7.3.zip

I have added two new options

  1. propertiesInModal - If set to true, properties of the fields will be shown in the bootstrap modal dialogs else they are shown in-line like before. Default is true

  2. maxFieldsInRow - Maximum number of allowed fields in a column. Default is 4.

Todo -

  1. There are some minor sass/css issues while hovering over the buttons in the action area
  2. XML saving and loading

If there are any issues, please feel free to let me know and I will be more than happy to fix them

@oneplugin
Copy link

Forgot to mention that Form Rendering is not done as I'm using a custom renderer. But it's easy to do. You just need to checkout the loadFields function and it's self explanatory

@oneplugin
Copy link

If you are getting an error that draggable or droppable is not defined, then that's because jquery-ui doesn't play nicely with webpack. Do the following

Add "jquery-ui-bundle": ">=1.12.1" to package.json

and add

require('jquery-ui')
require('jquery-ui-bundle')

to form-builder.js

@billystalnaker
Copy link

@ oneplugin Wow, I really appreciate this! I'm probably going to sound like a total newb, but I've been using the plain pre-compiled minimized version from Form Builder's website and I'm not familiar with js package managers. Any chance you could send a min version of this for me 🙏? If not, I'll need to put my dabbling boots on and get my js package manager skills up to speed.

@oneplugin
Copy link

form-builder.min.js.gz

Make sure you include bootstrap.min.css for the modal dialog to work.

If you run into any issues, do let me know. Thanks!

@billystalnaker
Copy link

@oneplugin Appreciate that!! I plugged that file in and it doesn't seem to be letting me drag and drop any fields in. Also getting these weird ajax requests to http://localhost:8082/sockjs-node/info?t=1636914634612

Thanks in advance!

@oneplugin
Copy link

oneplugin commented Nov 14, 2021 via email

@billystalnaker
Copy link

Are you seeing any errors in the console? Those ajax requests are for enabling chrome debugging. You can ignore them
…
On Mon, 15 Nov 2021 at 12:01 AM, billystalnaker @.***> wrote: @oneplugin https://github.com/oneplugin Appreciate that!! I plugged that file in and it doesn't seem to be letting me drag and drop any fields in. Also getting these weird ajax requests to http://localhost:8082/sockjs-node/info?t=1636914634612 Thanks in advance! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#379 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AV7ZQQGOHLMTP5HWRBLZ2RDUL757BANCNFSM4DCMSXQA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

Capture

None outside of that

@oneplugin
Copy link

oneplugin commented Nov 14, 2021 via email

@oneplugin
Copy link

oneplugin commented Nov 15, 2021 •
edited
Loading

@billystalnaker To make things easier for you, I have created a jsFiddle

https://jsfiddle.net/jugsvn/xbsv2oh4/19/

@billystalnaker
Copy link

Ahh @oneplugin I have found the issue. In your jsFiddle if you remove all of the existing fields and then try to add a new field there is no group to add the field to, and so it doesn't let you add the field anywhere. Which is exactly what I'm experiencing.

@billystalnaker
Copy link

@oneplugin after realizing that I just needed some fields to make this work, I saved and tried to re-render and now I'm getting this "replace" error in the bowels of the javascript. Any advice here?
image

@billystalnaker
Copy link

@oneplugin any chance I could get you to wrap up that min.js file in something that doesn't have to go through that whole "eval" process you have going on? It's erroring out for me.

@oneplugin
Copy link

oneplugin commented Nov 23, 2021 via email

@billystalnaker
Copy link

@oneplugin I appreciate the work you've done so far on this, and honestly, I just want to use what you've already completed. I am planning on using a custom renderer as well, and so I'm not as concerned there either. Just want a min.js file I can use that will load in correctly without random pings to "localhost" and other console errors.

@oneplugin
Copy link

oneplugin commented Nov 25, 2021 via email

@MBagherii
Copy link

@oneplugin Thank you for your improvment, can you send me formrender.min.js here??

@oneplugin
Copy link

oneplugin commented Dec 22, 2021 via email

@MBagherii
Copy link

@oneplugin Thanks a lot for your help

@Jojoshua Jojoshua mentioned this issue Jan 13, 2022
Merged
@Obaidraj
Copy link

Obaidraj commented Feb 1, 2022

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_1__(...).formBuilder is not a function
In react i am facing this issue

@ArtemLipodat
Copy link

ArtemLipodat commented Sep 15, 2023 •
edited
Loading

how to enable multiple columns?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@kevinchappell @wizaerd @billystalnaker @Jojoshua @MBagherii @Obaidraj @cccuscott @ArtemLipodat @oneplugin