B4J Tutorial [BANanoVuetifyAD] Vuetify WebSites & WebApps with BANano for Dummies

Mashiane

Expert
Licensed User
Tip: Adding Dynamic BreadCrumbs

Whilst you are able to add breadcrumbs that can remain static, you can also add breadcrumbs that are dependent on content that changes at runtime.


On Initialize of the component, we create a empty breadcrumb item. The variable has been defined as a global variable

B4X:
'we add a container
Dim contApps As VueElement = vuetify.AddContainer(Me, appusers.Here, "contappusers", True)
    appusers.BindVueElement(contApps)
    contApps.AddRows1.AddColumns12
    contApps.AddRows1.AddColumns5.AddColumns2.AddColumns5
    contApps.BuildGrid
    
'get the r1c1 element and add a toolbar
    Dim r1c1 As VueElement = contApps.Cell(1, 1)
    'add a toolbar
    Dim tbl1 As VueElement = r1c1.AddToolbar("tblappusers", "", Null)
    tbl1.Flat = True
    'add breadcrumbs
    appuserbc = tbl1.AddBreadCrumbs("appusersbc")
    appuserbc.Large = True
    appusers.BindVueElement(appuserbc)
    '
    tbl1.AddSpacer
    'when the page shows, executes the onshow subroutine
    appusers.SetMounted(Me, "onshow", Null)
    'add the component as a router
    vuetify.AddRoute(appusers)
The onshow subroutine, we define a few items we need to build our breadcrumbs

B4X:
Sub onshow            'ignoreDeadCode
    'get the active app
    Dim activeapp As Map = vuetify.GetData("activeapp")
    Dim sapkname As String = activeapp.GetDefault("apkname", "")
    Dim sapkversion As String = activeapp.GetDefault("apkversion", "")
    Log(activeapp)
    'update the breadcrumbs
    appuserbc.ClearItems
    'add all breadcrumbs
    appuserbc.AddBreadCrumbItem("Home", "/", True, "", True, False)
    appuserbc.AddBreadCrumbItem("Apps", "/apps", True, "", True, False)
    appuserbc.AddBreadCrumbItem($"${sapkname} Version: ${sapkversion}"$, "", True, "", True, False)
    appuserbc.AddBreadCrumbItem("Users", "", True, "", True, False)
    appuserbc.RefreshItems(appusers)
End Sub
Output. As an example in this page we want to show all users for the Preventa... app

1614072038890.png
 

Mashiane

Expert
Licensed User
To add static breadcrumbs, you do them on the initialize call of the component route.

For example, ouput,

1614072285277.png


B4X:
'add a container to hold the user groups
    Dim contUserGroup As VueElement = vuetify.AddContainer(Me, usergroups.Here, "contUserGroup", True)
    contUserGroup.AddRows2.AddColumns12
    contUserGroup.BuildGrid
    '
    'add breadcrumbs
    Dim appsbc As VueElement = contUserGroup.MatrixElement(1, 1).AddBreadCrumbs("ugbc")
    appsbc.Large = True
    appsbc.AddBreadCrumbItem("Home", "/", True, "", True, False)
    appsbc.AddBreadCrumbItem("User Groups", usergroups.Path, True, "", True, False)
    usergroups.BindVueElement(appsbc)
Now when you click Home, the home page will be opened. Clicking user groups will not have an effect here as you are on the same page.
 

Mashiane

Expert
Licensed User
Tip: Blurring Elements

If you don't want an element to be clear you can blur it.

1614114778174.png


1. We have created a container component, we set the blurring state variable. By fault, its false after you bind the vue element

B4X:
Dim contUsers As VueElement = vuetify.AddContainer(Me, users.Here, "contusers", True)
    contUsers.Blurred = "contusersblurred"
    users.BindVueElement(contUsers)
    contUsers.AddRows2.AddColumns12
    contUsers.BuildGrid
To change the blurring state at runtime, turning it on / off.

B4X:
users.SetData("contusersblurred", True)
 
Last edited:

Mashiane

Expert
Licensed User
Tip: Implementing SSL for laragon

Using laragon with SSL for your development.


1614275766278.png
 
Top