Navigate to UI Builder
- 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.
Alternatively,
- 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.
