Configuring the EXM user interface

Abstract

You can configure the infinite scrolling and the default sorting of columns in the EXM UI.

The Email Experience Manager uses the Angular framework for displaying the user interface. In the app-config.json file, you can configure the following elements in the EXM UI:

  • The number of campaigns loaded for lists and searches

  • The default sorting of columns for each List page

To find the app-config.json file, go to <Your Sitecore instance>\sitecore\shell\client\Applications\ECM\assets.

The app-config.json file contains the following json objects:

{
  "ListPageSize": 30,
  "SearchPageSize": 15,
  "CampaignListsDefaultSortings": [
    {
      "ListType": "DRAFTS",
      "SortingSettings": [
        {
          "id": "created",
          "direction": "desc"
        }]
     },
     ...
   ]
}

In the app-config.json file, you can configure these properties:

Property

Description

ListPageSize

Sets the number of items loaded on List pages. When an editor scrolls further down, the UI loads the next batch of the same number until there are no more campaigns to load. Loads according to the sorting configured under CampaignListsDefaultSortings.

SearchPageSize

Sets the number of items loaded in search results. When an editor scrolls further down, the UI loads the next batch of the same number, so the editor experiences infinite scrolling until there are no more campaigns to load. Loads according to the sorting configured under CampaignListsDefaultSortings.

CampaignListsDefaultSortings

Determines the default sorting in columns on the List pages Drafts, In Progress, Automated, Scheduled, and Sent Campaigns. You can configure an array with multiple columns in the default sorting. For more information see Example schema for default sorting.

When you configure your default sorting schema:

  • Use id to indicate the name of the column.

  • Use direction to indicate if the sorting should be descending (desc) or ascending (asc).

  • Do not use a comma after the last item in a section. A floating comma causes the UI to not load your changes.

  • The order of columns in the array determines the sorting order in the UI.

The following code is an example of how you can configure the CampaignListDefaultSortings property to have multiple columns in the default sorting.

{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "type": "object",
  "properties": {
    "ListPageSize": {
      "type": "integer"
    },
    "SearchPageSize": {
      "type": "integer"
    },
    "CampaignListsDefaultSortings": {
      "type": "array",
      "items": [
        {
          "type": "object",
          "properties": {
            "ListType": {
              "type": "string"
            },
            "SortingSettings": {
              "type": "array",
              "items": [
                {
                  "type": "object",
                  "properties": {
                    "id": {
                      "type": "string"
                    },
                    "direction": {
                      "type": "string"
                    }
                  },
                  "required": [
                    "id",
                    "direction"
                  ]
                }
              ]
            }
          },
          "required": [
            "ListType",
            "SortingSettings"
          ]
        }
      ]
    }
  }
}