Managing Card Component

The Card Component lets you display a repeating layout for each item in an array from a data set. You define the layout once, and it’s automatically applied to every item in the list. This is useful for displaying things like records, profiles, or summaries in a consistent format.

Each card uses the same layout template and is bound to its own item in the array. You can’t directly access other items in the array or the full array from inside an individual card.

Appearance Settings

The Card Component includes standard appearance settings, such as size and position, background, text, padding (for details on standard appearance settings, check the Altering the Appearance of an App Studio Component article) and specific styling options: Component layout, Card appearance, and Card layout.

• Use Component layout to arrange the cards within the Component.
• Use Card appearance options to customize size, text, and other appearance settings of the card.
• Use Card layout to arrange the inner Components displayed in each Card.

Configuration Settings

The following settings are available in the Configuration tab for the Card Component:

Example: Displaying a List of Users with the Card Component

In this example, we will show how to use the Card Component to display a list of user profiles. You will need to provide the user records, which you can do by connecting to an external API or by creating a data table manually within App Studio. Each card will present the user’s first name, last name, and avatar image.

Step 1: Add a Data set

Prepare a Data set. Use a data source containing user records with fields like firstName, lastName, and image.

Step 2: Add the Card Component

1. In the Components panel, go to Data > Card.
2. Drag the Card Component onto the canvas.
3. In the Configuration tab, set:
   Data set: Select your user data source.
   Data path: Provide the path to the array of users.
   
4. (Optional but recommended) Rename your Card component for easier referencing, for example, Card-Users instead of Card-0-46-0.

Step 3: Add components inside the card

1. Select the Card Component on the canvas.
2. Drag a Text Component inside the Card layout.
3. In the Configuration > Text field, enter:
   {{<Card component ID> card data.firstName}} {{<Card component ID> card data.lastName}}
   
   <Card component ID> is a data set created by the App Studio. Replace <Card component ID> with the actual data set name generated for the card (for example, Card-0-46-0, Card-Users).
    
4. Drag an Image Component into the Card.
5. Set the Data set for the Image Component to match the Card's data set: <Card component ID> card data.
6. For the Data source, select the appropriate field.
   
    

Step 4: Preview the App

Preview the App to see the result. The Card Component will render one card per user, showing the user's full name and avatar.

Example: Taking Actions on Cards

In this example, we build on the previous setup from Example: Displaying a List of Users with the Card Component . Each card will include a Select button that allows users to choose a person. When you click the Select button, a detail view populates with the user's information.

Step 1: Reuse the Card Component

Continue using the Card Component set up in the first example. It should already display a list of users, each showing a name and avatar.

Step 2: Create an App variable to store the selected user

1. Go to App > Configuration > Data sets.
2. Click Add data set and configure it as follows:

   
   

   
   
   

   Setting	Description
   Name	selectedUser
   Type	Variable
   Expression	Leave empty

This variable will hold the data of the user selected via the button.

Step 3: Create an Action Sequence to set selectedUser

1. Go to the Action Sequences tab ().
2. Create a new action sequence with the following settings:

1. Name of the Action Sequence: SelectUser.
2. Input variables: Add a variable called cardData.
3. Actions: Add a new Action with the following parameters:
   
   

   Setting	Description
   Action	Set a variable
   Variable to set	selectedUser
   Value to set	{{{cardData}}} Note: Triple braces ({{{...}}}) are required to pass the full object correctly.

   
   

Step 4: Add a Select button

1. Inside the Card layout, add a User interaction > Button Component.
2. Set the Text property to: Select.
3. Scroll to Event handlers and click New event handler.
4. Configure the event:
   
   

   Setting	Description
   Handler name	View details
   Event type	Click
   Action	Call an action sequence
   Action sequence to call	Set a variable
   cardData	{{{Card-XXX card data}}}   Replace Card-XXX with the actual Card component ID shown in your App (e.g., Card-0-46-0, Card-Users).

   
   

Step 5: Wrap selectedUser with a JavaScript Data set

The selectedUser variable needs to be wrapped in a JavaScript data set to make the data available to components like Form.

1. Go to App > Configuration > Data sets.
2. Click Add data set with the following settings:
   
   

   Setting	Description
   Name	selectedUserJS
   Type	Javascript
   Inputs	Data set: selectedUser Required: enabled
   Output	Output data type: Object   Add the fields you want to be displayed in details, for example: firstName lastName email You can include additional fields as needed to be displayed in the user’s detail view.
   Code	return inputs.selectedUser;

   
   

Step 6: Add a detail view to display the selected user

1. In Components > Data, drag a Form Component onto the canvas. Make sure this Form is outside of the Card Component.
2. Configure the form:
   
   

   Setting	Description
   Read only	Enabled
   Data set	selectedUserJS
   Fields	Adjust the field settings per your requirements.

Step 7: Preview the App

Preview the App to see the result. The Card Component should display the list of users. When you click Select on a card, the Form updates with that user's details. The example below displays First Name, Last Name, Username, Date of Birth, and Email of the user.

 

Example: Using Cards in Image Fetching

For another example of using the Card Component, see the Configuring Image Fetching article.