Featured Video Play Icon
1 min read

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.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.