Custom Page Components - DingTalk Help Center

Feature	Free plan	Basic edition	Professional edition	Dedicated edition
Custom page	Not supported	Not supported	Supported	Supported

1. Introduction

Components on custom pages offer richer and more flexible configuration attributes than those on form pages. For component usage examples, see the Developer Center. Custom page components are grouped into the following categories: [Layout], [Basic], [Form], [Premium], and [Other].

1.1 Custom Page Components and Their Purposes

Component name	Purpose
Text	Display text content.
Image	Display image content.
Icon	Choose from multiple icon styles.
Link	Add a URL that navigates to the target page on click.
Link block	A container component that triggers navigation when any element inside it is clicked.
Button	Trigger actions through button events — for example, click a button to get the current time.
Video player	Play videos on a page with multiple playback options.
Dialog	Use in the following scenarios: • Displaying a notification to the user • Requiring the user to confirm an action • Requiring the user to complete a task without navigating away and interrupting the workflow
Drawer	Use in the following scenarios: • Displaying a notification to the user • Requiring the user to confirm an action • Requiring the user to complete a task without navigating away and interrupting the workflow
Spreadsheet	Display data from a form or workflow form in a table.
HTML	Enables custom feature development. Page design requires front-end knowledge — at minimum, a working understanding of HTML, CSS, and JS.
JSX	Render a fully custom component using JSX code. Typically used for display-only scenarios.
Carousel	Cycle through multiple images in a looping display.
Balloon tooltip	When looping through data on a custom page, long content may be truncated. Use a balloon tooltip to show the full content on hover.
Collapse panel	When a page contains too many components, use a collapse panel to fold them and reduce visual clutter.
Bottom banner	Add content fixed to the bottom of the page that spans the full width.
Iframe	Embed content from another webpage into the current designer page. Typically used for display-only scenarios.
Progress indicator	Show the progress of a project.
Pagination	Paginate data displayed on a custom page.
Search	When a Spreadsheet component is used on a custom page, use the Search component to find a specific record.
Filter	When displaying data in a custom table, the top-bar search can only filter by one column. Use the Filter component to search across multiple columns.
Menu	Use a custom page as a table of contents, with menu items that navigate to other pages.
Tree	Browse a category and its subcategories in a tree structure.
Timeline	Typically used to display a company’s history or a project’s milestones.
Steps	A step indicator component for custom pages. Suitable for multi-step flows such as staff onboarding data entry or account registration, providing progress reminders for filling in basic information.