Skip to main content

​
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:

​
3.1.3 Preset Templates

Seven card templates are available. Enable a template to build a card quickly.

​
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.
1

Step 1

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.
2

Step 2

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.
1

Define a conditional standard variable in the card designer, such as 'Sold out', with the variable type set to 'boolean', and configure mock data.

2

Step 2

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.
3

Configure the card node in integration & automation and map the workflow context data to the card data source variables.

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”.