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

 
Last edited:

LJG

Member
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).
 

Mashiane

Expert
Licensed User
Longtime User
Updates

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


Step1 : Drop a VForm on a VMsgBox and specify parameters

1627660281349.png


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

1627660349174.png


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

1627660433468.png


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


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

Step5: Call DataSource.LinkForm(formName)

B4X:
   '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.

B4X:
'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!
 

Attachments

  • 1627659903281.png
    1627659903281.png
    41.4 KB · Views: 206

Mashiane

Expert
Licensed User
Longtime User
This demo is about the link between the VForm + DataSource + DataTable.

As an example:

B4X:
'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

1627864721412.png



 

joulongleu

Active Member
Licensed User
Longtime User
Hi:)Mashiane 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:
1627903711034.png

1627898057391.png

1627898255489.png
 

Attachments

  • 1627898127790.png
    1627898127790.png
    181.8 KB · Views: 186
Last edited:

Gabino A. de la Gala

Active Member
Licensed User
Longtime User
Top