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

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

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

Got an issue? Or want to submit feedback?
Submit your feedback

Our new Feedback and Issue Tracker is built on GitHub Issues. Just leave your comment below and you can track our team resolve it, or browse issues others have already submitted.

Read how to use the Feedback and Issue Tracker