Brad Tilton

3 minute read

Last week we dove into creating and using data resources in UI Builder by binding the output from a data resource to component properties in order to make our components more dynamic. This week we’ll continue our UI Builder series by looking at the Entity View Action Mapper (EVAM) type of data source.

What if you want to show a data element as a card in a row, list, or a grid view, rather than one of the list components? You can take advantage of the new EVAM application and call your EVAM Definition from a data resource in UI Builder. You can then bind the output to a data set component to show a grid view of cards.

EVAM allows you to standardize how different data sources display in cards or lists. It’s useful for showing information as a card grid or list of information, but its real power comes as users can:

  • Page through large data sets.
  • See different views based on filtering.
  • See data from multiple data sources. EVAM allows you to get data from multiple sources, then configure specific views for each source.

The EVAM Overview page on the docs has a good breakdown of the flow, but it’s basically:

  1. Entity (datasource) - Your data
  2. Map - How your data maps to a card component
  3. View - How the card displays the data
  4. Actions - Actions on your cards

In the video below, I walk through creating an EVAM Definition and consuming it from within UI Builder to show records in a grid view on a workspace page.

Our rough steps are:

  1. Create an EVAM Definition.
    1. Create the EVAM Definition record - This is basically a parent record for your data sources and view configs.
    2. Create and link an EVAM datasource.
    3. Create and link an EVAM View Config Bundle
    4. Create a new EVAM View Config record under the bundle.
    5. Create a View Template and reference from the EVAM View Config.
    6. Create an EVAM Action Definition from the EVAM View Config
  2. In UI Builder, create a handled event on the page.
  3. Use an EVAM Data Resource to call the EVAM definition in UI Builder.
  4. Bind the output from the EVAM Data Resource to a Data Row component in UI Builder and configure the event mapping.

As you can see, EVAM is a powerful new application you can use in UI Builder to display multiple sources of data in the same grid or list of cards with paging and filtering.

More Resources

Make sure to check out the previous posts in this UI Builder series, and stay tuned for more posts every Wednesday through mid-March.

Have a UI Builder topic you’d like me to hit in a futuer post? Let me know on Twitter, LinkedIn, or slack (@btilton).