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


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
Hi. This callbacks are not triggered when the DataTable get datasource from one Form Component .

Possibly you have not generated the events, I kindly request that next time you have an issue, please start a new thread as this thread is for posting content about the library and its use. I thank you.


Licensed User
Longtime User
VTreeView Append Slot

Each item in the treeview can now receive buttons. This is possible due to the "append slot" - which helps append content after each item.


For example here, we have added 4 buttons, these being, add, edit, delete and refresh.

This is possible from the vtreeview abstract designer..


The Generate Members functionality only has 3 events that you can generate for the VTreeView.


Each receiving the item being processed.

As refresh is our own defined menu key, to provide it an event, we just add this code

Private Sub treeName_Refresh (item As Map)
End Sub
  • Like
Reactions: LJG


Licensed User
Longtime User
VTreeView Append Slot: Hiding Node Buttons.

By default, all the items specified on the Menu Keys will be available for all the items added to the tree. However, one is able to hide/show the buttons per item as per need, as depicted below in the Apps node.


As an example, our menu items are: add; edit; delete; refresh

However we want to hide the edit and delete buttons for the Apps node. We would...

'clear the tree
    'add a parent node to tree
    trProjects.AddItem("", "apps", "Apps", "", "mdi-semantic-web", False)
    'hide edit/delete for node
    trProjects.SetItemMenuVisible("apps", False, Array("edit", "delete"))


Licensed User
Longtime User


Licensed User
Longtime User
VueTable Enhancements

1. Totals Row has a larger font...


2. Compute Totals Can Now also receive field names you want to total without the callback specified. Both methods still work, one with a callback and one without. This is useful when you want to sum a lot of columns.


If a callback is not specified, there is no need for it to be added via code. The formatting applied to this option will be what you specify in "Money" / "Thousands" / "File Size" properties for those fields.

3. To HideColumns at run-time, call

dtQA.HideColumns(Array("col1", "col2", "col3"))

This should also apply to the columns set to be visible in your filter chips

4. To ShowColumns at run-time, call

dtQA.ShowColumns(Array("col1", "col2", "col3"))

This should also apply to the columns set to be visible in your filter chips

5. To change which chips should be "groupable" at runtime, you can call

dtQA.SetGroupAble(Array("col1", "col2", "col3"))

6. To clear the column grouping, call


7. To group by a particular column, call. NB. Only 1 column can be grouped at a time


Happy BVAD3 Coding.
Last edited:


Licensed User
Longtime User
Manipulate any item in pgIndex from any other page in your app at runtime!



Licensed User
Longtime User
BANanoVuetifyAD3 Uses Directives

The BVAD3 library has been updated to include "Uses" directives. These directives tell the library which js and css resources to use.

For example, if you want to use CDN version of vuetify & vue, online fonts etc, you would turn the "Online" directive. When BANano is compiling the library, it will use these directives in AppStart to determine what to add locally or not and BANano.Header.AddJavaScriptFile/BANano.Header.AddCssFile will act accordingly.

Turning Online = True has an effect of you using the online CDN versions of the major css and js files. This is greatly recommended as it affects the speed of your app and the use of caches available on CDN. If however you suspects that your app may be used in areas where internet connectivity is a challenge, make your app a PWA to cache all resources on first run (in an internet available area) or set Online = False.

I have included URLs here as a guide as to what each setting does. Please note that whilst the resources will be included even if set Online is used, they will not be loaded. To avoid this, use the package manager to both "remove" unused js and css file and even source code from the lib.

You can click the links to take you to what that uses directive is about. If you are not using that component, set the directive to False, compile the library and then reference it in your project, rerun it to check if all goes well.

Sub Process_Globals
    Private BANano As BANano 'ignore
    Public Version As String = "7.32"
    Public AppName As String = "BANAnoVuetifyAD3"
    'Use online version of vue/vuetify & others
    Public Online As Boolean = True
    'Use FontAwesome Fonts
    Public UseFontAwesome As Boolean = False
    'Use MaterialDesignFonts - default
    Public UseMaterialDesignIcons As Boolean = True
    Public UsePrism As Boolean = True
    Public UseGMap 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
    '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 UseLeafLet As Boolean = True
    Public UseBlur As Boolean = True
    Public UseEditor 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 UsePropertyBag As Boolean = True
    Public UseTranslate As Boolean = True
    '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
End Sub

Why you need RemoveDeadCode?

To thin & tree-shake your app, its important that all dead code is removed. Dead code is code that is not used in your app.

Step 1

Comment all subroutine signatures with 'ignoreDeadCode. This is important so that the BANano.Transpiler does not remove used subs. Here is an example

Sub beforeEnter(boTo As Map, boFrom As Map, boNext As BANanoObject)   'ignoreDeadCode

Step 2

in Main > AppStart of your App, this line should exists & uncommented

BANano.TranspilerOptions.RemoveDeadCode = True

Run your app and test of everything is working as expected and if not check the web console log for errors and fix those.

You can also redirect all the B4J logs to an external file and if you want to see which code is marked / will be marked as dead by the BANano Transpiler, also add this line.

BANano.TranspilerOptions.ShowWarningDeadCode =True

To direct the b4j log to an external file, you can use

BANano.TranspilerOptions.RedirectOutput(File.DirApp, "bvadks.log")

Happy BVAD3 coding!


Licensed User
Longtime User
The Date by default is English. One can add date transactions in pgIndex.Init before the AddPages call. This will apply formatting to all pages added to the app


You need to change the Date and Month to have the date-picker show a date specific to your language. Please note this is case SensiTive.


Last edited:


Licensed User
Longtime User
Adding a tour guide to your app using Enjoy Hint

Example Source

    hints.AddStep("trProjects", "The treeview will have your models, views and components you have defined. You are able to add, update and delete anything you create by clicking the corresponding buttons.")
    hints.AddStep("tabPreview", "Here you can get a preview of your elements, HTML and B4X generated code.")
    hints.AddStep("propdrawer", "This will hosts the property bag to change any element in your project. Enter the details necessary.")
    hints.AddClick("trprojectsadd", "Click here to add a new project.")  
    hints.AddStep("propCol", "Then update the details of the property bag according to your needs.")
    hints.AddStep("propBar", "This toolbar has buttons, each with a tooltip to guide you of their functionality. You can click Save.")
    hints.AddStep("tabpreviewtab1", "Here you are able to get a sneek preview of how your form / element will look like.")
    hints.AddStep("tabpreviewtab2", "Here you get the HTML code of the elements showing in your preview or being edited.")
    hints.AddStep("tabpreviewtab3", "Here you get generated B4x code for the element you are working on.")
    hints.AddStep("tabpreviewtab4", "Here you get PHP REST API source code generated from your data models.")
    hints.EndsOn("tabpreviewtab4", "Got It!")


Licensed User
Longtime User
BVAD3 has been updated to fix a few bugs and use the latest version of Vuetify, i.e. 2.6.6. Get your free copy from Github. You will find how to use the FluidMeters as requested by SD from the updated New Awesome Kitchen Sink. Happy BVAD3 coding. PS: There is also one other user request on LeafLet that I hope to sort out soon.

These are featured here:



Licensed User
Longtime User
Hi there gang, it is with pleasure to release the first version of the BVAD3 API Documentation. Please check it out, send us your thoughts and feelings. Have fun,

NB: The API depends on a PHP Web Server running, you can get the latest BVAD3 version + Kitchen sink and run a local copy. GitHub + Netlify are for "static" websites, so you might not see the documentation there.

Access it here: https://magenta-vacherin-2f7e6b.netlify.app/#/
Last edited: