Skip to main content

Designer Function Introduction

The main purpose of this document is to help users understand the overall framework and specific functional modules of Yida's custom page designer, helping users quickly use Yida's custom designer for business development.

Overall Framework​

Yida's custom designer overall framework contains five functional areas, as follows:

The custom page designer is very similar to the form designer and mainly includes five areas:

  • Top Navigation Bar- In addition to providing Yida's general navigation capabilities, it also implements functions such as quick page name editing, page saving, and previewing;
  • Left Toolbar- Mainly used for page global configuration, providing outline tree, component library panels and other global configuration panels, such as data source management, action panel, etc.;
  • Top Toolbar- Mainly used for visual editing area configuration, such as international language switching, PC & mobile display switching, history records, etc.;
  • Visual Editing Area- The main operation area of the designer, showing the user-built page in a WYSIWYG manner, providing drag-and-drop, click and other interaction methods to assist users in page building;
  • Right Toolbar- Mainly used for selected component property configuration, divided into three panels: Properties, Styles, and Advanced, corresponding to property configuration in different dimensions of the component;

Function Details​

The above figure marks all functional modules of the custom designer. Next, we will introduce them one by one:

1. Platform Navigation Quick Entry​

Hovering the mouse over the Icon will display the platform's quick menu bar, allowing quick navigation to the start page, my applications, application center and other pages.

2. Application Name​

Displays the application name to which the current page belongs. Clicking the application name can navigate to the application's page management page.

3. Page Name​

Displays the current page name being built. Clicking the small pencil supports quick page name editing.

4. Page Setting Navigation​

By clicking the navigation, you can quickly access the page settings page and page publishing configuration page.

5. International Language Switching​

Supports switching between different international languages through a dropdown. Currently supports Simplified Chinese and English.

6. Display Window Switching​

Supports switching between PC and mobile view modes. After switching, the visual designer will adapt accordingly.

7. Forward & Backward​

Yida's designer records user operation records and supports forward and backward operations.

8. History Records​

Clicking the History Records Icon will display recent user save history records on the right side of the designer. Users can select a specific version of history records to rollback.

Yida's designer provides a quick global search function. Users can search and locate specific settings by keywords.

10. Shortcuts​

Clicking the Shortcuts Icon will bring up the shortcuts display popup. Users can view the list of shortcuts supported by Yida's designer.

11. Page Settings​

Clicking the page settings button will switch the right toolbar to the page settings panel. Users can configure properties and styles for the outermost container of the entire page.

12. Preview​

Clicking the preview button will automatically save the page information and bring up a preview popup in the page designer for real page preview.

13. Save​

Save the user-edited page information to the server.

14. Outline Tree​

Through the outline tree panel, users can clearly view the component hierarchy structure of the current editing page. In the outline tree panel, users can perform the following operations:

  • Click to select component: When users click on a node in the component tree, the canvas will highlight the component corresponding to that node;
  • Drag to move component: Users can drag components to change component positions. The drag operation supports mutual dragging between component tree & canvas;
  • Quick hide component: When hovering over a component tree node, users can see quick operation icons and can quickly hide components;

15. Component Library​

Users can view all official components available for the current page. Users can quickly find required components through name search or component library filtering operations. At the same time, users can drag components from the component library and add them to the specified location in the visual editing area.

16. Block Templates​

Blocks are combinations of components according to business rules. Therefore, blocks can be understood as materials with larger granularity compared to components. The usage of the block library is similar to the component library, supporting users to add block materials to the canvas or component tree by dragging.

17. Data Source​

Page data source configuration. Yida's custom page supports two types of data sources:

  • Variables - Used for page global state management;
  • Remote API - Used for asynchronous data request management of the page;

18. Action Panel​

Used to write business logic through JS code. Syntax supports full ES6 syntax. There are several specific configuration scenarios:

  • Page lifecycle configuration;
  • Action handling function configuration;
  • Page public function configuration;

19. Multi-language Text Management​

Used to configure internationalized multi-language text libraries, and provides i18n API for language library acquisition.

20. Advanced Property Configuration​

Used to configure the advanced properties of selected components, specifically including:

  • Whether to render: Supports implementing dynamic conditional rendering of components;
  • Loop: Supports configuring implementation of component loop rendering;
  • Unique identifier: The unique identifier of the component, similar to the concept of key in React;

21. Style Property Configuration​

Users can select components in the canvas and edit the styles of selected components in the right style panel (corresponding to the style property of React components). The style panel configuration for all components is consistent, and all have corresponding CSS style properties.

22. Component Property Configuration​

Users can select components in the visual editing area and edit the properties of selected components in the right property panel (corresponding to props of React components). The designer will display different property configuration panels according to the property configuration set when the component was integrated.

23. Feedback Center​

Used for quick support or consultation, with the following quick entries:

  • Pre-sales consultation;
  • Custom development;
  • Follow the official account;
  • Experience feedback;
  • Manual service;

24. Visual Editing Area​

The main area for visual editing. Users can perform the following operations in the canvas:

  • Click to select component: Select the component whose configuration panel on the right needs to be configured;
  • Drag to move component: Mutual material drag-and-drop movement between component tree and canvas;
  • Drag to add component: Select material instances from the component library and block library and drag to add to the editing area;
This doc is generated using machine translation. Any discrepancies or differences created in the translation are not binding and have no legal effect for compliance or enforcement purposes.
Copyright © 2025钉钉（中国）信息技术有限公司和／或其关联公司浙ICP备18037475号-4