> ## 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.
# Custom Page Components
> This article describes the configuration attributes, purposes, and advanced usage of components in custom pages. It covers Basic components such as Text, Image, Icon, Link, and Button, as well as advanced components such as Carousel, Balloon tooltip, and Collapse panel.
| **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**](/open/yida/index)**.**
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](/open/yida/components/basic/text) | Display text content. |
| [Image](/open/yida/components/basic/image) | Display image content. |
| [Icon](/open/yida/components/basic/icon) | Choose from multiple icon styles. |
| [Link](/open/yida/components/basic/link) | Add a URL that navigates to the target page on click. |
| [Link block](/open/yida/components/basic/linkBlock) | A container component that triggers navigation when any element inside it is clicked. |
| [Button](/open/yida/components/basic/button) | Trigger actions through button events — for example, click a button to get the current time. |
| [Video player](/open/yida/components/basic/video) | Play videos on a page with multiple playback options. |
| [Dialog](/open/yida/components/basic/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](/open/yida/components/basic/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](/open/yida/components/advanced/table) | Display data from a form or workflow form in a table. |
| [HTML](/open/yida/components/advanced/HTML) | Enables custom feature development. Page design requires front-end knowledge — at minimum, a working understanding of HTML, CSS, and JS. |
| [JSX](/open/yida/components/advanced/JSX) | Render a fully custom component using JSX code. Typically used for display-only scenarios. |
| [Carousel](/open/yida/components/advanced/slider) | Cycle through multiple images in a looping display. |
| [Balloon tooltip](/open/yida/components/advanced/balloon) | 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](/open/yida/components/advanced/bannerContainer) | Add content fixed to the bottom of the page that spans the full width. |
| [Iframe](/open/yida/components/advanced/Iframe) | Embed content from another webpage into the current designer page. Typically used for display-only scenarios. |
| [Progress indicator](/open/yida/components/advanced/progress) | Show the progress of a project. |
| [Pagination](/open/yida/components/advanced/pagination) | Paginate data displayed on a custom page. |
| [Search](/open/yida/components/advanced/search) | When a Spreadsheet component is used on a custom page, use the Search component to find a specific record. |
| [Filter](/open/yida/components/advanced/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](/open/yida/components/advanced/menu) | Use a custom page as a table of contents, with menu items that navigate to other pages. |
| [Tree](/open/yida/components/advanced/tree) | Browse a category and its subcategories in a tree structure. |
| [Timeline](/open/yida/components/advanced/timeLine) | Typically used to display a company's history or a project's milestones. |
| [Steps](/open/yida/components/advanced/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. |