Part 29: Add Navigation to your EVAM component Items

Handle Navigation Event

Remember, we added sys_declarative_action for the navigation for our EVAM Definition. Let’s dispatch the event now from the component when someone clicks on the item in the data set.

• Select Body from the content window
• Goto Events > Handled Events
• Click Add and Configure the following

Dispatch event

• Select Data Set 1 from the content window
• Goto Config properties
• Click Configure declarative action event mappings in the bottom
• Under navigation, Add new event handler and configure as follows.

Add Client Script to handle navigation

• Goto Page Scripts
• Click +Add
• Give name as Handle catalog submission
• Copy following snippet and save

/**
 * @param {params} params
 * @param {api} params.api
 * @param {any} params.event
 * @param {any} params.imports
 */
function handler({
    api,
    event,
    helpers,
    imports
}) {
    helpers.navigate.to("catalog", {}, {
        "sysId": event.payload.sysId
    });
}

Event Handler

• Select Body from the content window
• Goto Events > Catalog Item Clicked
• Click Add a new event handler
• Map the client script we created and Click save

Great!! We should be all set and upon clicking the catalog item it should open the correct catalog item.