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.
