Create a News Feed Card

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

Finished RSS feed card

Now let's get started!

Create a new Connector

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

Create a new connector

New Connector setup

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

  • We're going to set 'bbc-world-news' as our Name and 'BBC RSS News Feed' as our Connector's Title.
  • Connector Type → 'RSS Feed Connector',
  • Authorization Type → 'No Authentication',
  • Interface → 'proxy',
  • 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 data in a format that we can easily use in our card layout later on.

BBS World News RSS feed connector configuration

After you have saved the Connector, Our new Connector will be created and it will be displayed in the list.

Listed BBC RSS News feed connector

Create a New Card Component

To Create a new Card Component follow the previous guide.

Navigate to Content Manager→Now Cards in the left hand menu to find your newly created Card Component. Click the 'Edit' option for your Card Component to access the panel where you can configure its Service Connectors.

List of the existing card.

RSS Service Types

To configure the Service Connectors we need to modify the Service Type, Connectors and Service.

The RSS Feed Connector provides 3 separate services depending on the structure of your RSS feed.

Details of service type, Connectors and service.

Explanation of each Service:

RSS feed connector service Details

  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.

Design a Card

To design the Card, select the Designer of your Card Component by below navigation.

Development → Manage Space → Global → Components →my-first-card

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 in a 'Preview data' textbox 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'.

Tip: If the JSON Code doesn't show try to toggle between Preview and back to Settings.

Set card Designer settings

Now we know that RSS feed data is available to our Card layout. Let's navigate back to the Elements tab and select the 'content' element (which is below the title). Select the following code and paste it in your'view' text box.

<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.

Configure Metadata

After designing our Card the last step is to define where and when it shows up in the Now Assistant app. Follow our guide Modify Card Metadata to know more in detail.

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.