Step 3: Configure the tile for custom channel

Custom channel is exposed as a “tile” in the customer journey designer. You define the tile using 2 files: an XML file and a CSS file.

Define the Tile XML file

Define tile properties of the custom Tile in an XML file. The XML file name should be in the following format: <SolutionPublisherPrefix>_<FileNamePrefix>CustomerJourneyDesignerTileConfig.xml.

For example, if you want to use SpecialTile as the name for your XML file then the file name will be the following assuming the solution publisher prefix in your Dynamics 365 Marketing instance is "sample": sample_SpecialTileCustomerJourneyDesignerTileConfig.xml

Sample Tile XML file

The following is a sample Tile XML file. Description of the elements in the XML file is available later in this topic:

<?xml version="1.0" encoding="utf-8"?>
<!-- file name should only contain alpha-numeric characters and underscore -->
<!-- format: <fileNamePrefix>CustomerJourneyDesignerTileConfig.xml> -->
<LibraryTile>
  <!-- mandatory -->
  <!-- icon: CSS class defining your tile icon-->
  <!-- fontFamily: CSS class defining font-family for your icon-->
  <!-- cssFileName: your CSS file name in CRM-->
  <Definition icon="sample_SpecialTile" fontFamily="sample_SpecialTileSymbolFont" cssFileName="sample_SpecialTileCustomerJourneyDesignerTileConfig.css" />
  <!-- mandatory -->
  <ChannelProperties>
    <!-- mandatory -->
    <EntityType>sample_specialmessage</EntityType>
    <EntitySetName>sample_specialmessages</EntitySetName>
    <TitleFieldName>sample_name</TitleFieldName>
    <ComplianceField>donotphone</ComplianceField>
    <!-- optional -->
    <!-- Lookup view id for your entity-->
    <LookupViewId>4112769C-F12D-4F63-B8C3-9068FECBB4E9</LookupViewId>
    <!--Insights form id for your entity -->
    <InsightsMainFormId>6370c410-6dd5-43f5-b1d1-7b757992d2de</InsightsMainFormId>
    <!--Quick view form id for your entity -->
    <QuickViewFormId>404BA31B-2C12-4233-8711-804B78DE1267</QuickViewFormId>
  </ChannelProperties>
  <!-- optional -->
  <ResponseTypes>
    <ResponseType id="sent">
      <Labels>
        <!-- Labels should always have a Label for 1033 -->
        <Label locId="1033">Sent</Label>
        <Label locId="1031">[Sent]</Label>
      </Labels>
    </ResponseType>
    <ResponseType id="delivered">
      <Labels>
        <!-- Labels should always have a Label for 1033 -->
        <Label locId="1033">Delivered</Label>
        <Label locId="1031">[Delivered]</Label>
      </Labels>
    </ResponseType>
    <ResponseType id="keyword" custom="True">
      <!-- there should be only one response type with attribute custom=true -->
      <Labels>
        <!-- Labels should always have a Label for 1033 -->
        <Label locId="1033">Keyword match</Label>
        <Label locId="1031">[Keyword match]</Label>
      </Labels>
    </ResponseType>
  </ResponseTypes>
  <!-- mandatory -->
  <Labels>
    <!-- Labels should always have a Label for 1033 -->
    <Label locId="1033">Special</Label>
    <Label locId="1031">[Special]</Label>
  </Labels>
  <!-- mandatory -->
  <Tooltips>
    <!-- Tooltips should always have a tooltip for 1033 -->
    <!-- mandatory -->
    <Tooltip locId="1033">Custom Tile tool tip</Tooltip>
    <!-- optional -->
    <Tooltip locId="1031">[Custom Tile tool tip]</Tooltip>
  </Tooltips>
</LibraryTile>

Tile XML file elements

The XML file has the following elements:

  • Definition: Defines the icon by specifying the following properties:

    Property Description
    icon CSS class defining your tile icon. This definition is available in your CSS file.
    fontFamily CSS class defining font-family for your icon. This definition is available in your CSS file.
    cssFileName Your CSS file name containing the definitions.

    Example:

    <Definition icon="sample_SpecialTile" fontFamily="sample_SpecialTileSymbolFont" cssFileName="sample_SpecialTileCustomerJourneyDesignerTileConfig.css" />
    
  • ChannelProperties: Contains information about the custom entity that you created to store and manage data related to your custom channel.

    Element Description
    EntityType Logical name of the custom entity.
    EntitySetName Collection name (plural name) of the custom entity.
    ComplianceField Contains a boolean attribute of the Contact entity whose value determines whether an instance of the Custom Channel Activity (msdyncrm_customerjourneycustomchannelactivity) entity is created when the Contact record goes through a customer journey.

    For example, if you set the value of this element to donotphone:

    <ComplianceField>donotphone</ComplianceField>



    The value of this attribute will be checked for a Contact record while going through a customer journey and an instance of the Custom Channel Activity entity will be created only if the value of the donotphone attribute for the contact record is false.

    LookupViewId Lookup view ID for the custom entity. Optional.
    InsightsMainFormId The marketing-insights service form ID for the custom entity. Optional.
    QuickViewFormId Quick view form ID for the custom entity. Optional.
  • ResponseTypes: Add information about the expected reponse types. The id property defines the name or the Id of a response type. The Labels element lets you specify localized labels for the response type. Use the locId property in the Label element to specify localized label names. For example:

    <ResponseTypes>
      <ResponseType id="sent">
        <Labels>
        <!-- Labels should always have a Label for 1033 -->
          <Label locId="1033">Sent</Label>
          <Label locId="1031">[Sent]</Label>
        </Labels>
      </ResponseType>
    </ResponseTypes>    
    
  • Tooltips: Provides tooltip for the tile; can also specify localized values using the locId property. For example:

    <Tooltips>
      <!-- Tooltips should always have a tooltip for 1033 -->
      <!-- mandatory -->
      <Tooltip locId="1033">Custom Tile tool tip</Tooltip>
      <!-- optional -->
      <Tooltip locId="1031">[Custom Tile tool tip]</Tooltip>
    </Tooltips>
    

Define the Tile CSS File

Define the style of the custom channel tile in a CSS file. Make sure that your Tile CSS file name matches to the file naming convention for the Tile XML file, and matches the value that you specified in the cssFileName property of the Tile XML file.

For example, in this case, your Tile CSS file name will be: sample_SpecialTileCustomerJourneyDesignerTileConfig.css

The following is an example of a CSS file where the font styles are defined using the same prefix name (sample_SpecialTile) that you used in the Tile XML file earlier to refer to the font styles:

@font-face {
    /* The font-family name should be unique. Recommendation: use the config (XML) file name generated without the file extension */
    /* Assuming the config file name is 
sample_SpecialTileCustomerJourneyDesignerTileConfig.xml so the example uses 'sample_SpecialTileCustomerJourneyDesignerTileConfig' below*/
    /* format: font-family: '<config xml file name generated by CRM>' */ font-family: 'sample_SpecialTileCustomerJourneyDesignerTileConfig';
    src: url('data:font/opentype;base64, <fontInBase64String=>') format('woff');
}

/* The fileNamePrefix is determined from the configuration (XML) file name: 
<YourConfigFilenamePrefix>CustomerJourneyDesignerTileConfig.xml */
/* Example: config file 'sample_SpecialTileCustomerJourneyDesignerTileConfig.xml' */ /* Then the prefix is 'sample_SpecialTile'*/

/* format: <fileNamePrefix>SymbolFont */
.sample_SpecialTileSymbolFont {
    /* font-family value defined in the font-face directive */ font-family: 'sample_SpecialTileCustomerJourneyDesignerTileConfig';
}

/* format: <fileNamePrefix>::before */
.sample_SpecialTile::before { /* your tile icon code */
    content: "\f099";
}

/* format: #libraryElementCustom_<fileNamePrefix>  > span.lib-iconContainer */
#libraryElementCustom_sample_SpecialTile > span.lib-iconContainer { /*background color for your tile icon in the library panel*/
    background-color: #0072c6;
}

/* format: .Custom_<fileNamePrefix> span.tileImageWrapper */
.Custom_sample_SpecialTile span.tileImageWrapper {
    /*background color for your tile icon in the library panel*/ background-color: #0072c6;
}

/* format: .Custom_<fileNamePrefix>.tileOutline.selected */
.Custom_sample_SpecialTile.tileOutline.selected {
    /*Color for border; Rendered when your tile is selected*/ border-color: #0072c6;
}

/* format: .Custom_<fileNamePrefix>.tileLeftBorder */
.Custom_sample_SpecialTile.tileLeftBorder {
    /*Color for left border rendered on the tile when drawn on canvas*/ border-left-color: #0072c6;
}