How to use Autocomplete Widget?


Hello I'm trying to implement the autocomplete widget but I can't find any real simple example.

I basically have a field "User Email" that I would like to be autocompleted with the email of the users in the organization. Then I have another field "User Name" which I would like to populate with the full name (first name + last name) of the autocompleted email.


2 answers



first you would like the autocomplete widget to contain the user email of the organization, is my understanding correct? to do this you would need to get these from the values and put them in a list. you could then use this list as your "Available values".

then when you get the email address, you would then need to query using the email address to get the first name and last name of the user.

I believe the object IdentityAPI will be used for this.

hope this helps.



Submitted by MROMEROVAL on Thu, 05/25/2017 - 02:06

Hi Alfred,
thank you for replying, but I think we are in the same situation here, I would like you to understand that I don't know where or how to do what you are saying.
I know how to make a query.... but I don't know where to do that in Bonita. Where can I say select lastname and fullname of the user where email equals the one in the autocomplete widget? and then print it in the "User Name" field. Do I need a variable? where can I create that? In the diagram? in the form?
I know the logic and the steps I need, but I can't find any detailed example of where in bonita software I can do those steps. Do you guys think I can have a real example, code or screenshot to have a better idea?

Thank you very much!

Submitted by MROMEROVAL on Fri, 05/26/2017 - 02:39

I could finally realized how to make only the autocomplete widget work:
In the form editor, I have created a variable named "usersList", this list is type "ExternalAPI" with the API URL :

d=professional_data - include professional data in response, so you can get the email
c= maximum number of elements to retrieve.

Then in the properties I did the following:
Available values : usersList (the list of objects)
Displayed Key: (the data you want to show when you type in the field. e.g. You could show username)
Value: pr ![autocomplete][autocomplete] (the value you want to get)

Now I need to know how to fill the "User Name" field based on the email in the autocomplete widget.
Do you think you can explain the steps for doing this?

Thank you.


Pretty simple really, it's a text box with predefined "Available Values". It is NOT at all like the standard ones used on Chrome Edge etc. where the user inputs it once and then the system remembers it.

i'm not sure what the default is in Chrome but you will basically have to create your own versions, custom widgets, that have the html "autocomplete=on|off" parameter defined on them.


PS: As this reply offers an answer your question, and if you like it, please Mark UP and/or as Resolved.


Submitted by MROMEROVAL on Wed, 05/24/2017 - 07:33

Hello Seán,
Thank you for your time. I can imagine that for you it is very simple, but although I can (kind of) understand what you are saying , I don't really know HOW to do it. And I feel the same with the documentation, I looked for "Autocomplete widget" and "Custom Widgets" and the information is not enough to learn how to do things: no examples or tutorials showing a real situation where I can learn from.
Is it possible to explain a little more the way I can reach this simple solution? Am I looking/asking in the wrong place for real examples?

Thank you again!

Submitted by MROMEROVAL on Thu, 06/01/2017 - 00:29

I could finally realized how to make only the autocomplete widget work. But now I need to know how to fill the "User Name" field based on the email in the autocomplete widget.
I know I should query the database and bring the data but not sure how and where to do so.
Do I need to use Assets? custom widgets? Do you think you can explain the steps for where and how doing this?

Thank you.

Submitted by on Mon, 06/26/2017 - 19:07

Am I having the same difficulty as you, did you succeed in resolving this? Any tip is welcome

Thank you

Submitted by on Tue, 06/27/2017 - 13:23

I was able to solve my problem with this link , maybe can help you too