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

[VittorioBarile]

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:

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.

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]

Its always better to include a test project of your issue.

Dont you perhaps want to do that?

Regards

TheMash

 

[VittorioBarile]

on this link you can download my project test https://mega.nz/file/Pd4EXJYL#MLGuV9jH5jpe6y082ZqNrFNQ39PLeHGuL_vShFJhR5c
i couldn't pop here

btw i need ur help first on LOC 466 and on LOC 513 in ViewSetup Module

 

[Mashiane]

'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.

 

[VittorioBarile]

How could i use data without this method? Is there a safe method?

 

[Mashiane]

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

'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

{"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.

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

dim xxx as string = setup.GetData("rowSet1selected")

 

[VittorioBarile]

I do some tests on my code. Thank you i'll let you know.
For LOC 466 any suggestion?

 

[Mashiane]

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..

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..

'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

'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

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

2. Add the item you want to add

originalList.Add("New Value")

3. Update the state back

setup.SetData("listitems", originalList)

 

[Mashiane]

For LOC 466 any suggestion?

Let me download and look at it.

 

[Mashiane]

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.

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.

 

[Mashiane]

Hi

I need the backend database to complete testing this..

 

[Mashiane]

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

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

To

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.

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

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

To

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

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

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

To

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.

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

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

then, by setting the state once using the map object

setup.setdata("record", rec)

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

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.