B4J Tutorial [BANanoWebix] Lesson 28 Suggestions

Ola

There comes a time when you want suggestions on text, combos etc. The WixSuggest elements comes in handy, you feed it a list of data and map it to a control and wala, when keypressing on the element / selecting, a list of suggestions is available...



Here we create a form, add a textbox and a button and then link the suggestions.

Code:

Dim sugg As WixSuggest
    sugg.Initialize("suggest1")
    sugg.AddItem(1, "Apple")
    sugg.AddItem(2, "Banana")
    sugg.AddItem(3, "Kiwi")
    sugg.AddItem(4, "Melon")
    'add to page
    pg.AddSuggestion(sugg)

We create the form, textbox and button and add those to the form. We also link the added button to a click event to return all form elements using .GetValues(formName).

For .GetValues to work, all form elements in question should have a 'name' property.

Code:

'create a form
    Dim form1 As WixForm
    form1.Initialize("form1").SetWidth(300).SetScroll(False)
    'create a textbox
    Dim txt As WixTextBox = form1.Form.CreateTextBox("").SetName("country").SetLabel("Country").SetValue("Belarus").SetSuggest("suggest1")
    'create a callback
    Dim cb As BANanoObject = BANano.CallBack(Me, "clickit", Null)
    'create a button
    Dim btn As WixButton = form1.Form.CreateButton("").SetValue("Submit data").SetClick(cb)
    '
    'add elements to form rows
    form1.AddRows(txt.Item)
    form1.AddRows(btn.Item)
    'add form to page
    pg.AddRows(form1.Item)
    '
    pg.ui
    'add to page

We will be adding more of these .Create??? to the WixElement class to make it easier to add components.

Ta!

Get BANanoWebix

 

On the button click, we get the form values and message them out...

Code:

Sub clickit
    'get the form data
    Dim formd As Map = pg.GetValues("form1")
    'display it
    pg.Message(BANano.ToJson(formd))
End Sub

One can use the form values to save to a db etc.

 

In this instance, we have defined a toolbar and added it to R2 of the page. We then added a richselect component on the toolbar and they ran .SetSuggest for the rich-select using the previously defined Suggest element.

Code:

'create a toolbar
    Dim t As WixToolBar
    t.Initialize("")
    '
    Dim rs As WixRichSelect
    rs.Initialize("").SetSuggest("suggest1")
    'add to toolbar
    t.AddElements(rs.item)
    '
    'add toolbar to page
    pg.AddRows(t.Item)