Build your first Card
3. Use the Card Designer
There is also a full reference documentation on using the Card Designer. This article will only cover some basics necessary for this Card Building 101 guide.
Now let’s look at how to add, remove, and modify elements from your Assistant 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.
This will take you to the Card Designer, as shown below.
The Card Designer toolbar is used to save your Card, delete elements from your Card, and refresh your Card's data.
- Clicking the floppy disk icon saves your Card.
- Clicking the trash can icon deletes the currently selected element, highlighted in green.
- The refresh icon refreshes the Card's data in Preview or Mobile Preview mode.
The Card Designer's tabs let you navigate between different configuration panes for your Card. A description of each tab is provided below.
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.
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.
This tab shows you an editor, with which you can modify the raw JSON content of the
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.
This tabs shows you a preview of how your Card will display in the Digital Assistant app. It uses the preview data specified in the Settings Tab
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.