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


Feb 2024: BVAD3 RoadMap


Download Additional Libraries
Download BANanoVuetifyAD3Core Library OR Download BANanoVuetifyAD3 Library
Download Kitchen Sink WebApp (Optional - useful for Learning how this works)
Download BVAD3Builder (Optional - useful to trim your final package)

Full Install Instructions on Github

What's New

To use this free and open source B4J library, you need BANano.


Join Us

Telegram: https://t.me/bananovuematerial
Twitter: https://twitter.com/mashymbanga
Discord: https://discord.gg/ys8stGgWCU
YouTube: Mashy Teaches Video Series
B4x Blog: Mashy Teaches BVAD3 - New Series
Full Demo: New Awesome Kitchen Sink

Notable Forum Members Contributions

@Erel : Obviously
@alwaysbusy : valuable advice etc, BANano (incl. adjustments that support BVAD3)
@LJG : BANanoServer jRDC2, best overall bug finder
@aeric: Recommendations & Enhancements etc
@Star-Dust : Small solutions to development hitches etc

What's Next?

You will find the most up to date content from this post onwards

Testing DataBase Connectivity (PHP)

The kitchen sink now has connectity testing for the various backends. To ensure that your app will work, you can check if your back-end is accessible.


WebServers You Can Use

Laragon - publish to c:\laragon\www

IIS - Publish to C:\inetpub\wwwroot
XAMPP - change your publish folder to use // instead of \

You can find more information here related to IDE Setup


PS: Log Warnings & Compilation Errors

1. Please check the pre-run logs. In most cases modules with warnings will have an underline. Warning, 9, 10, 11, 12 are normal, don't be scared.


2. manifext.txt file not found - Download the library source code and RUN to recompile on your PC. "Do not Compile to Library"
3. Do a HARD REFRESH of your browser.[/B]
Last edited:


Licensed User
Longtime User


Licensed User
Longtime User


Licensed User
Longtime User


Licensed User
Longtime User
Version 7.33 is live and kicking...

Incwadi yamaBali has also been updated.



Licensed User
Longtime User
The Relationship between BVAD3 Custom Views, the API and the Low Code generated by Incwadi yamabali (Story Book)

The current up to date, single source of truth for everything BVAD3 is currently running in Netlify on this link, https://magenta-vacherin-2f7e6b.netlify.app/#/

and also GitHub via this link, https://mashiane.github.io/BVAD3-Kitchen-Sink---A-Vuetify-Project/#/

If you access this, you have the BVAD3 API, which details all the components, their events and methods. This can help you understand how everything works for each component.


Below is an example of the VTextField component...


In the abstract designer, the custom views uses "Display Name" for description, the low code produced by the Story Book is based on the custom view or / property bag.
Besides, custom views are just classes that one can initialize and set properties to. For the low code we use the "key" of each property in the Map to feed to the designer script.

Happy BVAD3 Coding!

The attached document can shed some more light.


  • BVAD3 Relationship between Custom Views, API and Low Code.zip
    176.8 KB · Views: 269


Licensed User
Longtime User
BANanoVuetifyAD3 7.34 Maintenance Update

Below are some of the stuff in the What's New Section

Using CDN
  • You can use CDN resources. In the library on Main > Process Globals > Online = True. This ensures jsDelivr is used for all the CSS & JS Files in the library. To use locally hosted resources in your final App, you can set this to False.
Using / Not Using PlugIns
  • You can turn off libraries that you wont use and can just get the Core CSS / JS Files you need.
Library Options:
Sub Process_Globals
    Private BANano As BANano 'ignore
    Public Version As String = "7.34"
    Public AppName As String = "BANAnoVuetifyAD3"
    'use debug vue.js
    Public CoreFunctionality As Boolean = False
    Public UseDebug As Boolean = False
    'Use online version of vue/vuetify & others
    Public Online As Boolean = True
    Public UsePrismCodeDisplay As Boolean = True
    Public UseGoogleMaps As Boolean = True
    'ajax calls usix axios
    Public UseAxios As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/qrcode (an option to fetch)
    Public UseQRCode As Boolean = True
    Public UseQRCodeReader As Boolean = True
    Public UseBarcodeReader As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/adjspdf (export vuetable to pdf)
    Public UsePDF As Boolean = True
    '(export vuetable to excel)
    Public UseExcel As Boolean = True
    Public UseChartKick As Boolean = True
    Public UseFireBase As Boolean = True
    Public UseLeafLetMaps As Boolean = True
    Public UseBlurring As Boolean = True
    Public UseHTMLEditor As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/ (chat box)
    Public UseBeautifulChat As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/counchcrud (install offline first db)
    Public UsePouchDB As Boolean = True
    Public UseEncryption As Boolean = True
    Public UseKanBan As Boolean = True
    Public UseAnimeCSS As Boolean = True
    Public UseLottie As Boolean = True
    Public UseAnimeJS As Boolean = True
    Public UseWebCam As Boolean = True
    Public UseFlowy As Boolean = True
    Public UseDynamicForms As Boolean = True
    Public UseTranslate As Boolean = True
    'export & import csv
    Public UseImportCSV As Boolean = True
    Public UseFluidMeter As Boolean = True
    Public UseGauge As Boolean = True
    Public UseKMLToGeoJSON As Boolean = True
    'Public UseApexCharts As Boolean = False
    'Public UseCircularFluidMeter As Boolean = False
    'Public UseShowDown As Boolean = True
    'sanitize data from HTML editor
    'Public UseDOMPurify As Boolean = True
    'show markdown/html from markdown
    'Public UseMarkDown As Boolean = True
    Public UseCompositionAPI As Boolean = False
    Public UseBarCode As Boolean = True
    Public UseSignaturePad As Boolean = True
    'Public UsePageFlip As Boolean = True
    Public UseBottomNavigation As Boolean = True
    Public UseBrowserPrint As Boolean = True
End Sub

If an option is set to false, the CSS & JS files applicable to that component will not be part of your App. These settings are all turned to True as they are showcased in the Kitchen Sink. For example, if your app will not use the UseQRCodeReader , you can just set it to False.

Using Core Functionality (without PlugIns)

You can just use the Core Vuetify functionality without PlugIns. You do this by setting CoreFunctionality = True. This is what it does

If CoreFunctionality Then
         UsePrismCodeDisplay = False
         UseGoogleMaps = False
         UseAxios = False
         UseQRCode = False
         UseQRCodeReader = False
         UseBarcodeReader = False
         UsePDF = False
         UseExcel = False
         UseChartKick = False
         UseFireBase = False
         UseLeafLetMaps = False
         UseBlurring = False
         UseHTMLEditor = False
         UseBeautifulChat = False
         UsePouchDB = False
         UseEncryption = False
         UseKanBan = False
         UseAnimeCSS = False
         UseLottie = False
         UseAnimeJS = False
         UseWebCam = False
         UseFlowy = False
         UseDynamicForms = False
         UseTranslate = False
         UseImportCSV = False
         UseFluidMeter = False
         UseGauge = False
         UseKMLToGeoJSON = False
         UseCompositionAPI = False
         UseBarCode = False
         UseSignaturePad = False
         UseBottomNavigation = False
         UseBrowserPrint = False
    End If
    'UseImportCSV = True
    'UseEncryption = True
    'UsePDF = True
    'UseExcel = True
    'UseAxios = True
    'UseBrowserPrint = True
    'UseLottie = True

If however you want to use the core-functionality but with some of the plugins, you can then set those to True after CoreFunctionality.

Happy BANanoVuetifyAD3 coding.


  1. Setting the plugins = False, does not remove the related component code from the library & thus the compiled BANanoVuetifyAD3.b4xlib.
  2. Also, this does not remove the JS / CSS from the b4xlib, but will surely remove the unused CSS/JS content from your final app.
  3. Also use the package manager as it removes unused component code as an added functionality.
  4. Comment your code with 'IgnoreDeadCode and run the RemoveDeadCode functionality with the transpiler.
  5. Set Online = True for your final app to use jsDelivr CDN, this decreases the size of your app and ensures the needed cached resources are used. If however you expect erratic internet connection, consider making your app a PWA.


Active Member
Licensed User
Longtime User
thanks for great lib, but i got problem with datatable using datetime, where is set automatic from database, it not shown if i set VField into CRUD mode and can not save data, and if i uncheck the CRUD it will not show data to table..

any suggestion please?


Licensed User
Longtime User
BANanoVuetifyAD3 Kitchen Sink - Topic Search

Find code pages related to your topic of interest easily and faster:



Licensed User
Longtime User
Upcoming: Introducing the VFlexDialog

The VFlexDialog is a combination of VDialog+VForm+VFields to help you create your input dialogs. You drop a VFlexDialog inside a container inside of your page,then add input elements, rules and events to it. You do this via code. It has 3 buttons, Yes, No & Cancel and these have events linked to them. The color of each button can be customized and any button can be set visible, loading at runtime. For example:


Below are some variations of the output of this VFlexDialog based on the code below. Please note that due to it having to call .BindState internally, the VFields NEED to be defined on Class / Process Globals.

With Elements Filled, Outlined & Shaped


With Elements Outlined & Shaped


With Elements Outlined


Normal Elements


With Elements Outlined & Rounded



1. Create a new page. Project > Add New Module > Class Modules > BVAD3 Page
2. Drop a VContainer on the page and resize it to fill the page
3. Drop a VFlexDialog inside the VContainer and set up some properties.
4. Generate members and update your source to LoadLayout to your layout name.
5. Create a sub that you will call after LoadLayout that will create your Form. VFlexDialog ONLY WORKS in design mode, thus the code needs to be in Initialize.

For example..

Sub BuildPreferences
    'create options
    Dim options As Map = CreateMap()
    options.Put("eng", "English")
    options.Put("afr", "Afrikaans")
    options.Put("xho", "Xhosa")
    options.Put("nde", "isiNdebele")
    options.Put("zul", "isiZulu")
    options.Put("sep", "Sepedi")
    options.Put("ses", "Sesotho")
    options.Put("tsw", "Setswana")
    options.Put("swa", "seSwati")
    options.Put("tsh", "Tshivenda")
    options.Put("xit", "Xitsonga")
    'ROW 1
    VFlexDialog1.AddTextField(1, 1, "firstname", "First Name","Anele")
    VFlexDialog1.AddTextField(1, 2, "lastname", "First Name","Mbanga")
    'ROW 2
    VFlexDialog1.AddTextArea(2, 1, "bio", "Biography","")
    'ROW 3
    VFlexDialog1.AddAutoComplete(3, 1, "lang", "Language", options, "eng", True)
    VFlexDialog1.AddColor(3, 2, "hair", "Enter hair color","black")
    'ROW 4
    VFlexDialog1.AddDate(4, 1, "dob", "Enter Date of Birth","1973-04-15")
    VFlexDialog1.AddDouble(4, 2, "height", "Enter your height","1.85")
    'ROW 5
    VFlexDialog1.AddFileInput(5, 1,"image", "Please upload your image")
    VFlexDialog1.AddImage(5, 2, "profile", "./assets/myself.jpg", "100", "100")
    Dim gender As Map = CreateMap()
    gender.Put("male", "Male")
    gender.Put("female", "Female")
    gender.Put("other", "Other")
    'ROW 6
    VFlexDialog1.AddRadioGroup(6, 1, "gender", "Gender", gender,"male", True)
    VFlexDialog1.AddRange(6, 2, "salary", "Salary Range", 5000, 10000, 100, 6000)
    'ROW 7
    VFlexDialog1.AddRating(7, 1, "service", 5, "How can you rate our service?", 2)
    VFlexDialog1.AddSlider(7, 2, "loan", "Loan amount", 1000, 5000, 50, 1500)
    'ROW 8
    VFlexDialog1.AddTelephone(8, 1, "tel", "Telephone", "")
    VFlexDialog1.AddTime(8, 2, "meet", "Time of Meeting","09:00")
    'ROW 9
    VFlexDialog1.AddPassword(9, 1, "pass", "Enter your password","")
    'ROW 10
    VFlexDialog1.AddSwitch(10, 1, "active","Active", True, True)
    VFlexDialog1.AddCheckBox(10, 2, "agree", "I agree with Terms & Conditions",True)

From the above code, each VField is placed inside a RC (that is Row+Column) coordinate system. You can also set the default values for each element.

6. To get the VField definitions that you will copy in Class_Globals, after VFlexDialog1.Refresh, log..


The Declarations will produce code that you will have to copy to class_globals. This code will be saved in the web console, after running the app, copy it. This will be like this..

Private txtfirstname As VField     'ignore
    Private txtlastname As VField     'ignore
    Private txtbio As VField     'ignore
    Private cbolang As VField     'ignore
    Private colhair As VField     'ignore
    Private dpdob As VField     'ignore
    Private txtheight As VField     'ignore
    Private filimage As VField     'ignore
    Private imgprofile As VField     'ignore
    Private radgender As VField     'ignore
    Private rngsalary As VField     'ignore
    Private ratservice As VField     'ignore
    Private sldloan As VField     'ignore
    Private teltel As VField     'ignore
    Private timmeet As VField     'ignore
    Private pwdpass As VField     'ignore
    Private swtactive As VField     'ignore
    Private chkagree As VField     'ignore

The .Gets produces code that you need to copy to your Sub after the .Refresh call. This produces this code..

txtfirstname = VFlexDialog1.Get("firstname")
    txtlastname = VFlexDialog1.Get("lastname")
    txtbio = VFlexDialog1.Get("bio")
    cbolang = VFlexDialog1.Get("lang")
    colhair = VFlexDialog1.Get("hair")
    dpdob = VFlexDialog1.Get("dob")
    txtheight = VFlexDialog1.Get("height")
    filimage = VFlexDialog1.Get("image")
    imgprofile = VFlexDialog1.Get("profile")
    radgender = VFlexDialog1.Get("gender")
    rngsalary = VFlexDialog1.Get("salary")
    ratservice = VFlexDialog1.Get("service")
    sldloan = VFlexDialog1.Get("loan")
    teltel = VFlexDialog1.Get("tel")
    timmeet = VFlexDialog1.Get("meet")
    pwdpass = VFlexDialog1.Get("pass")
    swtactive = VFlexDialog1.Get("active")
    chkagree = VFlexDialog1.Get("agree")

7. To show your dialog, which will be activated with the default specified values, you can call the .Show method.

Private Sub btnShowDialog_Click (e As BANanoEvent)
End Sub

8. To get any entered form content, you can use..

Private Sub VFlexDialog1_Yes_Click (e As BANanoEvent)
    Dim data As Map = VFlexDialog1.GetData
End Sub

And then process it.

9. Getting & Setting Data to the VFlexDialog.

The information is stored in a map. You can get / set it using .GetData & .SetData. The map keys are case SensiTive and should be smallercase.

For example, this is the result of the GetData call..


Source code coming soon:
Last edited:


Licensed User
Longtime User


Licensed User
Longtime User