Multi Content Type Item Template

There might be situations where different items might need to be rendered using different item templates. For this you can use the MultiContentTypeItemTemplate.

Using the MultiContentTypeItemTemplate

In order to use the MultiContentTypeItemTemplate in a certain widget, you need to specify that you want to use the item template with the configTypeKey "itemTemplate_multiContentType".

Any ConfiguredDataProvider properties mapper accepts among other types, an array of IConditionalPropertyMapping. With an IConditionalPropertyMapping you basically say "when an item retrieved by the data provider/data source meets the matchCondition, map it using the specified mappings and render it using the specified itemTemplate".

Sample configuration

Below you can see a sample configuration where the MultiContentTypeItemTemplate is used to configure a section within a Hero widget for LiveTiles Reach news. For the purpose of showing an example of how this functionality is used, the items for which the id is an even number will use the Simple Hero Item Template, whereas the ones for which the id is an odd number will use the Hero Section Item Template.

{
  "data": {
    "contentType": "News",
    "dataSource": {
      "configTypeKey": "userDataSource_reach_news",
      "propertyMappingsKey": [
        {
          "mappings": "propertyMapper_reach_news_simple",
          "itemTemplate": {
            "configTypeKey": "itemTemplate_heroSimple",
            "bulletRenderMode": "Left",
            "renderMode": "ImageLeft"
          },
          "matchCondition": {
            "expression": "!!(item.id % 2)"
          }
        },
        {
          "mappings": "propertyMapper_reach_news_simple",
          "itemTemplate": {
            "configTypeKey": "itemTemplate_heroSection",
            "renderMode": "Default"
          },
          "matchCondition": {
            "expression": "!(item.id % 2)"
          }
        }
      ]
    }
  },
  "itemTemplate": {
    "configTypeKey": "itemTemplate_multiContentType"
  },
  "icon": "condenselogo",
  "noBackgroundImage": false,
  "autoRotateInterval": 0,
  "connectableKey": "Hero_ReachNews",
  "actions": [
    {
      "configTypeKey": "widget_components_viewAllActionButton",
      "accentAction": false,
      "title": {
        "expression": "_mp.util.translate('viewAll')"
      },
      "showSourceButton": true,
      "actionKey": "action_viewAll"
    }
  ]
}