How to configure search input and search results with UI Builder

[Bradley Marin]

I am creating a simple search box with results in a page using UI Builder. I have added the search input and search results components to the page but cannot seem to figure out how to connect them together. There seems to be a lack of documentation on this matter. The only documentation I can find defines what the search metadata field does in the search results component, but not the syntax on how to pass it data. Has anyone completed something similar to this and can help out? Thanks!

Here is a link to the only documentation I can seem to find on the matter: Link

[Kim Sullivan]

Trying to do the same thing - did you figure it out?

[Saif7]

Hello @Kim Sullivan  & @Bradley Marin 

I have an answer to your question.

A) Add Two Components, Search Input & Search Result.

B) Create Client state parameters lets call it "Term"

C) Search Input Configuration, set the Search Term to be "@state.Term".

D) Search Result Configuration, set the Search Term to be "@state.Term".

E) Create a page script lets call it "Update Term Value", in the script copy this code:

function handler({api, event, helpers, imports}) {
 api.setState("Term",event.payload.searchTerm);
}

F) Go To the component Search result and add the event "SEARCH_EXECUTED", call Update term value from this event.

Save the page! try it.

[Akshay Gupta2]

Hi 

You could try these steps. To configure the search input and search results components in UI Builder:

Detailed answer with example to accomplish this in ServiceNow:

1. Add the components to the page:

• In the ServiceNow UI Builder, drag and drop the Search Input component onto the page.
• Drag and drop the Search Results component below the Search Input component.

2. Link the components:

• Click on the Search Input component to open its properties panel.
• In the Results component field, select the Search Results component that you added to the page.

3. Configure the search results:

• Click on the Search Results component to open its properties panel.
• In the Data source field, select the data source that contains the items you want to search. For example, you could select the incident table to search for incidents.
• In the Metadata field field, enter the name of the field in the data source that contains the search terms. For example, you could enter short_description to search for incidents based on their short description.

4. Define the search query:

• Click on the Search Input component to open its properties panel.
• In the Query field, enter the expression that defines the search query. For example, you could enter the following expression to find all incidents with a short description that contains the word "apple":

5. Preview the results:

• Click the Preview button in the toolbar to see how the search works.

Example:

Here is an example of how to create a search box and search results page in ServiceNow using UI Builder:

1. Create a new UI Builder page.
2. Drag and drop the Search Input component onto the page.
3. Drag and drop the Search Results component below the Search Input component.
4. Click on the Search Input component to open its properties panel.
5. In the Results component field, select the Search Results component that you added to the page.
6. Click on the Search Results component to open its properties panel.
7. In the Data source field, select the incident table.
8. In the Metadata field field, enter short_description.
9. Click on the Search Input component to open its properties panel.
10. In the Query field, enter the following expression:

1. Click the Preview button to see the search box and search results in action.

When you type "apple" into the search box and press Enter, the Search Results component will display a list of all incidents with a short description that contains the word "apple".

Hope this works for you!

Thanks

[Gregory Mote]

Posting this here because there’s very little documentation on how to do this and the only reason I was able to figure it out was because of Cole M’s comment here:

https://www.servicenow.com/community/developer-forum/ui-builder-search-input/m-p/2498888/highlight/t...

The key to getting all the search components to work together in UI Builder is the Search EVAM Data Resource. The data resource takes an Entity View Action Mapper (EVAM) Definition and a Search Application Definition.  

At a basic level, the Search Definition determines what set of data you get back and then the EVAM is what formats it so you can display it in the search results.  The below example uses an ootb EVAM config and search definition but could be completed with custom implementations following the documentation below:

EVAM:

https://docs.servicenow.com/bundle/washingtondc-servicenow-platform/page/administer/evam/concept/eva...

AI Search Configuration:

https://docs.servicenow.com/bundle/washingtondc-platform-administration/page/administer/ai-search/co...

Create a New Page with the following parameters

Add the following components to the page (Note: Additional Columns/Containers were added for formatting purposes)

Add a Search EVAM Data Resource with the following configurations set

Note: Evam Config ID and Search Context Config set in this example are ootb options but they could be changed to custom ones that you’ve created using the articles mentioned at the beginning of this post.

Configure Search Input Component

Configure Search Results Component

Configure the Tab Filter Component

Configure the Search Facet Component

Final Result