B4J Tutorial [BANanoWebix] Dragging N Dropping Things with the Form Designer

Ola

Version 1.19+ with drag n drop support.


The next iteration of BANanoWebixApp (Library + Demo + Form Builder) will include drag and drop functionality to design forms.

Whilst still early days, this is rather an exciting time in the BANanoWebix world.

In the video above we do the following:

1. Drag and drop a database link to the tree, we confirm the action by saving it.
2. Drag and drop a table to the database, we confirm the action by saving it.
3. Drag and drop fields to the table and save them.
4. Drag and drop a form to the tree and save it.
5. Drag and drop the fields from the table to the form, this creates text fields that are automatically saved and the tree refreshed.
6. In the end we have a form with some text fields.

Still building stuff up and debugging. It still needs some patience when running.

Ta

PS: Webix uses objects/maps to create the UX.

 

[Mashiane]

Let's add a GoogleMap to our form...

We can change the properties before we save it.

 

[Mashiane]

Let's add an image to our form...

 

[ThRuST]

WOW. Hey this is quite an amazing work you're doing. The short and effective tutorials is spot on. Admirable TA!

 

[Mashiane]

Lets create a toolbar with some buttons, a search textbox and an icon. A toolbar acts the same as a form, you need however to change the AddingMethod on the child elements to .AddColumns and not .AddRows.

We drag a toolbar to the form and save it. Then we drag each element we want to create on the toolbar, saving each item as we go along.

 

[Mashiane]

Let's drag and drop an iframe into the form. These are used to show other web-pages. So far this works internally..