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

Mashiane · Jul 7, 2022

Creating a ListView - Other Item Variants

In this lesson we look at how to create other item variants in the listview. It is recommended one uses one variant template at a time and hide other item using the Use directive in the ListViewOptions component to be linked with the VList.

B4X:

Sub mounted        'ignoreDeadCode
    'clear the listview
    VList1.Clear(page)
    VList1.AddItem("", "home", "mdi-home","orange", "AddItem", "/")
    VList1.AddItemSubTitle("", "home1", "mdi-home","yellow", "AddItemSubTitle", "xxx", "/").SetItemRightChip("home", "10").SetItemRightChipColor("home", "green")
    VList1.AddItemSubTitleChip("", "home12", "mdi-home","yellow", "AddItemSubTitleChip", "xxx", "20", "magenta", "/")
    VList1.AddRightItem("", "homeright", "mdi-vuetify","pink", "AddRightItem", "")
    VList1.AddRightItemSubTitle("", "homeright1", "mdi-vuetify","pink", "AddRightItemSubTitle", "xxx", "")
    '
    VList1.AddAvatarTitleSubTitle("", "user1", "https://randomuser.me/api/portraits/med/men/10.jpg", "AddAvatarTitleSubTitle", "xxx",  "")
    VList1.AddAvatarTitleSubTitleText("", "user2", "https://randomuser.me/api/portraits/med/men/11.jpg", "AddAvatarTitleSubTitleText", "Yeah, see you tomorrow.",  "30 minutes ago", "")
    VList1.AddAvatarTitleSubTitleChip("", "user10", "https://randomuser.me/api/portraits/med/men/70.jpg", "AddAvatarTitleSubTitleChip", "Yeah, see you tomorrow.",  "2", "orange", "")
    VList1.AddAvatarText("", "atext", "AM", "blue","AddAvatarText", "081...", "")
    VList1.AddImage("", "img1", "https://randomuser.me/api/portraits/med/men/18.jpg", "AddImage", "")
    VList1.AddImageTitleSubTitle("", "a1", "https://randomuser.me/api/portraits/med/men/12.jpg", "AddImageTitleSubTitle", "xxx", "")
    VList1.AddImageTitleSubTitleText("", "a2", "https://randomuser.me/api/portraits/med/men/13.jpg", "AddImageTitleSubTitleText", "xxx", "16:09", "")
    VList1.AddImageTitleSubTitleChip("", "a15", "https://randomuser.me/api/portraits/med/men/66.jpg", "AddImageTitleSubTitleChip", "xxx", "33", "purple", "")
    VList1.AddRightAvatar("", "a8", "https://randomuser.me/api/portraits/med/men/14.jpg", "AddRightAvatar", "")
    VList1.AddRightAvatarText("", "a9", "AM", "green", "AddRightAvatarText", "xxx", "")
    VList1.AddRightAvatarTitleSubTitle("", "a10", "https://randomuser.me/api/portraits/med/men/15.jpg", "AddRightAvatarTitleSubTitle", "xxx", "")
    VList1.AddRightImage("", "a11", "https://randomuser.me/api/portraits/med/men/16.jpg", "AddRightImage", "")
    VList1.AddRightImageTitleSubTitle("", "a12", "https://randomuser.me/api/portraits/med/men/17.jpg", "AddRightImageTitleSubTitle", "xxx", "")
    'refresh the drawer
    VList1.Refresh(page)
    vuetify.Loading(False)
End Sub

Mashiane · Jul 7, 2022

Creating a ListView - Preferences using left check boxes

For this to work, in the VListOptions to be linked to your VList, these options should be set

To add items

B4X:

Sub mounted 'ignoreDeadCode 'clear the listview VList1.Clear(page) VList1.AddHeader("Lights (On/Off)") VList1.AddItemLeftCheckBox("a1", False, "Kitchen", "", "") VList1.AddItemLeftCheckBox("a2", False, "Lounge", "", "") VList1.AddItemLeftCheckBox("a3", False, "Dining Room", "", "") VList1.AddItemLeftCheckBox("a4", False, "Bedroom 1", "Light needs attention", "Urgent") VList1.AddHeader("Blinds (On/Off)") VList1.AddItemLeftCheckBox("a5", False, "Kitchen", "", "") VList1.AddItemLeftCheckBox("a6", False, "Lounge", "", "") VList1.AddItemLeftCheckBox("a7", False, "Dining Room", "", "") VList1.AddItemLeftCheckBox("a8", False, "Bedroom 1", "Dog tore blinds, attend.", "Urgent") 'VList1.AddItemLeftSwitch("a4", True, "AddItemLeftSwitch", "xxx", "xxx1") 'VList1.AddItemRightRating("a6", 0.5, "AddItemRightRating", "xxx", "xxx1") 'VList1.AddItemRightSwitch("a7", False, "AddItemRightSwitch", "xxx", "xxx1") 'refresh the drawer VList1.Refresh(page) vuetify.Loading(False) End Sub

To trap the checked item, we use the LeftClick event

B4X:

Private Sub VList1_LeftClick (item As Map) Dim sid As String = item.Get("id") vuetify.ShowSwalNotification(sid) End Sub

To get checked items as a list,,,

B4X:

Private Sub btnGet_Click (e As BANanoEvent) Log(VList1.GetPreferencesChecked(page, True)) End Sub

Mashiane · Jul 7, 2022

Creating a ListView - Preferences using the Right Check Boxes

The previous post bears reference:

To use the Right Check Boxes in the VList, these options in the VListOptions to be linked to your VList should be activated.

The code to add items is like this:

B4X:

VList2.Clear(page)
    VList2.AddHeader("Lights (On/Off)")
    VList2.AddItemRightCheckBox("a1", False, "Kitchen", "", "")
    VList2.AddItemRightCheckBox("a2", False, "Lounge", "", "")
    VList2.AddItemRightCheckBox("a3", False, "Dining Room", "", "")
    VList2.AddItemRightCheckBox("a4", False, "Bedroom 1", "Light needs attention", "Urgent")
    
    VList2.AddHeader("Blinds (On/Off)")
    VList2.AddItemRightCheckBox("a5", False, "Kitchen", "", "")
    VList2.AddItemRightCheckBox("a6", False, "Lounge", "", "")
    VList2.AddItemRightCheckBox("a7", False, "Dining Room", "", "")
    VList2.AddItemRightCheckBox("a8", False, "Bedroom 1", "Dog tore blinds, attend.", "Urgent")
    'refresh the drawer
    VList2.Refresh(page)

To trap the check/click event, you use the RightClick event.

B4X:

Private Sub VList2_RightClick (item As Map)
    Dim sid As String = item.Get("id")
    vuetify.ShowSwalNotification(sid)
End Sub

Mashiane · Jul 7, 2022

Creating a ListView - Using Left Switches

The previous posts bears reference. One can also use switches for listview preferences.

To use the switches, the VListOptions to be linked to the VList should have these options set

To add items..

B4X:

VList1.Clear(page)
    VList1.AddHeader("Lights (On/Off)")
    VList1.AddItemLeftSwitch("a1", False, "Kitchen", "", "")
    VList1.AddItemLeftSwitch("a2", False, "Lounge", "", "")
    VList1.AddItemLeftSwitch("a3", False, "Dining Room", "", "")
    VList1.AddItemLeftSwitch("a4", False, "Bedroom 1", "Light needs attention", "Urgent")
    
    VList1.AddHeader("Blinds (On/Off)")
    VList1.AddItemLeftSwitch("a5", False, "Kitchen", "", "")
    VList1.AddItemLeftSwitch("a6", False, "Lounge", "", "")
    VList1.AddItemLeftSwitch("a7", False, "Dining Room", "", "")
    VList1.AddItemLeftSwitch("a8", False, "Bedroom 1", "Dog tore blinds, attend.", "Urgent")
    'refresh the drawer
    VList1.Refresh(page)

To trap the check/click events, use the LeftClick events

B4X:

Private Sub VList1_LeftClick (item As Map)
    Dim sid As String = item.Get("id")
    vuetify.ShowSwalNotification(sid)
End Sub

Mashiane · Jul 7, 2022

Creating a ListView - using Right Switches

Adding Items

B4X:

VList2.Clear(page)
    VList2.AddHeader("Lights (On/Off)")
    VList2.AddItemRightSwitch("a1", False, "Kitchen", "", "")
    VList2.AddItemRightSwitch("a2", False, "Lounge", "", "")
    VList2.AddItemRightSwitch("a3", False, "Dining Room", "", "")
    VList2.AddItemRightSwitch("a4", False, "Bedroom 1", "Light needs attention", "Urgent")
   
    VList2.AddHeader("Blinds (On/Off)")
    VList2.AddItemRightSwitch("a5", False, "Kitchen", "", "")
    VList2.AddItemRightSwitch("a6", False, "Lounge", "", "")
    VList2.AddItemRightSwitch("a7", False, "Dining Room", "", "")
    VList2.AddItemRightSwitch("a8", False, "Bedroom 1", "Dog tore blinds, attend.", "Urgent")
    'refresh the drawer
    VList2.Refresh(page)

Trapping Click Event

B4X:

Private Sub VList2_RightClick (item As Map)
    Dim sid As String = item.Get("id")
    vuetify.ShowSwalNotification(sid)
End Sub

Mashiane · Jul 7, 2022

BVAD3 Kitchen Sink Topic Search

The upcoming BVAD3 Kitchen Sink will have a Topic Search. This helps one search for any topic of interest they need.

For example, you want to search for anything in relation to the MongoDB, in the search box you will type mongo. A list of pages in the kitchen sink that relate to that will be shown. The last part of the URL refers to the Kitchen Sink Source code "page" name.

For example, mongodb.

The next thing you will have to do is to locate the page in the kitchen sink, for example:

You can then explore the layouts, the code to learn how everything works for CRUD for that page.

PS: If there is anything you cant find, please indicate for us to add it or enhance the search.

Happy Coding..

Mashiane · Jul 9, 2022

Creating Forms with VFlexDialog (VDialog+VForm+VFields)

With this you don't have to drop any VFields inside a VForm as you can just define your components via code in the Initialize sub.
As this is based on VForm + VFields, it only works in Design Time.

This is just a better alternative to this example: https://mashiane.github.io/BANanoVuetifyAD3/#/formbuilder, just without using the abstract designer.

If you need functionality to create forms at runtime, see the Dynamic Forms Example.

Its simple as...

B4X:

Sub BuildPreferences
    VFlexDialog1.Clear
    '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)
    '
    VFlexDialog1.Refresh 
    'get the vFields for bindings
    'COMPULSORY
    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")
    'Log(VFlexDialog1.Declarations)
    'Log(VFlexDialog1.Gets)
End Sub

As we have defined a VField, that uses a VFileInput, when its changed event is fired, we get the file, upload it to the assets folder, then get its URL link and use that to update the profile picture displayed. This same principle applies to a normal direct VFileInput component.

B4X:

Private Sub image_Change(fileObj As Map)
    page.refs = vuetify.GetRefs
    'has the file been specified
    If banano.IsNull(fileObj) Or banano.IsUndefined(fileObj) Then Return
    'show the loading indicator
    filimage.UpdateLoading(page, True)
    'get file details
    Dim fileDet As FileObject
    fileDet = BANanoShared.GetFileDetails(fileObj)
    'get the file name
    Dim fn As String = fileDet.FileName
    'you can check the size here
    Dim fs As Long = fileDet.FileSize
    If fs >= 5000 Then
    End If
    'start uploading the file to assets folder
    fileDet = BANanoShared.UploadFileWait(fileObj)
    'get the status of the upload
    Dim sstatus As String = fileDet.Status
    Select Case sstatus
        Case "error"
            'hide the uploader
            filimage.UpdateLoading(page, False)
            vuetify.ShowSnackBarError($"The file '${fn}' was not uploaded successfully!"$)
        Case "success"
            vuetify.ShowSnackBarSuccess($"The file '${fn}' was uploaded successfully!"$)
    End Select
    'get the upload full path
    Dim fp As String = fileDet.FullPath
    'update state of some element like an image
    imgprofile.SetValue(page, fp)
    'hide the uploading status
    filimage.UpdateLoading(page, False)
End Sub

For more details: please see this post:

Happy BVAD3 Coding

PS: Coming to the next maintenance release.

Mashiane · Jul 12, 2022

[BANanoVuetifyAD3] DevRel - Developer Relations

Hi there One of the things we need to ensure about BANanoVuetifyAD3 is the enhancement of the currently existing DevRel aka Developer Relations with others Developing with BVAD3. What has been done so far? 1. We have a Telegram Channel 2. We have a Youtube Channel (Please subscribe) 3. We...

www.b4x.com

Mashiane · Jul 12, 2022

[BANanoVuetifyAD3] DevRel - Developer Relations

Hi there One of the things we need to ensure about BANanoVuetifyAD3 is the enhancement of the currently existing DevRel aka Developer Relations with others Developing with BVAD3. What has been done so far? 1. We have a Telegram Channel 2. We have a Youtube Channel (Please subscribe) 3. We...

www.b4x.com

Mashiane · Jul 14, 2022

[BANanoVuetifyAD3] : VFlexDialog inspired by the PreferenceDialog

Hi there The VFlexDialog is inspired by the ease of use in the PreferenceDialog. It exists to enable the ease of creating forms by developers. Its baseline are the VDialog, VForms and VFields. If you have used any of these including the VMsgBox, then you are right at home. The screen shots...

www.b4x.com

AlfaizDev · Jul 15, 2022

A big effort.
Thank you
The fact that these applications of this environment work on all platforms
And it's the closest thing to the applications
I think he worked with it.
Electronic Store
It's going to be great, time-saving and effort-saving.

Mashiane · Jul 16, 2022

Uploading Files to a folder of your choice and or rename the name of the uploaded file.

What has changed:

The old call was: fileDet = BANanoShared.UploadFileWait(fileObj)

The additional optional call is: BANanoShared.UploadFileOptionsWait(fileObj, "../assets", "n")

Option 1

These calls will both upload a file to the assets folder as usual.

For example:

B4X:

Private Sub txtUsualUpload_Change (fileObj As Map)
    page.refs = vuetify.GetRefs
    'start uploading the file to assets folder
    fileDet = BANanoShared.UploadFileOptionsWait(fileObj, "../assets", "n")
    'get the status of the upload
    Dim sstatus As String = fileDet.Status
    'get the file name
    Dim fn As String = fileDet.FileName

Option 2
This will upload the file to the files folder, will create folder if it does not exist.

B4X:

Private Sub txtUsualUpload_Change (fileObj As Map)
    page.refs = vuetify.GetRefs
    'start uploading the file to assets folder
    fileDet = BANanoShared.UploadFileOptionsWait(fileObj, "../files", "n")
    'get the status of the upload
    Dim sstatus As String = fileDet.Status
    'get the file name
    Dim fn As String = fileDet.FileName

To have the file renamed to a "random" file name, just change the last variable from "n" to "y", meaning that you want the uploaded file to be renamed.

The new "random" file name is based on...

B4X:

$filename = uniqid() . "-" . time();

A new php script has been added to BVAD3.

IMPORTANT: Getting Import Code from Intellisence (that you can "copy code")

If using VField, use VField.FileChangeSingle for single file upload and VField.FileChangeMultiple for multiple.
If using the actual VFileInput use VFileInput.FileChangeSingle for single file upload and VFileInputFileChangeMultiple for multiple.

Update: Uploading a file and rename it to your own custom name:

B4X:

Private Sub txtFileRename_Change (fileObj As Map)
    page.refs = vuetify.GetRefs
    'has the file been specified
    If banano.IsNull(fileObj) Or banano.IsUndefined(fileObj) Then Return
    'show the loading indicator
    txtToAssetsRename.UpdateLoading(page, True)
    'get file details
    Dim fileDet As FileObject
    fileDet = BANanoShared.GetFileDetails(fileObj)
    'you can check the size here
    Dim fs As Long = fileDet.FileSize
    'get the file name and rename it
    Dim FileName As String = "batch-" & BANanoShared.DateTimeNowBackUp & "-" & fileDet.FileName
  
    If fs >= 5000 Then
    End If
    'start uploading the file to assets folder
    fileDet = banano.Await(BANanoShared.UploadFileRenameToWait(fileObj, "../assets", FileName))
    'get the status of the upload
    Dim sstatus As String = fileDet.Status
    'get the file name
    Dim fn As String = fileDet.FileName
    Select Case sstatus
    Case "error"
        'hide the uploader
        txtToAssetsRename.UpdateLoading(page, False)
        vuetify.ShowSnackBarError($"The file '${fn}' was not uploaded successfully!"$)
    Case "success"
        vuetify.ShowSnackBarSuccess($"The file '${fn}' was uploaded successfully!"$)
    End Select
    'get the upload full path
    Dim fp As String = fileDet.FullPath
    'IMPORTANT
    fp = fp.Replace("../assets", "./assets")
    lblFullPath.UpdateCaption(fp)
    'update state of some element like an image
    'vimage.SetImage(page, fp)
    'hide the uploading status
    txtToAssetsRename.UpdateLoading(page, False)
End Sub

With this example, we read the file name first and then pre-pend the file name

B4X:

Dim FileName As String = "batch-" & BANanoShared.DateTimeNowBackUp & "-" & fileDet.FileName

We then upload it to the server assets folder. Please note the "../assets"

B4X:

fileDet = banano.Await(BANanoShared.UploadFileRenameToWait(fileObj, "../assets", FileName))

Finally after the file is uploaded, we get the new full path and have to clean out the ../assets out.

B4X:

'get the upload full path
    Dim fp As String = fileDet.FullPath
    'IMPORTANT
    fp = fp.Replace("../assets", "./assets")

Mashiane · Jul 16, 2022

Using a Key Value Store

[BANanoKeyStore] A KeyValue Store for BANano on top of IndexedDB

Hi there The BANanoKeyStore is a Key Value store class that works like the b4j Key Value Store b4xlib. How to use...

www.b4x.com

See the output in the web console log screen (Control + Shift + I)

Mashiane · Jul 21, 2022

[BANanoVuetifyAD3][Builder] How to Optimize your WebApp

Hi Download Please Note: You can run this process even before you develop your webapp so that it only uses the components you will use. In that case, just start on Step 3 below and then choose the components you will use beforehand. As we aware, the BVAD3 library is a large library, with 184...

www.b4x.com

Mashiane · Jul 22, 2022

Creating colored chips using VChipGroup

B4X:

VChipGroup1.Clear(page)
    VChipGroup1.AddItemColor("c1", "", "black", "white")
    VChipGroup1.AddItemColor("c2", "", "#E6E6E6", "black")
    VChipGroup1.AddItemColor("c3", "", "#FFB500", "white")
    VChipGroup1.AddItemColor("c4", "", "#F27229", "white")
    VChipGroup1.AddItemColor("c5", "", "#EB3427", "white")
    VChipGroup1.AddItemColor("c6", "", "#923FA3", "white")
    VChipGroup1.AddItemColor("c7", "", "#3A51DF", "white")
    VChipGroup1.AddItemColor("c8", "", "#23A7F5", "white")
    VChipGroup1.AddItemColor("c9", "", "#5EB524", "white")
    VChipGroup1.AddItemColor("c10", "", "#7C5F4D", "white")
    VChipGroup1.AddItemColor("c11", "", "lime", "white")
    VChipGroup1.Refresh(page)

Mashiane · Jul 22, 2022

How to add a pre-built product card

Just add your products and you can select buy, copy and wish to either buy a product or add to your wish list.

B4X:

VProductCard1.Clear(page)
    VProductCard1.AddProduct("p1", "KD 8 EXT", "./assets/nike1.png", "$ 145.00", "-20%", "")
    VProductCard1.AddProduct("p2", "Jordan Galaxy", "./assets/nike2.png", "$ 599.00", "-30%", "")
    VProductCard1.AddProduct("p3", "Nike SB Trainerendor Leathe", "./assets/nike3.png", "$ 190.00", "-17%", "")
    VProductCard1.AddProduct("p4", "Air Jordan Spike 40 iD", "./assets/nike4.png", "$ 220.00", "-22%", "")
    VProductCard1.AddProduct("p5", "Nike Air Footscape Magista Flyknit", "./assets/nike5.png", "$ 235.00", "-18%", "")
    VProductCard1.AddProduct("p6", "Nike Air Zoom Huarache 2k4", "./assets/nike6.png", "$ 190.00", "-40%", "")
    VProductCard1.AddProduct("p7", "Jordan Horizon", "./assets/nike7.png", "$ 230.00", "-13%", "")
    VProductCard1.AddProduct("p8", "Air Jordan xx9 Low", "./assets/nike8.png", "$ 185.00", "-15%", "")
    VProductCard1.Refresh(page)

Trapping Events

The events receive the map that contains the product details..

B4X:

Private Sub VProductCard1_Copy (item As Map)
    vuetify.ShowSwalInfo("Copy: " & banano.ToJson(item))
End Sub

Private Sub VProductCard1_Buy (item As Map)
    vuetify.ShowSwalInfo("Buy: " & banano.ToJson(item))
End Sub

Private Sub VProductCard1_Wish (item As Map)
    vuetify.ShowSwalInfo("Wish: " & banano.ToJson(item))
End Sub

Mashiane · Jul 22, 2022

Adding a category listing

This category listing uses the V-Item-group to create images linked to a VModel.

You just drop a VCategoryListing and then add the items with image dimensions, you can fire the change event to determine which item was selected.

B4X:

VCategoryList1.Clear(page)
    VCategoryList1.AddItem("all", "ALL", "./assets/c1.png", 110)
    VCategoryList1.AddItem("coff", "Coffee", "./assets/c2.png", 90)
    VCategoryList1.AddItem("jui", "Juice", "./assets/c3.png", 80)
    VCategoryList1.AddItem("mlk", "Milk Based", "./assets/c4.png", 80)
    VCategoryList1.AddItem("sna", "Snack", "./assets/c5.png", 110)
    VCategoryList1.AddItem("des", "Dessert", "./assets/c6.png", 110)

Trapping the change event

B4X:

Private Sub VCategoryList1_Change (item As String)
    vuetify.ShowSwalToastInfo(item, 1000)
End Sub

Mashiane · Jul 25, 2022

Lets Reverse Engineer the VForm

The VForm is a very powerful component that helps you build VForms & input VDialog using the Abstract Designer.
Using it also helps you to to have your form linked to the VueTable and DataSource.

Below we look at what happens when you put a VField inside a VForm and choose a Component Type

For example, in your VField, when you choose MinusPlus component type, during the CreateForm process, which is called by the form BindState sub, the BuildMinusPlusChip sub will be called. This internally will call the VChip, pass specified properties to it and this ends up in your UI.

When you use the VFlexDialog, it calls the VForm underneath, which executes these calls.

Mashiane · Aug 1, 2022

[BANanoVuetifyAD3] WhatsApp CRM

Hi there Check it out on Netlify This is a very simple project to showcase the following: VFlexDialog + Bindings to VueTable. BANanoKeyStore CRUD - add, update and delete contacts using KeyValueStore Sending Messages using WhatApp click to chat API. A smaller version of the BANanoVuetifyAD3...

www.b4x.com

Mashiane · Sep 6, 2022

[BANanoVuetifyAD3] Sending Emails via EmailJS REST API

Hi there I needed a simple and quick API to send emails and found EmailJS. There are a variety of other emails you can find. One of the things I like about this is the ease if creating templates and the 200 emails per month FREE. Just enough to test my ideas around. The sign up process is also...

www.b4x.com

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

Expert

Attachments

Expert

Expert

Attachments

Expert

Expert

Attachments

Expert

Expert

Attachments

Expert

Expert

Expert

Well-Known Member

Expert

Attachments

Expert

Attachments

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Privacy & Transparency

Privacy & Transparency