Card Designer

Now let’s look at how to add, remove, and modify elements from your Now Card.

You can navigate to the Designer from the directory your Card is stored in. As per the previous article, this will be spaces/global/components. Find the .card file, and click the "Designer" link to the right.

Card Designer Button

This will take you to the Card Designer, as shown below. Along the top you’ll notice the Save button and then the Designer's tabs. These are as follows:

Card Designer Interface

Elements

This tab lets you view and modify the elements that make up your Card. If you followed the last tutorial, you'll have a Card Title, and a Liquid View element.

The Card Title will automatically take the name of the Card you specified when you created the Card component. The Liquid View lets you use HTML and Liquid to display and layout data in a custom fashion.

For a full guide on Liquid, please see our Liquid documentation.

To remove an element from the Card, you can click the "Remove" button at the bottom of the page.

Add Elements

This tab gives you a list of elements on the left, and a preview of your Card on the right. You can add new elements to the card by clicking and dragging the item from the list, to the preview on the right. You can place it before or after any other item on the Card, by adjusting where you drop the element.

Once added, you will see a preview of the elements layout.

Schema

This tab shows you an editor, with which you can modify the raw JSON content of the .card definition.

Settings

The Settings tab allows you to modify where the Card is getting it's data from. Any settings you apply here will apply to the card Preview.

Preview

This tabs shows you a preview of how your Card will display in the Now Assistant app. It uses the preview data specified in the Settings Tab

Mobile Preview

This tab also shows a preview of your Card, but here it shows the Card as it appears on a mobile device with certain responsive classes showing, if used.

Last updated: Sun 01 Oct, 2017