Now Assistant
Tangere Elements

Making an RSS News Feed Card

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

Finished News Card look

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.

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 'Generic Feed' option in the 'Service'.

  • We're going to set 'template-news-card' as our 'Component Name' and 'News' as our 'Title'.

Please note, 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.

News component configuration

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;
  }
</style>
<div class="container layout-vertical news-list m">
  {% for item in items | limit: 7 %}
 <div class="news-item layout-horizontal mbsm">
   <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>

Note: If you click on the 'view' text box you can toggle full screen mode of the code editor by clicking the 'Esc' key.

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

If we navigate to the 'Preview' tab we can see how our card looks like:

News card preview

Almost there, but let's make this card slightly more compact. We can achieve this, whilst still maintaining all the content by adding an expandable footer button. 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, we need to add a conditional check in our content's code to make sure it adds the appropriate CSS class for our toggle to work 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">
  {% for item in items | limit: 7 %}
 <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>

Finally our card looks like this!

Final News card

Using Version Control

You can use a version control system such as Git with your created cards. You can find more about how to do so here.

Last updated: Sun 01 Oct, 2017