How to Configure a Card Grid
This tutorial shows you how to configure a "Card Grid" visual in your application. Read through our step-by-step instructions which are accompanied with sample screens for a better understanding and experience.
1. On the Workbench, start by clicking on the "New Screen" button.
2. Next, click the "Blank Screen" button.
3. Next, click on the "Web And Mobile" option in case you are building an application for both Web and Mobile or choose your relevant option.
4. Next, select "List View" as the Card Grid is a type of visual.
5. After selecting the action view, move to the "Set API" option. Here, you have an option to integrate your API's or select one of the available integrations. We are selecting "Cosmos DB" here.
6. Next, fill in the required fields to set up the API connection.
Here, we have filled in "Data Connection", "Model Name", "Operation", "Response Attribute", and "Page Size".
Listed below is an example to set up HTTP API connection.
7. Next, select "Card" view out of all the available options.
8. Next, select "Set UI" for the Card that you wish to display.
9. Here we select the "Profile" card.
10. Next, click on the "Refresh" button on the Display tab, which will help connect map data available across the API.
11. Map relevant image field for the "Image" of the Card.
12. Next, map all other fields required to be displayed on the card.
13. Card grid is configured.
Experience the sample Card Grid in the laptop screen below.