B4J Question [BANanoVuetifyAD3] How to set state on Select and on TextField

VittorioBarile

Member
Licensed User
Hello!

I have a page with a list. I set the event on click for this list because i want to set the state on Select and on TextFields:

Select made before:
Dim set1 As VueElement = vuetify.AddSelect(Me, rowSet1.id, "rowSet1", "rowSet1selected", "Set 1", False, False, "", "listitems", "", "", False, "set 1", CreateMap(":outlined":True))
setup.BindVueElement(set1)

'options for selects
Dim items As List = setup.NewList
items.AddAll(Array("Abilitato", "Disabilitato"))
setup.SetData("listitems", items)

and on BananoSkeleton i made TextFields.


Event onClick List:
Sub list1_click(item As Map)
    vuetify.ShowSnackBarSuccess(item)
    
    Dim codiceSetupScelto As String = item.Get("title")
    setup.SetData("setupScelto", "")
    Dim dbMySQL As BANanoMySQLE
    dbMySQL.Initialize("Sql1407766_5", "setup_standard", "id_setup", "id_setup")
    dbMySQL.SchemaAddText(Array("codice"))
    
    'define a where clause
    Dim aw As Map = CreateMap()
    aw.Put("codice", codiceSetupScelto)
    dbMySQL.SelectWhere(Array("*"), aw, Array("="), Array("codice"))
    dbMySQL.JSON = banano.CallInlinePHPWait(dbMySQL.MethodName, dbMySQL.Build)
    dbMySQL.FromJSON
    Select Case dbMySQL.OK
        Case False
            Dim strError As String = dbMySQL.Error
            vuetify.ShowSnackBarError("An error took place whilst running the command. " & strError)
            Return
        Case Else
            vuetify.ShowSnackBarSuccess("OK")
    End Select
    'convert to json
    Dim jsonSetupScelto As String = banano.ToJson(dbMySQL.result)
    
    For Each rec As Map In dbMySQL.Result
        Dim key As String = rec.get("key")
        Dim value As String = rec.get("value")
     
               '----------HERE i want to set value on Selects and on textFields
        
        
    Next
    
    setup.SetData("setupScelto", jsonSetupScelto)
    
End Sub

I want to set up the state on select and on TextField get from that list.
Also i want to know how could i "refresh" the list if i want to add a new item in there

Thanks for your patience
 

Mashiane

Expert
Licensed User
Longtime User
'convert to json Dim jsonSetupScelto As String = banano.ToJson(dbMySQL.result)
The reason I converted the list result before was to show it on my code snack-bar. To feed content to any data-bound control, you cannot pass it a JSON string.

Please forget this code if you want to update data bound controls. It wont work.
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
B4X:
Dim set1 As VueElement = vuetify.AddSelect(Me, rowSet1.id, "rowSet1", "rowSet1selected", "Set 1", False, False, "", "listitems", "", "", False, "set 1", CreateMap(":eek:utlined":True))
setup.BindVueElement(set1)
'options for selects
Dim items As List = setup.NewList items.AddAll(Array("Abilitato", "Disabilitato"))
setup.SetData("listitems", items)
Here you have created a list and are feeding it items by setting its data bindings to "listitems". This expects a list of objects. This can either be a key value map list or just a simple list.

For example in the ViewInputDialog page in the tutorial, we defined a list using key value pairs

B4X:
'R3
    Dim selAge As VueElement
    selAge = vuetify.AddSelect(Me, dlg1Cnt.MatrixID(3, 1), "selage", "profile.age", "Age*", True, False, "", "agelist", "id", "text", False, "", Null)
    inputdialog.BindVueElement(selAge)
    '
    Dim ageList1 As List = inputdialog.NewList
    ageList1.AddAll(Array("0-17", "18-29", "30-54", "54+"))
    'convert a list To a key value pair object
    Dim ageList As List = vuetify.ListToDataSource("id", "text", ageList1)
    inputdialog.SetData("agelist", ageList)

In this example we want a key value pair of objects based on a list of ages, 0-17, 18-29, 30-54 and 54+, we want a key value pair list, so we convert our list using
ListToDataSource, this ensures that we get

B4X:
{"id":"0-17", "text":"0-17"}
{"id":"18-29", "text":"18-29"}

etc

This means that anytime we set the state of "agelist" or as per your example, "listitems", the contents of the list will be changed. What one has to do is just overwrite the already data-bound source with new content to set the state, by executing.

B4X:
setup.SetData("listitems", a new list name)

With your example, anytime a person selects a list item, the v-model value will be bound to that item, i.e rowSet1selected

and to get the item, one would call

B4X:
dim xxx as string = setup.GetData("rowSet1selected")
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
How could i use data without this method? Is there a safe method?
Yes, there is a safe method, and you had already started to implement it.

In your case, you want to update a select records when a list item is clicked.

What we need to do then is over-write the data bound select list items with new content.

Your pre results are defined as..

B4X:
For Each rec As Map In dbMySQL.Result
        Dim key As String = rec.get("key")
        Dim value As String = rec.get("value")
     
               '----------HERE i want to set value on Selects and on textFields
        
        
    Next

You had earlier set your select state with..

B4X:
'options for selects
Dim items As List = setup.NewList
items.AddAll(Array("Abilitato", "Disabilitato"))
setup.SetData("listitems", items)

So we need to create a new list with the items you want to show on the list. We just update your code to be

B4X:
'we define a new list
Dim items As List = setup.NewList
For Each rec As Map In dbMySQL.Result
        Dim key As String = rec.get("key")
        Dim value As String = rec.get("value")
     
               '----------HERE i want to set value on Selects and on textFields
        'we add the item we want on the list
items.Add(value)

        
    Next
'we overwrite the list content with the new items
setup.SetData("listitems", items)

If however, you want to add items to an already existing list without replacing the complete list.

1. Get the list from the state

B4X:
Dim originalList As List = setup.GetData("listitems")

2. Add the item you want to add

B4X:
originalList.Add("New Value")

3. Update the state back

B4X:
setup.SetData("listitems", originalList)
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
on this link you can download my project test
Next time, to distribute a project, click the Export to Zip (i,e present package) button on the toolbar.

1608626470302.png


Please clean up the project to only have the project stuff you are working on and need help on. This is the complete tutorial 40 with the exception of your ViewSetup Component.
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
I've been thinking about the proper solution for this. Here is my proposed solution

1. Convert ALL your data sources for ALL your selects to key value pairs

From

B4X:
Dim items As List = setup.NewList
    items.AddAll(Array("Abilitato", "Disabilitato"))
    setup.SetData("listitems", items)

To

B4X:
Dim items As List = setup.NewList
    items.AddAll(Array("Abilitato", "Disabilitato"))
   Dim items1 As List = vuetify.ListToDataSource("id", "text", items)
   setup.SetData("listitems", items)

If for example, you know that Abalitato = 1 and Disabilitato = 0, then you would do this like this.

B4X:
items.Add(CreateMap("id":0, "text":"Disabilitato"))
items.add(CreateMap("id":1, "text":"Abalitato "))

without using, Dim items1 As List = vuetify.ListToDataSource("id", "text", items)


So when a person selects Disabilitato, the returned value will be 0 and when selecting Abilitato, the returned value will be 1.

So for this list, the key is "id" and the value is "text"

2. Update your code to reflect that for ALL affected data sources, we are using key value pairs, i.e. "id" and "text"

From

B4X:
abilitaMon1 = vuetify.AddSelect(Me, RowAbilitaMon1.id, "abilitaMon1", "abilitaMon1selected", "Abilita 1 cent", False, False, "", "listitems", "", "", False, "Abilita 1 cent", CreateMap(":outlined":True))

To

B4X:
abilitaMon1 = vuetify.AddSelect(Me, RowAbilitaMon1.id, "abilitaMon1", "abilitaMon1selected", "Abilita 1 cent", False, False, "", "listitems", "id", "text", False, "Abilita 1 cent", CreateMap(":outlined":True))


3. To be able to quickly update all your v-models, update the v-models to use a map.

3.1 Create a map variable state by initialiating it, for example

B4X:
Sub comboBoxInit
setup.SetData("record", setup.NewMap)

3.2. Update ALL the v-models for all components . i.e. prefix them with record. Please ensure that the vmodel is in lowercase.

From

B4X:
abilitaMon1 = vuetify.AddSelect(Me, RowAbilitaMon1.id, "abilitaMon1", "abilitaMon1selected", "Abilita 1 cent", False, False, "", "listitems", "id", "text", False, "Abilita 1 cent", CreateMap(":outlined":True))

To

B4X:
abilitaMon1 = vuetify.AddSelect(Me, RowAbilitaMon1.id, "abilitaMon1", "record.abilitamon1selected", "Abilita 1 cent", False, False, "", "listitems", "id", "text", False, "Abilita 1 cent", CreateMap(":outlined":True))

4. Setting the states

Remember, to set and get the state one uses .SetData and .GetData, so to update the state in this case.

B4X:
Dim rec as Map = setup.NewMap
rec.put("abilitamon1selected", "Abilitato")
rec.put("abilitaMon2selected", "Disabilitato")

If you used the 0 and 1 then you would write

B4X:
rec.put("abilitamon1selected", 1)
rec.put("abilitaMon2selected", 0)

then, by setting the state once using the map object

B4X:
setup.setdata("record", rec)

If you get the record from a db for example, you would use..

B4X:
Dim rec As Map = dbSQL.Result.Get(0)

All the values that are affected for the selects and text fields will be updated as soon as .SetData("record", ??? is executed.

All the best.
 
Upvote 0
Top