Hi @Eckhard ,
Below is a simple example of how I used the Typeahead component in UI Builder to display users for selection. After selecting a user, I also added an alert message as an example of how you can trigger an action based on the selection.
Steps
1. Open the UI Builder page
Open the UI Builder page and select the appropriate variant where you want to add the Typeahead component.
2. Add the Typeahead component
Add the Typeahead component to the required location on the page.
3. Add a Lookup Data Resource
After adding the component, add a Lookup Data Resource for the required table.
In my example, I am using the User (sys_user) table.
4. Add an Event Mapping
Select the data resource and navigate to the Events section.
Click Add event mapping and select the Data fetch succeeded event.
For the action, select Execute client script.
5. Configure the Client Script
The following client script updates the results returned by the Lookup Data Resource:
/**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({
api,
event,
helpers,
imports
}) {
var res = api.data.look_up_multiple_records_1.results;
res.forEach(function(user) {
user.id = user._row_data.uniqueValue;
user.label = user._row_data.displayValue;
});
api.data.look_up_multiple_records_1.results = res;
}In this client script, I am adding two additional properties to each result object:
id
label
These properties are required for the Typeahead List Item configuration.
There are additional properties that can be added to the list items depending on your requirement. For this example, I am only adding the mandatory id and label properties.
Alternatively, you can create a new Client State Parameter of type JSON and store the id and labels there. In this example, I am directly using the results object from the data resource.
6. Map the Results to the Typeahead Component
Once the results have been modified, map the results object to the List items field under the Typeahead component's configuration.
You can also configure other fields, such as Selected value and Label field, depending on your requirement.
7. Handle Item Selection
If you want to perform an action after a user selects an item, go to the Events tab of the Typeahead component.
Click Add event mapping and select the Item selected event.
This event will be triggered whenever an item is selected from the Typeahead list.
You can then configure the required action, such as executing a client script, showing an alert, updating a client state parameter, or performing another UI Builder action.
I hope this example helps .
There are other events available for the Typeahead component. Please refer to the ServiceNow documentation for additional details.
Typeahead Component Documentation:
ServiceNow Typeahead Component Documentation
If you find this useful, please mark it as helpful and accept the solution.
Regards,
Harish
Hi Harish,
many thanks for your feedback.
Unfortunately it does not work.
It seem that the mapping from the data structure does not work correctly.
I see just an empty list when clilcking in my typeahead field - see 1st screenshot.
For testing I created an additional text box where I linked the data to the data resource.
And it seems that data get displayed - see my 2nd screenshot.
So, I believe there is something wrong with the mapping.
I also attached a screenshot from my binding configuration.
Is the client script OK without a return statement?
Many thanks for your help.
Best regards Eckhard
