Just released: Developer preview of Microsoft Teams bot integration for Now Assistant. Try with your Teams ×

Advanced Card features

Now Assistant cards can be embedded with a range of advanced features that can improve styling, provide additional functionality and boost responsiveness. These features can be added directly to the card template via the Card Designer.

In this article we'll be continuing on from the RSS News Feed Card which we created in the previous article and add some extra features, such as: adding an expandable button, mobile responsiveness and activity tracking. Let's begin!

A. Expanding and collapsing a Card

Cards can have two states, expanded or collapsed. When you first view a Card it is considered collapsed and the user can then expand it to reveal or hide certain sections within the Card.

Expandable content

In our previous guide our news card was limited to only 3 articles. We could have expanded that number by limiting the number of rendered items to say 5:

  {% for item in items | limit: 5 %}
     Card code...
  {%endfor%}

However, that would result in a rather tall card which takes a significant amount of space on the screen:

Tall RSS news card

We can add an expandable footer button at the bottom of our card to maintain all 5 articles, but only display 3 of them at the start.

Inside the card Designer let's click on 'Add Element' tab and select a 'Footer' element.

Here, by ticking the 'expandable' checkbox we can add a button that will interact with a CSS class on our card container to signal that it was clicked, which we can use to expand and shrink our card's content.

We will also add a link to the original RSS feed source in the 'href' field and create a label for it.

Footer element configuration

Finally, for our toggle to work we need to add a conditional check in our content's code to make sure it adds expanded-only CSS class and limits the number of displayed news articles to 3 unless expanded. The final code looks like this:

<style>
    .news-list-image {
 height: 80px;
    width: 105px;
  }
</style>
<div class="container layout-vertical news-list m">
{% raw %}
  {% for item in items | limit: 5 %}
  <div class="news-item layout-horizontal mbsm {% if forloop.index > 3 %}expanded-only{%endif%}">
    <div class="mr mtsm">
      <iron-image sizing="cover" class="news-list-image" alt="Placeholder Title" src="{{item.cardimage}}"></iron-image>
    </div>
    <div class="layout-flex">
      <at-link href="{{item.link}}" class="font-subhead primary">
        <at-carbon-clamp lines="2">{{item.title}}</at-carbon-clamp>
      </at-link>

      <at-carbon-clamp lines="2">{{item.description}}</at-carbon-clamp>
    </div>
  </div>
  {%endfor%}
</div>

Our card will now only show 3 articles, but will also have a toggle that can expand the card to show all 5 articles:

News card with an expandable button

Collapsible content

Additionally, there is a collapsed-only CSS class which may be useful in certain situations. For example, take the following expandable card where we want this overview section to disappear when the card is expanded:

Approvals card collapsed

We can add the class collapsed-only to the top section's element as follows:

Adding collapsed-only CSS class

Now, we see that once the card is expanded, this section disappears:

Expanded card with header section hidden

B. Mobile and Desktop only classes

During development you may find that some content should be hidden on devices of certain screen width. For example, shown on desktops but hidden on portable devices. This can be achieved by adding a desktop-only or mobile-only to your content:

<div class="mobile-only">
  This will only be visible on portable devices
</div>

<div class="desktop-only">
  This will only be visible on desktops
</div> 

Every time a user interacts with a Now Assistant card a cardaction event is emitted. We can use these events to gather specific data from the user interactions with the cards. For our news card example, let's say we wish to find which news articles are the most popular today. We can embed each link in our news card to contain a special label attribute. Then, whenever a user clicks on a link, content that's in the label attribute will be sent as the label field in the cardaction event.

To find out more about different card events and fields please look at the Analytics section.

To find which news articles are the most popular let's add the titles of the articles in the label attribute:

<div class="container layout-vertical news-list m">
  {% for item in items | limit: 5 %}
    ... more code above

    <div class="layout-flex">
      <at-link label="{{item.title}}" href="{{item.link}}" class="font-subhead primary">
        <at-carbon-clamp lines="2">{{item.title}}</at-carbon-clamp>
      </at-link>

      <at-carbon-clamp lines="2">{{item.description}}</at-carbon-clamp>
    </div>
  {%endfor%}
</div>

Now we can see that whenever we click on a link:

News link in Now Assistant

if we look into Kibana dashboard it transmits the title of our clicked link as the label field:

Link field in Kibana