---
sourceDocument: Yokohama Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Add an Entity View Action Mapper data resource to a page

# Add an Entity View Action Mapper data resource to a page {#ariaid-title1}

* Release version: Yokohama
* 
* Updated January 30, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 minutes to read

Add an Entity View Action Mapper (EVAM) data resource to your page in UI Builder so that you can standardize how the data sources in your
components are displayed in your cards and lists.

## Before you begin

Role required: ui_builder_admin

## Procedure

1. Navigate to AllNow experience frameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://servicenow-prod.fluidtopics.net/nDWg0NsWQpdF_OppvTVe5g "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. Open or create a page.  
   For more information, see [Manage UI Builder pages and page variants](https://servicenow-prod.fluidtopics.net/gTnZkApUadVKq3LWn7k3HA "Learn what a page is in UI Builder. Understand the building blocks of a UI Builder page, such as column layouts and components.").
4. **Optional:** If you do not have any components on your page, add a Data set component to your page.  
   For more information, see [Add and configure components](https://servicenow-prod.fluidtopics.net/J6n1ilCnrc90JWEGwzeCiA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.").
5. In the Data and scripts panel, select the + icon and then select Data resource.  
6. Enter <kbd class="ph userinput">evam</kbd> in the search field.
7. Select the EVAM data resource that you want to add and repeat this step for all the EVAM data resources for your page.  
8. Configure each EVAM data resource.  
   {#evam-working__table_dz2_1g4_d4b__entry__2}

   | EVAM data source | Description |
   |-|-|
   | EVAM Data Resource | Add an EVAM definition and other information about the data source. * Type: Composite. * When to evaluate: In the When to evaluate this data resource list, select Immediately to have the EVAM data resource instance evaluated on page load or select Only when invoked to use an event handler to evaluate the EVAM data resource. * EVAM definition: In the EVAM Definition field, add the EVAM definition record that is associated with the data resource. * Page cursor: In the Page Cursor field, add a page cursor for the EVAM definition. * Page size: In the Page Size field, add a size for the EVAM pagination. * Page number: In the Page Number field, add the page number for the EVAM pagination. * EVAM Filter Preference: In the EVAM Filter Preference field, add the sys_ids for the EVAM data filter. {#evam-working__ul_xb4_dg4_d4b} To add an event handler for when that data fetch is initiated, succeeded, or failed, select Events. In the [Now Code Editor](https://servicenow-prod.fluidtopics.net/zrx4f9YaC1RRjhOLAHK~EQ#gloss-now-code-editor-ui-builder "A rich-text editor that supports CSS, HTML, JavaScript, XML, and JSON. Use Now Code Editor to change UI configuration, data resource configuration, styles, events, client-side scripts, and server-side scripts in Next Experience UI Builder components.") section, which is next to the Configuration pane, preview the EVAM definition script. Figure 1. EVAM Data Resource configuration |
   | Fetch EVAM Data | To add an EVAM definition and other information about the data source, select Configuration. * Type: GRAPHQL. * When to evaluate: To have the EVAM data resource instance evaluated on a page load, select Immediately. To use an event handler to evaluate the EVAM data resource, select Only when invoked. * EVAM definition: In the EVAM Definition field, add the EVAM definition record that is associated with the data resource. * Page cursor: In the Page Cursor field, add a page cursor for the EVAM definition. * Page size: In the Page Size field, add a size for the EVAM pagination. * Page number: In the Page Number field, add the page number for the EVAM pagination. * EVAM Filter Preference: In the EVAM Filter Preference field, add the sys_ids for the EVAM data filter. {#evam-working__ul_g1v_h34_d4b} To add an event handler for when that data fetch is initiated, succeeded, or failed, select Events. Preview the EVAM definition script in the Now Code Editor to the right of the Configuration pane. |
   | Fetch EVAM Metadata | To select when to evaluate the EVAM data resource and add an EVAM definition, select Configuration. * Type: GRAPHQL. * When to evaluate: To have the EVAM data resource instance evaluated on a page load, select Immediately. To use an event handler to evaluate the EVAM data resource, select Only when invoked. * EVAM definition: In the EVAM Definition field, add the EVAM definition record that is associated with the data resource. {#evam-working__ul_tr3_1k4_d4b} To add an event handler for when that data fetch is initiated, succeeded, or failed, select Events. Preview the EVAM definition script in the Now Code Editor to the right of the Configuration pane. |
   | Search EVAM Data Resource | To add an EVAM definition and other information about the data source, select Configuration. * Type: Composite. * When to evaluate: To have the EVAM data resource instance evaluated on a page load, select Immediately. To use an event handler to evaluate the EVAM data resource, select Only when invoked. * EVAM Config ID: In the EVAM Config ID field, add the EVAM Config ID that is associated with the data record. * Search Context Config ID: In the Search Context Config ID field, add the Search Context Config ID that you are searching for. * Search Term: In the Search Term field, add the search terms that you are searching for * Facet Filters: In the Facet filters field, add any facet filters to help define your search. * Search Filters: In the Search Filters field, add any search filters to help define your search. * Disable Spell Checking: In the Disable Spell Checking field, select if you desire spell checking to be on or off during your search. * Pagination Token: In the Pagination Token field, add a pagination token if needed. {#evam-working__ul_vyn_m34_d4b} To add an event handler for when that data fetch is initiated, succeeded, or failed, select Events. Preview the EVAM definition script in the Now Code Editor to the right of the Configuration pane. |
   [Table 1. EVAM data sources]

   {#evam-working__table_dz2_1g4_d4b}
9. Configure your data set component:  
   * Bind an EVAM data resource to your component.
   * Set the Show grid/list toggle to on to let users choose between the grid or list view of the EVAM information on the page.
   * Set the other configuration settings for the cards on the page.
   {#evam-working__ul_zbx_2p4_d4b}
10. Select Save.
11. View and test your page by selecting the Preview button.  
    Figure 2. Finished state of the EVAM

*[\>]: and then