Part 9: Create a new page route catalog

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.

Create catalog page

• Click on Create a page.
• Fill in the fields, as appropriate.

1. Name – Catalog
2. Path – catalog
3. Click Create
4. On the Parameters screen, Click Add optional parameter
   1. Click Add.
   2. Give sysId andclick save
5. New blank page should be created.

Add Catalog component

• Add a container to the page.
• Click (+) toadd component to the container.
• In search box, type Catalog item and select.

Add test sysId to test the page as we design

• On the URL section, click where is says catalog.
• Add e1be6dcb4f7b4200086eeed18110c74c andclose the window.
• It should look something like this.

Bind props to the component Sys Id property

• From the Content section, select Catalog Item 1 and change followingcomponent properties.
  • Component label – Cat Item
  • Component name – cat_item
  • Sys Id – @context.props.sysId (Use Dynamic binding option to bind the property).
• Click Save.
• End result should be something like this. (Please note the highlighted changes if it does not work)

Let’s test the configuration by going to the home page and click on External monitor or New Email Account fromnavigation menu.

Great!! We have successfully created a catalog page and linked it to the navigation menu.