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
