Part 25: Create catalog homepage using EVAM component

About EVAM (Entity View Action Mapper) Component

EVAM, A Component is a very useful component to display cards/lists of items from any tables with simple configurations. It comes by default with pagination and list/grid view which can be toggled with simple buttons. In summary, EVAM can help you deal with repeating data in cards.

Hide Catalog component if no sys_id

We will continue updating our panda_tech portal with advanced concepts. At first, let’s hide the catalog item component if sys_id is not given. With no sys_id, it displays all the catalog items from the catalog.

• Open catalog page in UI Builder
• Select Cat Item component from the component section
• Goto properties, Open click Visibility icon
• Hide component Property should show up
• Click </> to write a script and copy following snippet

/**
  * @param {params} params
  * @param {api} params.api
  * @param {any} params.imports
  */
function evaluateProperty({api}) {
	return !api.context.props.sysId;
}

1. Create EVAM Definition

To work with EVAM component, you have to first create the EVAM Definition

• Navigate to Entity View Action Mapper > EVAM Definition
• Fill in the fields, as appropriate.
  • Name – Catalog items list
  • Active – true
  • Sort Order – Ascending
• Click Submit.

2. Create EVAM Datasource M2Ms

• Open EVAM Definition > Catalog items list
• In related list, EVAM Datasource M2Ms
• Click Create and Link
• Fill in the fields, as appropriate.
  • Name – Catalog items list
  • Table – Catalog Item
  • Sort By – Updated
  • Condition – Active = true
• Click Submit.

3. Create EVAM View Config Bundle M2Ms

• Open EVAM Definition > Catalog items list
• In related list, EVAM View Config Bundle M2Ms
• Click Create and Link
• Fill in the fields, as appropriate.
  • Name – Catalog items list
• Click Save.

4. Create EVAM View Config

• From related list of record we created in Step 3
• Click New
• Fill in the fields, as appropriate
  • Name – Catalog items list
  • Order – 100
  • Table – Catalog Item
  • Condition – Active = true (In view config we are repeating the condition because we can create multiple configs and associate template for each config based on its condition Like Priority 1 card may look different than priority 2)
  • Table fields – name,short_description,icon,image,category,sc_catalogs,category.description,category.title
• Click Submit.

5. Create Declarative Action for card navigation

We will define declarative action for the component and use it on UIB

• Goto EVAM View Config Action Assignment M2Ms related list
• Click Create and Link
• Fill in the fields, as appropriate
  • Action label – Navigation
  • Action name – navigation
  • Implemented as – UXF Client Action
  • Specify Client Action – navigation
  • Active – true
  • Click Submit

Great!! That’s it for this tutorial. In the next tutorial, we are going to create a template to show the card.