Bootstrap Form Generator column values

I am working with Bootstrap 4 Form Generator but failed to figure out how to define values for radio button, checkbox and select box. Also how to include date picker and date&time picker. Wappler documentation is very basic and does not help much.

Hi @genx, let’s take it one thing at a time.

For radio buttons and checkboxes, see Dynamically check Radio Buttons and Checkboxes

For select boxes, see https://docs.wappler.io/t/dynamic-select-menu/2867

For date picker, see https://docs.wappler.io/t/using-date-range-picker-with-dynamic-values/11754

I have used the select box link and date picker link on my site with no issues. I have not had to use the radio or check box link in my site as of yet, but I am sure it works as described.

If the above links do not work for you, please provide more information on what it is you are doing. Are the values static or dynamic? Screenshots of your App Structure set up would help as well.

Please find enclosed my screenshot. I need select box like https://select2.org/data-sources/ajax

For the first two entries you highlighted in your screenshot, you would need to make sure the type is select (you have it for one, but you would need it for the other). Then you would need to follow the directions in the link above for select boxes. The remote datasource would be set up in the server action, you would need to create a new database connection to connect to the remote datasource.

For the datetime one, you would change the type from date to text, then follow the directions in the date picker above. There has been some discussion that you can keep the type as date and use the date picker, but I have found that changing it to text works better for me.

As far as the Ajax Select2 link you posted, that is not something that is native in Wappler and you would need to code that yourself. It may be possible to generate the form using Wappler and the change the code to include the Ajax Select2 field. You would need to follow the directions on their website to see how to do that.

As an alternative to the Ajax Select2, have you considered the Auto Complete feature Wappler offers? Using the Autocomplete Component

Thank you for your reply. Will it remain editable in BS4 generator after so many alteration ? and insert the record properly ? I will surely try with your suggestions tomorrow as it is already 10:30 PM in India.

BS4 form generator provides the structure for the form. Any changes or alterations you make will be in place after you run the generator the first time. Modifications of the form can be done in the App Structure Properties or under Dynamic Attributes or Dynamic Events (as necessary).

If you run the generator a second time, it will reset the form to the default settings, so I do not recommend running it a second time unless there is a reason to do so.

The form will submit whatever action you have linked it too: insert, update, or delete.

1 Like

Thank you very much for your input. Every thing worked well. I am finding wappler to be a great tool and the community is very active and supportive.

As you suggested I used the Auto Complete component and it solved my purpose. However I also intent to achieve multi select box like this one https://select2.org/placeholders#multi-select-placeholders , any idea on this ?

@sid has used this i guess - maybe he can help on this. may need some custom code though.

This will require custom JS.
How I have used this is I have a server connect (SC) which is used as data source for a regular select HTML element.
Then, on onsuccess event of the SC, I call JS to convert the regular select to select2.

Select2 itself mostly works fine. But in case it doesn’t, I also need to trigger the change event (on onchange event of select2) for DMX to read the updated value on the regular select.