Replacing Select by Autocomplete on a form

Q&A
1

Hi,

I have a list of about 100 items to select and I wanted to replace the Select widget with the Autocomplete. The atutocomplete works great to filter a list of items when adding a new entry but is blank when displaying value that is already set. 

Is there a way to use the Autocomplete to display a value?

 

 

 

 

2

Are you using the 2021.1 version? I had that same problem on the new version of the autocomplete widget with the "Displayed Key" and "Returned Key".

I solved it by exporting the Autocomplete widget from an old version of Bonita and using it in 2021.1. The old version of the Autocomplete Widget didnt have the "Returned Key" option.

3

Hi,

Can you try something like this:

  1. Create a JSON variable availableValues with content like this:

    [ {“key” : “Hello”, “value” : “1”}, {“key” : “Ciao”, “value” : “2”}, {“key” : “Bonjour”, “value” : “3”} ]
  2. Create a value JSON variable with content:

    {“key” : “Ciao”, “value” : “2”}
  3. Bind the variables to the autocomplete widget (availableValues → Available values, value → Value)
  4. Use key as Displayed key and value as Returned key

If you run the preview, the autocomplete should have Ciao in its input.

HTH
Romain

4

Thanks Romain,

I am getting my list of available values from a BDM query, It would take some gymnastic to create both JSON. Taking a step, back I only need the Autocomplete when the user is adding a new row a collection. 

I was thinking about having both a read-only input and Autocomplete widget in a container. Display the autocomplete on a new row and toggle to the input widget once a proper selection has been made. How can we detect that the selection was done? 

 

 

5

We found a way do it.

When a new entry is created the Autocomplete is displayed and until the user submit the form it will be editable. Once the form is submitted, we hide the Autocomplete and display a read only input.  To detect if it was submitted before, we use a field part of our record other then the persisitenceId. In our case we are using the name using this rule on the Autocomplete "$item.name!=null" and the reverse on the Input.