Digital Assistant is heading to Intra.NET Reloaded Boston | April 4-5, 2019 | Boston, MA Learn more ×

Appearance Preferences

This article will walk you through the steps to add appearance preferences to a Card in Digital Assistant.

As a basis for this article, we will use the employee list card created in the endlessly scrolling card guide, so please follow that guide first and return here when you have the functioning card.

Now, follow the below steps to add a preference to the card that allows you to toggle the display of employee avatars.

First create a file customize.form in the card folder (depending on the template which was used to create the card, customize.form may already exist).

Enter the Designer for customize.form, select the Schema tab, add a toggle element from the elements tab, set the Label to 'Show Avatars', Name to showAvatars, and value to true. Verify the configuration is correct by opening the Schema tab, and checking that it matches the following:

customize.form schema

Next, enable customization for the card by entering the designer for default.card, selecting the title element and checking the Customizable option:

enable customization

Finally, because this card uses a separate item.card to render each item in the list, we need to add some code to the connector to read this setting value andprovide it to each item, so that we can then read it from the returned item, within item.card.

Navigate to Development → Manage Spaces → Global → Connectors → employee-list-connector, Edit employee.js, and add the following line to the convert_item function:

item.showAvatar = activity.Context.ContentItemSettings.showAvatars;

The entire function should then look like this:

function convert_item(_item) {
    var item = {};

    let id = _item.picture.large;
    id = id.substring(id.lastIndexOf("/") + 1); // extract id from image name = id.substring(0, id.indexOf("."));

    item.title = + " " +;
    item.description =;
    item.picture = _item.picture.large;

    item.showAvatar = activity.Context.ContentItemSettings.showAvatars;

    return item;

The last step is then to add markup to item.card to read this value. Navigate to Development → Manage Spaces → Global → Components → new-hires, enter the Designer for item.card, and replace the view markup for the main element with the following:

<div class="layout-horizontal layout-center">
  {% if showAvatar %}
      <iron-image src="{{ picture }}" style="width:60px; height:60px; background-color: lightgray;" sizing="cover" preload></iron-image>
  {% endif %}
  <div class="m">
    {{ title }}

We should now be able to see the following option on the card in Now workplace:

card customize menu

Upon selecting this option, the customization form we created should now appear:

card customize form

After switching the toggle off and pressing _Ok_, the card should reload without avatars present.

card without avatars