Example - Create a Liquid Card

Now we're going to create a slightly more advanced Card that shows one message or another depending on the input we receive from our Connector.

In our example we are building a Travel Advisory Card that uses the RSS Feed from San Francisco's BART network. If the RSS Feed reports no incidents we show the user a green thumb, but if we receive a report we will show an orange triangle allowing the user to check out the reports.

This is what the end result will look like:

Travel Advisory Card Travel Advisory Card with service warning

The condition on which we decide what to show to the user can be configured inside the Card with the Liquid template language which we will demonstrate below.

Creating the Connector

As we're going to be pulling in data from a new source, we're going to create a new Connector for it.

The first step is to go to "Content Manager" in the left hand menu, and then the "Create" button in the top right. This will open the "Create New Content" wizard.

New content creation wizard

RSS Feeds form part of Service Connectors, hence we will select the first choice, "Connector".

New Connector wizard

Here, we need to give our connector a unique name. For the purposes of this article, lets call it travel-advisory.

You cannot use spaces in the unique name, use a hypen ('-') instead.

For the connector name we're going to call it Travel Advisory.

From the "Connector Type" dropdown list and select RSS Feed Connector. This type of connector reads an RSS XML feed, and automatically translates it into the correct JSON format for us to use. Perfect!

Next, we enter the URL of our RSS feed into the "Service Url" field. For this article we're using

https://www.bart.gov/schedules/advisories/advisories.xml

Now we're done! Lets save the connector and move onto the next step.

Creating the Card

The first step is to create our card from an existing template that we can then modify.

As show previously, we're going to go through the Development menu on the left hand side, and go to the components folder.

Development → Manage Spaces → Global → Components

Here we're going to click on the 'New Component' button in the top right, to start creating our new Card.

Creation Wizard

From the 'Template Type' dropdown, we choose 'Card', and then we choose 'empty Card' for our template. This is different from the video card, as we're not going to be using any test data, just our custom service connector.

Finally, we want to add the "Authenticated" role to the Audiences, so that anyone logged in will be able to see our Card.

Now click 'Create' at the bottom of the page to create our card! This will drop you into the folder for the new Card.

Travel Advisory Folder

Modifying the Card's layout

Now we want to go to the Designer for this card.

Here we want to display the data from our feed. So we can see the results of our liquid view with real data, lets head to the "Settings".

Here we want to change the "Preview Mode" to Live data. This way, the preview tab will show us our card with actual data.

Liquid content

The main work of this card is done in a Liquid View element. This element displays the content, formatted with the liquid templating language.

Replace the default content of the liquid view with the following markup.

<at-link href="{{url}}">
    {% if rss.channel.item[0].title == 'There are no BART service advisories.' %}{% assign goodService = true %}{% endif %}
    <div class="container layout-horizontal p">     
        <div class="layout-flex">
            <div class="font-title font-bolder text-secondary">
                {% if goodService %}
                Good Service    
                {% else %}
                Service Changes
                {% endif %}
            </div>
            <div class="font-body1 text-primary">
                {% if goodService %}
                {{rss.channel.item[0].description}}   
                {% else %}
                There are {{rss.channel.item.length}} reports on your public service line.
                {% endif %}
            </div>
            {% unless goodService %}
            <at-carbon-signal-button class="background-blue mt" signal="now-card-action" signal-data="dialog|{{_card.Id}}|">View Details</at-carbon-signal-button>
            {% endunless %}
        </div>
        <div class="container layout-horizontal layout-center p" >
            {% if goodService %}
            <at-carbon-icon icon="now:thumb-up" class="green" style="height:50px;width:50px;"></at-carbon-icon>
            {% else %}
            <at-carbon-icon icon="now:warning-filled" class="orange" style="height:50px;width:50px;"></at-carbon-icon>
            {% endif %}
        </div>
    </div>
</at-link>
<style>
    .font-title {
        white-space: inherit;
    }
    .flex-center-align {
        @apply(--layout-horizontal);
        @apply(--layout-center);
        height: 120px;
    }
</style>

This content checks if there are any travel advisories, and if so, displays the number alongside a big yellow warning shield. If not, the user is told as such, and show a big green thumbs up.

Travel Advisory Card

Travel Advisory Card with service warning

Save, and navigate to the card folder.

Creating a Modal

When the user clicks on the "View Details" button, we want a modal with the service change details to be displayed on a pop-up modal window. In order to do this, we're going to create a secondary dialog card.

To do this, click the "New File" button on the top right, and choose "Card" from the dropdown. We're going to call it dialog.

Card folder buttons

Open dialog.card in the designer. By default, it is an empty card with no elements. Add a Liquid View element to it.

Travel Advisory dialog card in the designer interface

Here, need to change the value of "modelRoot" to point to the same value as our main card, so they access the same data. Change it to state.model.

Now change the liquid view's "view" parameter to the following markup.

{% for post in rss.channel.item %}
    <div class="container layout-horizontal p">     
        <div class="layout-flex">
            <div class="font-title font-bolder text-secondary">{{post.title}}</div>
            <div class="font-body1 text-primary">{{post.description}}</div>
            <a href="{{post.link}}"><div class="font-subhead text-secondary">Click for Details</div></a>
        </div>
        <div class="container layout-horizontal layout-center p" >
            <at-carbon-icon icon="now:warning-filled" class="orange" style="height:50px;width:50px;"></at-carbon-icon>
        </div>
    </div>
    {% if forloop.last != true %}
    <hr />
    {% endif %}
{% endfor %}
<style>
    .font-title {
        white-space: inherit !important;
    }
    .flex-center-align {
        @apply(--layout-horizontal);
        @apply(--layout-center);
        height: 120px;
    }
</style>

How it works

The key to how this modal works is in this line in the default.card file.

<at-carbon-signal-button class="background-blue mt" signal="now-card-action" signal-data="dialog|{{_card.Id}}|">View Details</at-carbon-signal-button>

This creates a special button that loads the dialog card whenever it is pressed. If dialog.card had a different name, that name would go before || in the above example, instead of dialog.

And that's it! You now have a card that shows travel advisories!

Extra features

There's a range of advanced features that can be added to Now Assistant cards to extend their functionality. 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