Akash Rajput Technology over a cup of coffee

Part 27: Create EVAM Component in UIB

2 min read

Featured Video Play Icon
  • Navigate to Now Experience Framework > Experiences.
  • Open the Experience for Panda Tech.
  • On the right side of the form, Besides the Admin panel, Click on the (i) Icon to open the Admin panel.
  • Click Open UI Builder.


  • Navigate to Now Experience Framework > UI Builder.
  • From My experience, Click Panda Tech

Add Data Row Component

  • Select Cat item component from the content window
  • Add component after and search for Data row
  • Select Data row and Add
  • Add Following style to the component
* {
    margin-top: 20px;

Set the visibility of Data Row Component

Copy the following code snippet which says hide this component when sys_id is not empty. Set test value field to false for now so we can configure the component.

  * @param {params} params
  * @param {api} params.api
  * @param {any} params.imports
function evaluateProperty({api}) {
	return api.context.props.sysId;

Fill in the fields, as appropriate

  • Title – Catalog Items
  • Layout Horizontal
  • Data – Leave it blank for now (We have to create EVAM data broker and map it to the EVAM definition we created)
  • Card height – Medium
  • Max. cards per row – 4
  • Empty state message – No catalog items available
  • Show data row without box – true

Rest Everything can be as it is.

Add new Data broker to bring EVAM Definition

  • Goto Data resources
  • Click New
  • Search for EVAM
  • Select EVAM Data Resource
  • Click Add
  • Fill in the fields, as appropriate
    • EVAM Definition – Catalog items list
  • Click Save
  • If everything set correctly, you should see JSON with results for the definition selected as following. I am just keeping it here but you do not need to take any action on that.
  "page_cursor": "ezVjZTg0YzAxMWJmZTIwMTA1NWQzOWFjZjAzNGJjYjE4PTI0fQ",
  "page_size": 20,
  "page_number": 0,
  "is_last_page": false,
  "all_actions": [
      "assignmentId": "bbdcc4c11bfe201055d39acf034bcba4",
      "name": "navigation",
      "label": "Navigation",
      "actionType": "uxf_client_action",
      "actionDispatch": "NAVIGATION",
      "actionPayload": "{\r\n        \"table\": \"{{table}}\",\r\n        \"sysId\": \"{{sys_id}}\",\r\n        \"url\": \"{{navigation_url}}\"\r\n}"
  "selected_filter": "",
  "items": [
      "template": "now-card-evam-record",
      "propValues": {
        "highlightedHeaderLabel": "",
        "textHeaderLabel": "Field Service",
        "titleLabel": "IT Request",
        "imageURL": "",
        "subtitle": "IT Request",
        "subtitleAvatarName": "IT Request",
        "subtitleAvatarURL": "",
        "detailValueOne": "$0.00",
        "highlightedHeaderIcon": "clock-outline",
        "highlightedHeaderBkgColor": "moderate",
        "subtitleIcon": "calendar-fill",
        "imageType": "image",
        "subtitleImageType": "avatar",
        "detailLabelOne": "Price",
        "mainActions": [],
        "clickAction": {
          "assignmentId": "bbdcc4c11bfe201055d39acf034bcba4",
          "name": "navigation",
          "label": "Navigation",
          "actionType": "uxf_client_action",
          "icon": "",
          "buttonType": "primary",
          "actionDispatch": "NAVIGATION",
          "serverScript": "",
          "confirmationRequired": false,
          "confirmationMessage": "",
          "actionPayload": {
            "table": "sc_cat_item",
            "sysId": "ca7ca8f71b22605055d39acf034bcb70",
            "url": ""
        "model": {
          "name": "IT Request",
          "short_description": "IT Request",
          "icon": "",
          "image": "",
          "category": "Field Service",
          "sc_catalogs": "Field Service Catalog",
          "category.description": "Organized dispatcher and agent resources to quickly help fix broken items in the field.",
          "category.title": "Field Service",
          "sys_name": "IT Request",
          "price": "$0.00",
          "sysId": "ca7ca8f71b22605055d39acf034bcb70",
          "sys_id": "ca7ca8f71b22605055d39acf034bcb70",
          "table": "sc_cat_item"
  "available_filters": [
      "sys_id": "",
      "label": "Default"

Map EVAM broker output to the Data row component

  • Select Data row component
  • In the data config, put following @data.evam_data_resource_1.compositeDataViews

Test the configuration now. Navigate to https://<instancename>/now/panda_tech/catalog/

It should display list of catalog items with cards.

Akash Rajput Technology over a cup of coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

Never miss a story from me, get updates directly in your inbox.