B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Mashiane · Feb 23, 2022

Tip: The VueTable Toolbar Buttons...

The VueTable can have app defined buttons when you activate them and you can add more.

These are activated in the Abstract Designer like this...

To mention a few.

The events linked to these buttons are like...

You can however add your own buttons to the toolbar by specifying the button id, color, icon and tootip here. These should be separated by ;

Eg, stop, mdi-stop, orange, Stop Processing.

The event for this will be

You change the ownbutton to be the button id (key) e.g.

B4X:

sub dtTable_stop_click (e as BananoEvent)
End Sub

Those events with (Item As Map) are specific to the specific row being processed, for example. The map returns the row data where the keys are the column names (all in lowercase)

At times you want to (1) disable, (2) show/hide, (3) activate loading the toolbar buttons. To be able to do this you can call any of

B4X:

NewDisable(True), NewVisible(False), NewLoading(True)
ClearSortDisable, ClearSortVisible, ClearSortLoading
ExcelDisable, ExcelVisible, ExcelLoading
DeleteAllDisable, DeleteAllVisible, DeleteAllLoading
RefreshDisable, RefreshVisible, RefreshLoading
CSVDisable, CSVVisible, CSVLoading
ClearFilterDisable, ClearFilterVisible, ClearFilterLoading

When you activate the filter, your column names will be available for filtering like this. You can select which columns to show on your table / not.

Mashiane · Feb 23, 2022

Tip: VueTable Action Columns

By fault, the Vuetable comes up with pre-built action buttons, however you can also add your own. These are, edit, delete, clone, print, save, cancel, download, menu.

These are activated via the abstract designer property bag with...

The events for these buttons are

B4X:

dtTable_edit (item As Map)
dtTable_delete (item As Map)
dtTable_clone (item As Map)
dtTable_print (item As Map)
dtTable_save (item As Map)
dtTable_cancel (item As Map)
dtTable_download (item As Map)
dtTable_menu (item As Map)

When executing any of these events, the item returned is the row content each key being the field name (in lowercase).

One can also add their own action buttons.

These should also be action key, action header, action icon and action color. Each action should be separated by ; for each of the 4 entries.

These event fired for these additional columns is

Where the column name is the actual column key you entered, eg.

B4X:

sub dtTable_mycolumn (Item As Map)

There are also other events, e.g.

Which fire when details of that column changes (change the word column to reflect the name of your actual column), e.g.

B4X:

dtTable_name_change (item As Map)

There is also this Change event

This is useful, if you have defined columns as checkfields, combo, switches etc. This fires when ever the complete row content has changed irrespective of column.

Others (change the columnName to be the exact name of your field)

Mashiane · Feb 23, 2022

Tip: Vuetable Toolbar Button States (Disabled/Visible/Loading)

At times you want to (a) disable / enable, (b) Hide/Show and (c) activate /de-activate loading for a toolbar button. For example:

In this case, we have disabled the AddNew button, hidden then DeleteAll button and set the loader for the refresh button to be active.

Setting the loading state to true is useful for example for long processes (and you dont want a user to "re-click" the button.

For the built in buttons these are

B4X:

dt2.NewDisabled(True)
dt2.RefreshLoading(True)
dt2.DeleteAllVisible(False)

etc.

For your own added toolbar buttons you have (a) ButtonDisabled (b) ButtonLoading and (c) ButtonVisible - you pass the key of the button created.

Mashiane · Feb 23, 2022

Tip: VueTable Button Actions

In the VueTable, you can add your own columns, in this example, we have a added a normal button, conditionally rendered the labels and color depending on some value in the row.

The column name is "check" and the header label is "Check"

We add out button via the database-fields property. IT DOES NOT EXIST IN OUR DATA-BASE though.

and the title.

We then indicate that its a "Button".

We also give it an initial color

You can also indicate from here that the color is from the row content. e.g. Lets assume that the color of the button is in the field named buttoncolor, then here, we would write check: item.buttoncolor

We want the label of the "button" to be dependent on some row value. We then define a "pre-display" computation via the Compute Value property.

This means that each 'value' of the button will be determined by the callback checklabel. We add () to this computation because we want that callback to receive the whole row data. Notice the checklabel(item As Map) below. If we wanted the computation to use the actual value of the 'check' field, we would exclude the () from the call and just write checklabel(currentLabel As String). Map with () and String without.

B4X:

Sub checklabel(item As Map) As String
    Dim carbs As Int = item.GetDefault("carbs", 0)
    carbs = banano.parseInt(carbs)
    If carbs <= 50 Then
        Return "Decline"
    End If
    If carbs >= 51 Then
        Return "Approve"
    End If
    Return "Check"
End Sub

From this sub, if the value of cards, is <= 50 then decline, then if >= 51 then approve. The last return is just added for completeness.

We also want the color of the button to be computed based on some property.

Here we say, for the check 'button', if the value is <= 51, make the button color red and if not, make it green. Note the lowercase color value.

B4X:

Sub checkcolor(item As Map) As String
    Dim carbs As Int = item.GetDefault("carbs", 0)
    carbs = banano.parseInt(carbs)
    If carbs <= 50 Then
        Return "red"
    End If
    If carbs >= 51 Then
        Return "green"
    End If
    Return "black"
End Sub

Just in case, we also register these methods on the Vue Component instance.

Events

The event fired by this button click is defined as

B4X:

sub dtTable_check (Item As Map)

This will be available in the Kitchen Sink Data-Table Examples.

Mashiane · Feb 23, 2022

Tip: Loading Indicators at Row Level

Buttons, CheckBoxes and buit in Action Buttons, can receive a "loading" indicator too.

This can show a process that is specific to that row.

In the above table, the name on each row is unique, so we will use the name and then update the loading property of that row.

B4X:

'a button has been clicked
Private Sub dt1_check (item As Map)
    'get the name of the item
    Dim sname As String = item.Get("name")
    'change the loading property
    dt1.ListChange("name", sname, CreateMap("loading": True))
End Sub

Note above that you can change a lot of properties at the same time, thus using a map.

#SharingTheGoodness

Mashiane · Feb 23, 2022

Tip: VueTable Column Types that fire a change event

The following column types in the VueTable will fire a change event when such is generated. This is usually for inline editing.

select
combobox
autocomplete
textfield
date
time
textarea
datetime
money
linear
rating
checkbox
switch

You can have a change event at global level OR at column level (NOT BOTH) to the data-table e.g.

Changes happening at ROW level

B4X:

sub dtTable_Change (Item As Map)

or at column level

Changes happening at COLUMN level

B4X:

sub dtTable_ColumnName_Change (Item As Map)

The ColumnName should be your field name.

Ceveat:

DO NOT USE THESE METHODS AT THE SAME TIME AS THEY ARE MUTUALLY EXCLUSIVE.

Mashiane · Feb 27, 2022

Tip: VueTable Menus

Both the toolbar and action buttons can receive a menu. This is a button that activates a menu. The menu items are customizable by the developer. Both at action & toolbar level, there can only be 1 menu for each.

VueTable Toolbar Menu

To add these VueTable toolbar menu buttons, go to the vuetable layout in the abstract designer and specify the details of your menu items

This fires a dtTable_MenuBar(Item As String) event, where the item is the menu item id for the toolbar.

B4X:

Private Sub dt2_MenuBar (MenuID As String)
    vuetify.ShowSnackBarSuccess(MenuID)
End Sub

At column level, when you have selected a menu to be available for your rows, it is activated with items you can define.

These have also been created on the VueTable Menu Action option

This fires a dtTable_Menu (MenuID as String, Item as Map) event, where the MenuID is the key selected and the item is the row applicable. This event was previously dtTable_Menu(Item As Map)

B4X:

Private Sub dt2_Menu (MenuID As String, item As Map)
    Log("menuid...")
    Log(MenuID)
    Log("item...")
    Log(item)
    vuetify.ShowSwalToastInfo($"${MenuID}: ${banano.ToJson(item)}"$, 1000)
End Sub

Mashiane · Feb 27, 2022

BANanoVuetifyAD3 updated to BANAno 7.35

Please be advised that the BVAD3 library and Kitchen Sink has been updated to use the BANano 7.35 library.

Get your copy now from github, https://github.com/Mashiane/BANanoVuetifyAD3

Also ensure to update the Additional Libraries for updated b4xtemplates etc.

Mashiane · Mar 1, 2022

Tip: Trapping [ENTER] key press in VTextField

When generating events for text fields, you can trap the keyup, keypress events.

To trap the press of the [ENTER] key, generate keyupenter event or keyupenterPrevent(default)

#SharingTheGoodness

Mashiane · Mar 1, 2022

Tip: Trapping get(FOCUS) & lost(FOCUS) events for components e.g. VTextField

To trap lost-focus on components, one uses the BLUR event

To trap when the get-focus on the element use the FOCUS event

#SharingTheGoodness

Mashiane · Mar 2, 2022

BANanoServer Implications for BANanoVuetifyAD3

Hi there gang.

It has come to light that the latest version of BANano 7.35+ has a compulsory requirement of Hikari if you use the BANanoServer, based on my question here.

[BANanoServer] [SOLVED] Is Hikari inevitable now?

Hi there Just referenced 7.35 in one of my bananoserver projects. boom! Is this inevitable? Thanks in advance.

www.b4x.com

1. This requires that you use JDK 11, I have been using 8 all along, so if you use BANanoServer + BANAno 7.35, please update your stuff.

Download and unzip the file and then in b4j goto tools > configure path and update.

2. Then in your project, you need to add these directives.

B4X:

 #AdditionalJar: HikariCP-5.0.0.jar
    #AdditionalJar: slf4j-api-1.7.32      
    #AdditionalJar: slf4j-simple-1.7.32.jar

#SharingTheGoodness

has a compulsory requirement of Hikari

As per BANano Essentials eBook, "The BANanoServer library has pre-configured a lot of stuff for you, but as it is a just a B4J .b4xlib library, you can make any changes to it to match with your needs."

Going forward, BVAD3 is adopting the Hikari connection pool for all BANanoServer projects.

Mashiane · Mar 5, 2022

Tip: VueTable Display Column Dividers

Mashiane · Mar 5, 2022

VueTable Updates: Ability to resize columns

Mashiane · Mar 5, 2022

Tip: Adding an item in the drawer that will open the URL in a new browser tab

B4X:

drwlist.AddItemURL("other1", "emoji", "", "", "EmojiCSS", "https://emoji-css.afeld.me/", "_blank")

Mashiane · Mar 7, 2022

IMPORTANT ANNOUNCEMENTS OF NEW B4XTEMPLATES

Hi there, please note that 2 new b4xtemplates now are available from GitHub, these are BVAD3 Server MySQL and BVAD3 Server MongoDB, to enable you to create CRUD Java Jetty WebApps easily i.e. BANanoServer. Get your copy of the BVAD3 library to explore these. Please note the ReadMe in the Library folder should you compile the b4xlib yourself. Have fun!

The BVAD3 Server MySQL demo is available here: (please note the .sql file in the Files tab to create the db. The username has been set to root and no password in the baselayout datasource)

The BVAD3 Server MondoDB demo is available here:

#SharingTheGoodness

Mashiane · Mar 8, 2022

Tip: Creating VueTables at Runtime that change often / Using the save VueTable to show different content.

To create the schema i.e. columns & listing at runtime
You cretae a VueTable with the abstract designer and then at runtime can change its structure i.e. columns/data like this.

1. Execute .Reset (this clears everything about your VueTable)

B4X:

Sub Reset
    VC.SetData(itemsname, NewList)
    VC.SetData(selected, NewList)
    VC.SetData(groupby, NewList)
    VC.SetData(sortby, NewList)
    VC.SetData(groupdesc, NewList)
    VC.SetData(sortdesc, NewList)
    VC.SetData(expanded, NewList)
    VC.SetData(headers, NewList)
    VC.SetData(filters, NewList)
    VC.SetData(allcolumns, NewList)
    VC.SetData(xPage, 1)
    VC.SetData(xPageCount, 0)
    columnsM.Initialize
    Size = 0
End Sub

2. Execute .AddColumn for all the columns you want to add (this builds up the columns you need). There are a variety of these calls, e.g. AddAction, etc etc. In essense this does something like

B4X:

Sub AddColumn1(colName As String, colTitle As String, colType As String, colWidth As Int, colSortable As Boolean, colAlign As String)
    colName = colName.tolowercase
    Dim nf As DataTableColumn = NewDataTableColumn(colName, colTitle)
    nf.align = colAlign
    nf.sortable = colSortable
    nf.className = ""
    nf.width = colWidth
    nf.ColType = colType
    nf.divider = bDividers
    columnsM.Put(colName, nf)
    SetColumnType(colName, colType)
End Sub

3. Execute .UpdateHeaders (this sets up the columns and stores columns to use when filtering)

B4X:

Sub UpdateHeaders
    hdr.Initialize
    filterList.Initialize
    'loop through each column
    For Each k As String In columnsM.Keys
        'get the header
        Dim nf As DataTableColumn = columnsM.Get(k)
        Dim header As Map = BuildHeader(nf)
        hdr.Add(header)
        filterList.Add(k)
    Next
    VC.SetData(headers, hdr)
    VC.SetData(allcolumns, hdr)
    VC.SetData(filters, filterList)
End Sub

4. Execute .UpdateItems (we are not using .Reload because that has been done by .Reset)

B4X:

Sub UpdateItems(C As VueComponent, lst As List)
    Items = lst
    Size = Items.size
    C.SetData(itemsname, lst)
End Sub

Reload on the other hand is useful when you want to load data and your VueTable column definition is done with the abstract designer

B4X:

Sub Reload(records As List)
    Items = records
    VC.SetData(itemsname, Items)
    VC.SetData(selected, VC.NewList)
    VC.SetData(groupby, VC.NewList)
    VC.SetData(sortby, VC.NewList)
    VC.SetData(groupdesc, VC.NewList)
    VC.SetData(sortdesc, VC.NewList)
    VC.SetData(expanded, VC.NewList)
    VC.SetData(xPage, 1)
    Size = Items.size
End Sub

5. To show / hide particular columns at runtime use..

.ShowColumns(list) - shows the columns
.HideColumns(list) - hide the columns

Mashiane · Mar 11, 2022

NEW B4XTEMPLATES

We have added new b4xtemplates for BVAD3, FireStoreDB and MongoDB PHP that helps you quickly create webapps that use the respective back-ends.

For Firestore, see this Mashy Teaches thread post:

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

Creating Vuetify Forms with BANanoVuetifyAD3 - Part 9 - Uploading Files with VFileInput This has been extracted from the Package Manager project to demonstrate how to Upload files For more details about the VFileInput, see this kitchen sink page.

www.b4x.com

For MongoDB PHP see this Mashy Teaches thread post:

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

Creating Vuetify Forms with BANanoVuetifyAD3 - Part 9 - Uploading Files with VFileInput This has been extracted from the Package Manager project to demonstrate how to Upload files For more details about the VFileInput, see this kitchen sink page.

www.b4x.com

NB:

This helps you create CRUD based WebApps easily using any backend of your choice. We will be adding MySQL and SQLite and MSSQL soon. You will note that the code base for all of these projects is 99.9% similar, with the exception of the DataSource settings.

Ta!

Mashiane · Mar 12, 2022

Just pulled another Fullstack WebApp using Vuetify and SQLite PHP.

More b4xtemplates have been added to the github libraries as depicted below.

Download Additional Libraries

Mashiane · Mar 13, 2022

BANanoVuetifyAD3: Update to B4xTemplates..

BANanoVuetifyAD3 has been updated with the latest b4xtemplates to ensure anyone who wants to, to be able to create CRUD webapps easily.

Get your templates and libraries here.

Mashiane · Mar 19, 2022

Notification: Update to BVAD3 B4xTemplates

Just finished the Fullstack WebApp example using MSAccess PHP PDO. This involves creating a new B4xTemplate for MSAccess PHP as demonstrated below:

Get the latest updates from Github..

B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads