Part 28: Understand EVAM template

Let’s look at the final page after we have added the EVAM component on the Catalog page and understand how different details are showing up

EVAM template sources

• For highlighted header background color check what different options are available HERE
• For the icons, check what options are available HERE.
• Let’s check the snippet below

"subtitleIcon": {
      "translatable": false,
      "key": "calendar-fill"
    },
    "subtitleImageType": {
      "translatable": false,
      "key": "avatar"
    },
    "imageType": {
      "translatable": false,
      "key": "image"
    },

• Imagetype could be “avatar”, “icon” and “image”.
• For each of the type above give following mapping properties

 "imageURL": "picture",
 "subtitle": "short_description",
 "subtitleAvatarName": "name",
 "subtitleAvatarURL": "icon",

• So, imageType is associated with imageURL from the mapping section
• If subtitleimagetype is Avatar, add subtitleAvatarName and subtitleAvatarURL in mapping section
• If you want to use at subtitle then have following snippet in Staticvalues section.

"subtitleIcon": {
      "translatable": false,
      "key": "calendar-fill"
    },
    "subtitleImageType": {
      "translatable": false,
      "key": "avatar"
    },

• Next, we will see how to add a navigation so that it opens the correct catalog item detail page upon clicking

"actionMappings": {
      "clickAction": "navigation"
  } 

Great!! So after this tutorial, you will be able to play around with different options what you in your EVAM card to fit your need.