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

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetifyAD3 - Fullstack WebApp using Vuetify, MSSQL, Java Jetty & Hikari Pooling (No PHP)

1. You will need MSSQL connection drivers applicable to the Java JDK you are using.





Related Content

 

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User
Vuetable - Getting the ClickedRow / RightClickedRow / DoubleClickedRow

VueTableRowEvent.gif


The "other" map has a key called "item", you can easily..

B4X:
Dim item As Map = other.get("item")

For ClickRow, the item argument is already available.

B4X:
Private Sub VueTable1_ClickRow (item As Map, other As Map)
    page.SetData("tablerow", $"ClickRow: ${banano.ToJson(item)}"$)
End Sub

Private Sub VueTable1_ContextMenuRow(e As BANanoEvent, other As Map)
    page.SetData("tablerow", $"ContextMenuRow: ${banano.ToJson(VueTable1.GetRightClickedItem(other))}"$) 
End Sub

Private Sub VueTable1_DblClickRow (e As BANanoEvent, other As Map)
    Log(other)
    page.SetData("tablerow", $"DblClickRow: ${banano.ToJson(VueTable1.GetDoubleClickedItem(other))}"$)
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
VueTable - Creating Expansion Panels

From this...

1650804976121.png


To:

Expandit.gif


Reproduction

1. Create e VueTable in your layout.
2. Define the fields that it will display. Each row in the table is named an "item". For example

1650805407810.png


we have item.id, item.done, item.name, item.categories etc.

3. We create the expansion panel layout, this we will append to the table. For example, we add a text field to the layout.

1650805525251.png


and establish a bi directional two way binding (v-model) of the text field to item.name

Where we have used a label, we establish a link to the caption of the label with

1650805604018.png


4. After creating the expansion panel layout, we need to load the layout with the table and then append the one with the expansion panel.

4.1 Load layout with VueTable

1650805699717.png


For the expansion panel to work. We need to call .BindState of the table. This builds up the structure (HTML) of the table.

4.2 BindState of the table and LoadLayoutAppend the expansion panel layout.

1650805750323.png


4.3 Adding Buttons

In the expansion panel, we added a button, and we want to know which item is being processed when that button is clicked, so after loading the expansion panel layout.
We need to link the click event to the "item" itself. Remember, events are automatically created but they dont link to items, so, we need to add..

B4X:
'we have a click for each item
    btnThisItem.OnClick("item")

And then we update the generated click event to receive the item as an arguement.

B4X:
'clicking an item on any 
Private Sub btnThisItem_Click (item As Map)
    Log(item)
End Sub

#Happy Coding

PS:

This has been added to the Kitchen Sink "What's New" section..

1650806009810.png
 

Mashiane

Expert
Licensed User
Longtime User
Recap: Creating PDF reports with the abstract designer drag n drop in BANanoVuetifyAD3. Powered B4x + BANAno + Vuetify.

 

Mashiane

Expert
Licensed User
Longtime User
Deploying Static Webiste to Netlify

 

Mashiane

Expert
Licensed User
Longtime User
Runtime Manipulation of components in pgIndex from other pages

NB: THE SNIPPETS BELOW ONLY APPLIES TO ITEMS IN pgIndex - accessible from any other page in your app.


pgIndex uses VuetifyApp and pages use VueComponent. Due to using different items to create their content, at times you want to manipulate components you have placed in pgIndex from other pages. To do that you need to use VuetifyApp from the other pages.

Components at page level use VueComponent.BindStateAll to ensure that bindings are linked to that page. This makes the components available across that page.
Components at pgIndex level use VuetifyApp.BindStateAll to ensure that bindings are linked to pgIndex. So anything you inject in pgIndex will be available from the VuetifyApp namespace at anytime of the app. Pages however are only manipulated when they show due to them groing through the Create ... Destroy life cycle.

Example

In your base layout you have components and each has a name.

1652363240335.png


How to manipulate [pgIndex] items from pages during runtime?

In the layout of pgIndex, find the name of the component you want to manipulate from the property bag, e.g btnLogOff here is the name of the component

1652377255948.png



You will need replace "name-of-component" in each of these calls with the actual name from the property bag.
Use that name in any of these calls to change the state of the component, so in "name-of-component" you will write "btnLogOff" for example.

***********

Edit...
CEVEAT - FOR VISIBILITY - THE COMPONENT "Hidden" should initially be set to True in the property bag. If you then want to set it as visibile initially, call .Show after LoadLayout.

Hide an item / Visibile = False

B4X:
Vuetify.Hide("name-of-component")

Show an item / Visibility = True

B4X:
Vuetify.Show("name-of-component")

Toggle the visibility

B4X:
Vuetify.ToggleItem("name-of-component")

Toggle drawer visibility

B4X:
Vuetify.ToggleDrawer("name-of-component")

Open drawer

B4X:
Vuetify.OpenDrawer("name-of-component")

Close drawer

B4X:
Vuetify.CloseDrawer("name-of-component")

Run A sub in pgIndex from other page

B4X:
Vuetify.RunMethodOnApp("subName")

The sub needs to be registered with .SetMethod into the memory of the WebApp first.

Run a sub in the active page from pgIndex

B4X:
Vuetify.RunMethodOnActive("subname")

The sub needs to be registered with .SetMethod into the memory of the WebApp first.

Disable / Enable an item

B4X:
Vuetify.SetEnabled("name-of-component", true/false)

Update item color

B4X:
Vuetify.UpdateColor("name-of-component", color)

Update "loading" status of an item (usually buttons)

B4X:
Vuetify.UpdateLoading("name-of-component", true/false)

Update a badge

B4X:
Vuetify.UpdateBadge("name-of-component", balue)

Increment a badge

B4X:
Vuetify.IncrementBadge("name-of-component")

Decrement a badge

B4X:
Vuetify.DecrementBadge("name-of-component")

Update Badge Color

B4X:
Vuetify.UpdateBadgeColor("name-of-component", color)

Set ReadOnly status - these also apply to VForm items

B4X:
Vuetify.UpdateFieldReadOnly("name-of-component", true/false)

Update Caption

[code]
Vuetify.UpdateFieldCaption("name-of-component", caption)

Clear Items e.g. Combos etc

B4X:
Vuetify.UpdateFieldClearItems("name-of-component")

Change an image

B4X:
Vuetify.UpdateFieldImage("name-of-component", URL)

Update Badge Icon Color

B4X:
Vuetify.UpdateFieldBadgeIconColor("name-of-component", color)

Update Percentage

B4X:
Vuetify.UpdateFieldPercentage("name-of-component", 50, 200)

This computes 50/200 * 100

Add Items to Combo

B4X:
Vuetify.UpdateFieldAddItems("name-of-component", kv)
 
Last edited:
Top