This guide explains how to create and configure custom detail pages for mobile devices.
Prerequisite
This is a paid feature. If you want to use these features, contact our Sales Team.
How to Create and Configure a Mobile Detail Page?
Custom detail pages for mobile cannot be used independently; they must be configured together with desktop custom detail pages. Before creating a mobile detail page, ensure you have already set up the desktop version.
Step 1 Creating a desktop detail page first
If you haven’t created a desktop detail page:
Go to Form > Extension > Data Details, click “Upgrade to a custom detail page”, select your preferred creation method, and generate a desktop detail page. The system will redirect you to the Page Designer.
If you have a desktop detail page:
Go to Form > Extension > Data Details, click “Edit” next to the custom detail page to enter the Page Designer.
Step 2 Creating a Mobile Detail Page
Switch to the
tab and choose your preferred creation method:Create from desktop detail page: Copies current desktop components and configurations to generate the initial mobile page. Some components and settings will remain synchronized with the desktop version (manual unsync is supported).
When you adjust properties on the PC, the system will automatically update the corresponding mobile component; changes made on the mobile do not affect the PC side.
Sync can be removed to convert to a non-synced component.
Start from scratch and build freely: Generates a blank page for custom design from scratch.
All component properties can be configured independently and are not affected by the PC-side.
Unsynced components cannot be converted back to a synced component.
Notes:
Each form can have only one mobile custom detail page.
When you choose “Create from desktop detail page” as the detail page creation method, all initially generated components (except for multi-tab components) are synced components.
For synced components, deleting a component on the PC side only removes the sync relationship; the corresponding mobile component will not be deleted. Similarly, deleting a mobile component does not delete the PC-side component.
When you copy a synced component, the new component will be a non-synced component.
Multi-tab components cannot be used as synced components.
Step 3 Adding components
After creating a detail page, hover over the top of the page and click the “+” button to add components. You can also add components below existing ones.
Direct Add: Creates unsynchronized components. Supported types include:
Summary Card
Field
Stage Bar
Multi Tab
Data Table
Data Entry
Comments
Data Log
Workflow Updates (visible only in workflow forms)
Embedded Page
Image
Rich Text
Add from Desktop: Select from existing desktop components (except Multi Tab); these will be synchronized.
Notes:
If the desktop page has no components, the “Add from existing desktop components” button will not appear.
Each mobile detail page supports up to 50 components.
Step 4 Configuring Components
Select a component to configure its properties and styles in the right panel. Refer to the Component Guide for details.
You can drag and resize components to adjust their height and position.
Component Settings
Unsync components
To unsync a synchronized component, hover over the blue area and click “Unsync”.
Copy/edit/delete components
Hover over an existing component and click the menu (
)button on the left. You can copy, edit, or delete this component. Notably, deleting a Multi-Tab component allows you to choose whether to delete its inner components.
Adjust component height
Hover over an existing component and click the menu (
)button on the left. Enable “Adaptive Height” for dynamic resizing based on content, or set a custom height.
Notes
Data Entry, Embedded Page, and Image components do not support Adaptive Height.
Brief Card and Stage Bar components always use Adaptive Height.
Except for "Workflow Updates", "History", "Comments", and "Multi Tab", all other components have "Adaptive Height" enabled by default.
Move in/out of tabs
When you design your custom data details page, you can move components into or out of a tab as needed. Operations differ depending on whether the component is outside or inside a Multi-Tab:
Outside a Multi-Tab:
Click "Move into a multi-tab page" → select a Multi-Tab component → select a tab to move the component into the desired tab.
Inside a Multi-Tab:
Choose "Remove from the tab page" to remove the component from the current tab, or move it to another Multi-Tab component/another tab.
Page Settings
Configure the style and background
Click “Page Settings” in the upper right to configure global styles:
Setting | Description |
Style | Choose from three preset styles for the detail page. |
Background | Set a color or image as the background. Images support various fill modes (Contain, Cover, Stretch). |
Preview detail pages
Click “Preview” in the upper right and switch to the
tab to view the design in real-time.Select different preview data to experience how the page looks with various records.
Notes:
All edits, copies, or deletions made in preview mode are real and will affect your data.
Only the records you have permission to view will be available in preview.
Save & enable detail pages
After designing, use the Save or Enable buttons at the top right:
Save: Stores your current design. If the page is enabled, changes take effect immediately; otherwise, only the design is saved.
Enable: (Visible only when the page is not yet enabled) Saves the design and activates the Custom Data Details Page.
Note:
Saving or enabling affects both mobile and desktop detail pages. If the mobile page is not yet created when enabling the desktop page, mobile will show the system default until the custom mobile page is saved and enabled.
Delete detail pages
To delete the mobile detail page, go to the mobile page designer and click “Delete Mobile Custom Detail Page” in the top left.
Notes:
After deletion, the mobile will revert to the system default detail page.
Deleting the desktop detail page from Extension > Data Details will also delete the mobile detail page.
I have finished reading. 🏆
👉I can't wait to Try for myself.
👉I need more HELP in Discord Forum.