Featured Video Play Icon
2 mins read

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.

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.