Example - Create a RSS Feed Card

This guide will go through building an RSS News Feed Card. The finished result will look like this:

Finished RSS feed card

Now let's get started!

Creating a Connector

Since our Card is going to use external data, we need to build a connector which will give our card access to it. To do that, on the top left menu click on 'Content Manager', select 'Service Connectors' and click 'Create New Connector'.

Create a new connector

New Connector configuration

We're going to create a new connector with the following settings:

  • 'Connector Type' → 'RSS Feed Connector',
  • 'Authorization Type' → 'No Authentication',
  • 'Interface' → 'proxy',
  • We're going to set 'bbc-news' as our 'Name' and 'BBC RSS News Feed' as our connector's 'Title'.
  • In the 'Service Url' field we need to put the Url of RSS feed we wish to get. In this case we're going to use BBC News RSS Feed.
  • It is important to also tick the 'Convert XML to JSON' checkbox as this will parse the date in a format that we can easily use in our card layout later on.

After setting the roles and the owner we can save the connector.

News RSS feed connector configuration

Creating Card component

We have covered the creation of a new component in a previous guide. Therefore, for this guide we will just cover the configuration necessary for our new component.

RSS Service types

The RSS Feed Connector provides 3 separate services that can be used in Components:

RSS feed connector services

  1. All meta properties

    If the RSS feed you wish to use does not provide the Url for thumbnails in the feed this service will load each referenced page, locate the twitter:image:src and og:image meta tags and extract the thumbnails. Loading each page can take some time, therefore if the feed you're using provides thumbnails you should use the fast method.

  2. Fast

    Assumes that Urls for the thumbnails are specified in the feed and allows you to use them directly.

  3. Generic proxy

    Proxy is meant to be used if you just wish to forward the data, therefore it will not process the data or make it available to use in the Card.

Configuration of values

For this card we're going to select:

  • 'Template type' → 'Card',
  • 'Template' → 'Basic Card (with API proxy)',
  • 'Service Type' → 'Service Connectors',
  • In the 'Connector' field we're going to select our newly created connector and select 'Feed (fast)' option in the 'Service'.
  • We're going to set 'template-news-card' as our 'Component Name' and 'News' as our 'Title'.
You cannot use spaces in the component name, use hyphens ("-") instead.
  • For 'Roles allowed to view this content', we're going to pick 'Authenticated' and leave 'Audiences' empty as we want all logged in users to have access to this card.
  • Let's not forget to tick the 'Show in My Apps' checkbox, in order for our card to be visible in the card store.

Select the 'fast' service for the rss card

Click 'Save' and you should be able to see your newly created component in the components list:

New component in the list of newly created components

Editing Card layout

To edit your card's layout, you need to go inside the Designer for your component:

Click on designer

Before we start adding elements and changing the card layout, let's first of all check that we're getting the data from our RSS feed. In the Designer let's navigate to the 'Settings' tab. Here, we don't see the JSON data at the start, which means that we should select our newly created connector in the 'Preview Card Definition' option and make sure that 'Preview Mode' is set to 'Live data':

Set card Designer settings

Now that we know that RSS feed data is available to our layout let's navigate back to the 'Elements' tab and select the 'content' element (which is bellow the title). In the 'view' text box we're going to put the following code:

<style>
  .news-list-image {
         height: 80px;
    width: 105px;
    background-color: lightgray;
  }
</style>

<div class="layout-vertical">
{% for item in items | limit: 6 %}
 <div class="layout-horizontal  {% if forloop.index > 3 %}expanded-only{%endif%}">
  <at-link class="layout-flex" href="{{item.link}}" label="{{item.title | escape }}">
    <div class="layout-horizontal mx mbsm mtsm">     
       <div class="layout-flex text-primary">
          <at-carbon-clamp lines="2" class="font-subhead primary">{{item.title | truncate: 70, ""}}</at-carbon-clamp>
          <at-carbon-clamp lines="2">{{item.description | truncate: 160, ""}}</at-carbon-clamp>  
      </div>
    {% if item.thumbnail %}
      <div class="ml mtsm">
        <iron-image sizing="cover" preload class="news-list-image" src="{{item.thumbnail}}">        
      </div>  
    {% endif %}
    </div>
  </at-link>
 </div>
{% endfor %}
</div>

If you click on the 'view' text box you can toggle to a full screen mode of the code editor by pressing Esc.

This code will create a card that loops through the JSON information we get from our RSS feed and input elements within it. We are using Tangere elements such as <at-carbon-clamp> to make the card creation process easier.

If you would like to know more about Tangere elements click here.

It is also worth noting that the Card uses predefined CSS classes that are based on flex layout such as layout-horizontal.

To learn more about the flex-based CSS classes available to use when building Cards, please have a look here.

Extra features

There's a range of advanced features that can be added to Now Assistant cards to extend their functionality. For example, our card has an expandable footer toggle that expands to show more articles when clicked. Please have a look at the advanced features article for information on how to create an expandable footer.

You can use a version control system such as Git with your Cards.

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