Share My Creation BANanoVuetifyAD3 - New Form Builder Concept

Ola

Update on 14 July 2022: You might want to check the VFlexDialog

Download the BVAD3 Library Source & Run
Concept Form Builder Project

This new form builder concept has been born due to the intensity of work that is necessary at times to create forms.

You have containers, form, rows, columns and the various elements you need. With this one drags a special VField special elements inside a VForm. After specifying the component type, vmodels etc, then calling .CreateForm, builds the grid vrows and vcols and the necessary elements using the specific matrix positions for the elements.

We intend to link this to a DataSource and the Data-Table automatically.

BANanoVuetifyAD3
https://github.com/Mashiane/BANanoVuetifyAD3

Mashy Teaches BANanoVuetifyAD3
https://www.b4x.com/android/forum/t...nanovuetifyad3-the-new-series.132305/#content

Music by bensound

 

[Mashiane]

Ola

I have included the source code of the project on the video. You can explore it and send your feedback.

Download the lib and run it. Download the example project and explore..

Have fun!

 

[LJG]

Ola

Download the BVAD3 Library Source & Run
Concept Form Builder Project

This new form builder concept has been born due to the intensity of work that is necessary at times to create forms.

You have containers, form, rows, columns and the various elements you need. With this one drags a special VField special elements inside a VForm. After specifying the component type, vmodels etc, then calling .CreateForm, builds the grid vrows and vcols and the necessary elements using the specific matrix positions for the elements.

We intend to link this to a DataSource and the Data-Table automatically.

BANanoVuetifyAD3
https://github.com/Mashiane/BANanoVuetifyAD3

Mashy Teaches BANanoVuetifyAD3
https://www.b4x.com/android/forum/t...nanovuetifyad3-the-new-series.132305/#content

Music by bensound

Wow, I can also see how (maybe in the future) we can use the "SetWatch" concept to provide real-time updates from the database to the tables or other data display components (e.g., when someone updates or adds something to the database, it will immediately show up on the client-side data display components).

 

[Gabino A. de la Gala]

Ola

I have included the source code of the project on the video. You can explore it and send your feedback.

Download the lib and run it. Download the example project and explore..

Have fun!

Done and working perfectly.
Thanks.

 

[magdoz]

Thanks. Working like a charm !

 

[Mashiane]

Trapping Events

This second part deals with Trapping Events for all the form elements, this includes images, text boxes, avatars, fabs, selects, switches, checkboxes.



Updated Source Code on first post!

 

[Mashiane]

Updates

Linking VForm with the DataSource with LinkForm (DS) / LinkDataSource (Form)

Step1 : Drop a VForm on a VMsgBox and specify parameters

Step2: Add one or more VFields you need, specify defaults, which ones are used for CRUD, titles etc, primary keys etc.

Step3: Add a DataSource to the form and give the DBName and a few parameteres, the rest of the content will be sourced from the VForm

Step4: After BANano.LoadLayout, Call .CreateForm on your form

'build the page html here
    banano.LoadLayout(home.Here, "home")
    '
    contactform.CreateForm

Step5: Call DataSource.LinkForm(formName)

   'link the DataSource to the Form Built content
 usersDS.LinkForm(contactform)

Behind the scenes, this reads everything .CreateForm did and set if for the DataSource.

'link form after CreateForm
Sub LinkForm(frm As VForm)
    If frm.IsCreated Then
        BANano.Throw($"BANanoDataSource.LinkForm - The form ${frm.ID} needs to be created first. Call .CreateForm first before this call."$)
        Return
    End If
    If bShowLog Then
        Log($"BANanoDataSource.${sDatabaseType}.${sDatabaseName}.${sTableName}.LinkForm"$)
    End If
    '
    SchemaReset    
    setTableName(frm.TableName)
    setRecordSource(frm.RecordSource)
    setPrimaryKey(frm.PrimaryKey)
    setAutoIncrement(frm.AutoIncrement)
    setSingular(frm.Singular)
    setPlural(frm.Plural)
    setDisplayField(frm.DisplayField)
    'only fields marked as OnDB are used
    SchemaSetFields(frm.Fields)
    SchemaSetIntegers(frm.Integers)
    SchemaSetDoubles(frm.Doubles)
    SchemaSetBlobs(frm.Blobs)
    SchemaSetSelectFields(frm.Fields)
    SchemaSetDefaults(frm.Defaults)
End Sub

NB: The content you specify in the VForm is specified once. This will be used by both the DataSource and the DataTable. Thus one needs to ensure that they understand the VForm and VField workings.

Step 6: Generate members and then add the CRUD event callbacks to your VueComponent.

A working example coming soon!

Ta!

 

[dw_b4x]

Newbie Question,

Is this something that can connect through JRDC2 ??

 

[Mashiane]

Linking DataSource to the Form & Using MySQL PHP config file

Source code on first post updated

 

[joulongleu]

Very good

 

[Mashiane]

Newbie Question,

Is this something that can connect through JRDC2 ??

I will push an example soon.

 

[joulongleu]

I will push an example soon.

I only use MYSQL and I haven't used JRDC2 yet,But it's already good.
Looking forward to more examples....

 

[Mashiane]

Understood. the jRDC2 approach will work for VPS distributions, which is not what most people are exposed to when having to deploy to the internet, thus us ensuring that the MySQL PHP side works well also.

 

[dw_b4x]

My thoughts on utilizing JRDC2 would be the fact that there is one common database gateway. SQL Coding would be standardized. Plus JRDC2 can be utilized mobile platforms.

 

[Mashiane]

This demo is about the link between the VForm + DataSource + DataTable.

As an example:

'build the page html here
    banano.LoadLayout(home.Here, "dtlink")
    
    contactform.CreateForm
    contactform.BindState(home)
    usersDS.BindState(home)
    contactform.LinkDataSource(usersDS)
    contactform.LinkDataTable(usersDT)
    
    contactentry.BindState(home)
    usersDT.BindState(home)

This is possible when adding VFields to the VForm, the field name and titles you specify automatically create the data-table when the link is established. Then one uses the data-table as usual

 

[joulongleu]

HiMashiane After testing for a long time, I found that the last example (BVAD3FormBuilder) did not have an ID. This time there is an ID(is null) and cannot login success .but table is ok, I don’t know where the problem is.thank you
The following screen is for your reference:

 

[Gabino A. de la Gala]

Hi[B]Mashiane[/B] After testing for a long time, I found that the last example (BVAD3FormBuilder) did not have an ID. This time there is an ID(is null) and cannot login success . I don’t know where the problem is.thank you
The following screen is for your reference:

View attachment 117329
View attachment 117331

I can't login either.

 

[Mashiane]

Good observation. Find the code that executes when the button is clicked. The AddWhereMap receives a map. Before the map is passed, remove the id key on it and test again.

Ta!

 

[joulongleu]

Good observation. Find the code that executes when the button is clicked. The AddWhereMap receives a map. Before the map is passed, remove the id key on it and test again.

Ta!

Yes, remove the id key ok,thank you.