Adding Data to the Card

“Edit” your card in the Files folder again and look for the Sample Data Editor in the lower right corner. Paste in the following JSON:

{
    "dataSource": {
        "url": "https://random-data-api.com/api/coffee/random_coffee"
    },
    "data": {
        "blend_name": "American Blend",
        "origin": "Casanare, Colombia"
    }
}

The “url” field here is a sample REST API that returns the JSON data that we want to display in our card. You can click it to try it out. You can also use your own data REST API here as long as it returns JSON. The “data” field here shows you the format that is returned from the API. We will use these fields to design the card.

https://random-data-api.com/api/coffee/random_coffee

{"id":6969,"uid":"3a9b0728-2c93-455f-8ca8-af1eea16f375","blend_name":"American Blend","origin":"Casanare, Colombia","variety":"Sarchimor","notes":"juicy, juicy, bakers chocolate, black cherry, bergamot","intensifier":"tart"}

Binding Data to the Layout

Now that you have sample data to work with, you can reference it in your form layout like this …

Add a “Column Set” with two columns for the label and the data.
Add a “Text Block” for the Blend Name label to column one.
Add a “Text Block” for the blend_name data to column two.

Press the “Preview mode” to verify that your data has been bound correctly.

Graphical user interface, text, application

Description automatically generated

Testing your new card

Save your card and drop it onto the board again. Every time you press the “Refresh Data Source” button, the API will get called and your JSON data will be shown in the card.

Graphical user interface, application

Description automatically generated

You can continue to add more fields from your data source to your layout in this same way. For more details on laying out cards and binding data, please see these references: