> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Cool Card Design
> Learn about the three types of YiDA cards — message notification cards, interactive cards, and pinned chat cards — and how to create each of them. This article also explains how to use the card designer, including the outline tree, block component library, preset templates, and data source modules in the left toolbar.
## 1. Card Overview
* As the primary presentation format for YiDA Cool Apps, cards deliver a shorter business processing path through a lightweight footprint and minimal configuration, letting users focus on their work.
* YiDA cards come in three types: message notification cards, pinned cards, and interactive cards. The creation path for each type is described below.
### 1.1 Create a Message Notification Card
Message notification cards include:
* Form message notifications: Go to Form design >> Page settings >> Message notifications to create a form message notification. The system automatically sends a message to a specified user or chat when the form is created, edited, commented on, or deleted. For details, see Form message notifications.
* Workflow quick approval cards: When submitting a workflow, select the option to notify the approver to enable workflow approval reminders.
### 1.2 Create an Interactive Card
Configure the card node in Integration & Automation. When the form meets the trigger condition, the form data is pushed to the specified group chat as an interactive card.
#### 1.2.1 Procedure
**Path**: Admin page >> Integration & Automation >> Create Integration & Automation >> "Send card" node >> Select interactive card type
### 1.3 Create a Pinned Chat Card
Configure the card node in Integration & Automation. When the form meets the trigger condition, the form data is pushed to the specified group chat as a pinned chat card.
#### 1.2.2 Procedure
**Path**: Admin page >> Integration & Automation >> Create Integration & Automation >> "Send card" node >> Select pinned chat card type
## 2. Use Cases
On the card design page, drag and drop components to customize the card, or modify a YiDA card template to better fit your business needs.
## 3. Card Designer Overview
Card designer overview
### 3.1 Left Toolbar
The left toolbar contains the outline tree, block component library, preset templates, and data source.
#### 3.1.1 Outline Tree
Displays the structure and arrangement of components on the card in a tree view.
* Drag components in the outline to change their position on the card.
* Click the show/hide button to the right of a component name to show or hide the corresponding component on the canvas.
Card designer — outline tree
#### 3.1.2 Block Component Library
The card component library provides 17 components. Drag and drop components onto the card canvas. Choosing the right components makes it easier to build polished cards.
**The components are described below:**
| **Component name** | **Description** |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Card header** | Sits at the top of the card and sets the card title. |
| **Multiple images** | For scenarios that require multiple images on a card. |
| **Carousel** | Adds an image carousel to a card. |
| **Video** | Adds a video to a card. |
| **Text** | Adds text content to a card. |
| **Rich Text** | Displays complex text and image layouts. |
| **Image** | Displays a single image on a card. |
| **Divider** | Adds a divider within card content. |
| **Link** | Adds a link URL to a card. |
| **Two-column text** | Adds text in a two-column layout. Set content or bind variables for each column separately. |
| **Metrics** | Displays key data. Bind variables for the metric name and metric value to the underlying data. |
| **User list** | Displays users bound to specific tasks as an array of objects. Suitable for scenarios such as random draws, meal ordering, or task assignment where users are linked to items. |
| **Button** | Adds a button to a card. Write click event handlers to support different business needs. |
#### 3.1.3 Preset Templates
Seven card templates are available. Enable a template to build a card quickly.
| **Interactive card templates** | Pending ticket template | Ticket completion template | Meal ordering template | Random draw template |
| ------------------------------ | --------------------------- | ----------------------------- | ---------------------------------- | -------------------- |
| **Pinned card templates** | Ticket info pinned template | Meal ordering pinned template | Random draw result pinned template | -- |
#### 3.1.4 Data Source
Presets variables that can be bound to components to make component data dynamic. The card data source panel contains a variable list and mock data.
##### Variable list
Displays the preset variables. Click a variable to view its description, type, whether it is private, and other related information.
* Edit variable (edit a standard variable): Edit the name, type, and description of an existing variable. Click Add variable to create a new variable.
##### Mock data
The card data source introduces the front-end concept of mock data, letting designers simulate data with JSON code during the design stage. This lets you preview card effects and make adjustments without loading real data.
### 3.2 Top Preview Options
**Preview mode**: Controls whether preview is enabled.
* On: View the overall card effect only. Component properties cannot be changed.
* Off: Click to select a component and design its properties in the right property panel.
**Simulation options:**
* Simulated environment: Choose DingTalk Desktop, Android, or iOS to see how the card renders in different environments.
* Simulated version: Change the DingTalk version to preview the card across DingTalk versions and better match your organization's work habits.
* Simulated language: Set the language for card content in preview mode. Seven languages are supported: Simplified Chinese, Traditional Chinese, English, Japanese, Vietnamese, Thai, and Indonesian.
**Dark/Light mode**: Corresponds to Dark mode in the DingTalk appearance settings. View and modify card styles during the design stage.
### 3.3 Right Property Panel
Set properties for the card or card components, including style and execution logic, to match your requirements.
Card property definitions
## 4. FAQ
**Q1: Where can I quickly create and send or update a card?**
A: Add a Send/Update card node in integration & automation or the new simple workflow designer. Choose an official card template or a custom interactive or pinned chat card for your card design.
**Q2: I configured a card send/update node in integration & automation. The log shows the card was sent successfully, but I did not receive it.**
**A: Card send failures usually have three common causes:**
**1. The Cool App has not been published to the organization's custom app center. Publish the app to the custom app center first.**
**2. The Cool App is not enabled in the Chat Quick actions ("More > Cool App Marketplace") of the Internal Group or Department Chat. Enable the custom Cool App first.**
**3. The form was not initiated from within a chat (no chat context). For example, "Time-Based Triggers + Send card to current chat" is not supported in this case. With "Time-Based Triggers + Send card to specified chat", initiating the form from within the specified chat provides the form context and the card can be sent successfully.**
**Q3: After I redesign the card in the custom card designer, the card sent through DingTalk does not reflect the changes.**
After a card is updated, re-trigger the send or update to send or update the new card. Due to in-app caching, the card style may not update after a new trigger. If this happens, go to **Settings** > **Storage** > **Cache data** > **Clean up**, and select **Message cards, Web cache** to clear the cache.
**Q4: How do I @mention users in a card?**
**A: Add a user variable when designing the card, and map the user data in the card node in integration & automation.**
In Card designer > Data source, add a standard variable with the variable type set to "User info", and define mock data if needed. Drag in a Rich Text component and @mention the named variable in the component setter panel.
Add a Send/Update card node in integration & automation or the new simple workflow designer. In the card content configuration, bind the card data source and map the user field to the "User info" variable to enable the @mention effect.
**Q5: How do I display metrics, progress bars, and other data indicators on a card, similar to a Cool Dashboard?**
1. For the full configuration flow, see 2022.08.16 release notes — YiDA Cool Dashboard (Data Service + Cool Data Card).
2. Rendering report chart components on cards is not currently supported.
3. Recommended design approaches vary by business scenario and by the number of metrics displayed.
**Q6: Metric data on a card shows as decimals by default. How do I display it as a percentage?**
Go to Data Factory > Data Service > Create formula field, and use a formula to convert the value to a percentage. Refer to the configuration below. For full details, see 2022.08.16 release notes — YiDA Cool Dashboard (Data Service + Cool Data Card).
**Q7: How do I conditionally show or hide elements such as buttons on a card?**
Take the "group meal ordering" scenario as an example. When meals are sold out, show the "Sold out" button and hide the "Order" button.
Drag all buttons that need to be shown or hidden onto the canvas designer. In the button setter panel, configure the "Show" property. Define the condition and bind it to the variable defined in step 1. When the boolean value is true, the component is shown; otherwise, it is hidden.
**Q8: Can I place multiple pages of an app on the Chat Quick actions as separate entries?**
Yes. **A single Cool App can now place multiple quick entries on the Chat Quick actions.** Expanded display is supported; collapsed display is not.
**Q9: When a custom page redirects to a form page, how do I pass the current chat ID parameter?**
**By default, a Cool App only passes the "chat ID (conversationId)" to the first page opened from the Chat Quick actions. To pass the parameter further, include it in the URL.**
Suppose the Chat Quick actions entry is configured with **a custom page**, and **clicking a button or link on the custom page redirects to a form page**. In this case, the form page must obtain the chat ID so that the card can be sent to the corresponding chat after submission.
!!!**Note: This case does not apply to a custom page redirecting to a data management page.**
**How to do it:**
On the custom page, use a link block to redirect to the form page. If the link block is configured with an "internal page", the "chat ID" parameter is passed automatically.
If the link block is configured with an "external link", pass the "chat ID" parameter manually.
Code:
`(this.state.urlParams || {}).conversationId`
Add a **Single-line text** component to the form. Set the **Title** to **"Chat ID"**, set the **State** to **Hidden**, and set **Data submission** to **Always submit**.
!!!**IMPORTANT: Bind the Default to a variable that reads the parameter from the URL to fill in the "Chat ID".**
Code:
`decodeURIComponent((this.state.urlParams || {}).conversationId)`
Finally, when sending to a chat, choose either "current chat" or the chat identified by "Chat ID".