Part 14: Adding a breadcrumb to the catalog page

Create Lookup Data broker to get the information about the Catalog item

• Navigate to Catalog Page
• Create a Data resource
• Click + Add
• Search for keyword lookup
• From the Data resources section select Look Up Record
• Click Add
• In the configuration section, Fill out the fields below
  • Table – Catalog Item
  • Record – @context.props.sysId

Add a breadcrumb component

• Goto Content Section and select Cat Item component
• Click Add component before
• In search, type breadcrumb and select
• In the configuration section, modify items by selecting </> and add following snippet

/**
 * @param {params} params
 * @param {api} params.api
 * @param {any} params.imports
 */
function evaluateProperty({
    api
}) {
    let _name = api.data.look_up_record_1.result.name.displayValue;
    let _breadcrumb = [{
            "label": "First Item",
            "href": "#",
            "icon": "home-outline",
            "hideLabel": true
        },
        {
            "label": _name,
            "href": "#"
        }
    ];
    return _breadcrumb;
}

• Click Save

Great!! We have successfully hooked Lookup data broker and breadcrumbs data broker to our page.