Skip to main content

Custom Data Details Page

Updated this week

What is a Custom Data Details Page?

A Custom Data Details Page is a powerful tool that allows you to design and personalize how data is displayed within your application.

Instead of being limited to a default layout, you can tailor the interface to your business workflows and user needs. With a wide range of components—such as Stage Bar, Summary Card, Data Entry, and Embedded Page—you can build pages from templates or craft unique layouts using intuitive drag-and-drop controls. This flexibility ensures your data is presented in the most effective way for your team.


When to Use a Custom Data Details Page?

Custom Data Details Pages excel in scenarios where standard layouts fall short. Here are some common use cases:

  • Opportunity Management: Instantly view and update the status of an opportunity using the Stage Bar.

  • Project Details: Manage and review related customers, tasks, and other data directly in a Data Table within the project’s Custom Data Details Page.

  • Customer Information: View customer details and simultaneously log follow-up records, contacts, or orders through the Data Entry component.

Note:
Custom Data Details Pages do not apply in the following scenarios. The system will display the default data details page instead:

  • Access via form external links

  • Mobile access

  • Access from the Manage Data page


What does a Custom Data Details Page look like?

A Custom Data Details Page can be as simple or sophisticated as you need. You might have a summary card at the top, a stage bar for status tracking, tabs for organizing information, and tables or forms for interacting with related data—all styled to match your brand or workflow.


How to Set it up?

Step 1 Creating a Custom Data Details Page

Go to the form editing page and click Upgrade to a Custom Detail Page under Extension >> Data Details. Choose a creation method:

  • Create From Template: Start with a pre-built template and customize it further.

  • Create From Scratch: Build your page layout from the ground up.

After entering the page designer, freely add and configure components. If you started with a blank page, you can click the "+" button at the top to select a template.

Note:
Each form currently supports only one Custom Data Details Page.

Step 2 Designing the Custom Data Details page

  1. Add components

  • In the designing page, hover over the top of the Custom Data Details Page and click the "+" button to add components.

  • You can also hover over an existing component and click the "+" button below it to add more.

Supported Components:

  • Summary Card

  • Stage Bar

  • Multi Tab

  • Fields

  • Data Table

  • Data Entry

  • Image

  • Rich Text

  • Workflow Updates (visible/usable only in workflow forms)

  • Comments

  • History

  • Embedded Page

2. Edit components

Select a component and configure its properties in the right-hand Component Properties panel. You can adjust the width and position of components by dragging as needed.

3. Copy/edit/delete the component

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.

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

  • Most other components have Adaptive Height enabled by default.

5. Move components into/out of a multi-tab page

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.

Note

If no Multi-Tab component exists on the page, the “Move into a multi-tab page” and "Remove from the tab page" options will not be visible.

Step 3 Configuring Global Style

Click Page Settings at the top right to configure global styles, including:

  • Style: Four preset styles for quick selection.

  • Background: Set a color or image as the background. Images support various fill modes (Contain, Cover, Stretch).

  • Component Style: Choose between “Card” (with a container and background) or “Borderless” (seamless integration).

  • Spacing: Adjust spacing between components (compact or moderate), available only for “Card” style.

Step 4 Previewing the custom data details page

  • Click Preview at any time to see real-time design effects.

  • In preview mode, choose different data to see how the page displays with actual records.

Notes

  • Any edits, copies, or deletions performed during preview will take effect—use caution.

  • Only data you have viewing permissions for will be available in preview.

Step 5 Saving & enabling your custom data details page

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

Once enabled, users viewing data on a desktop will see the Custom Data Details Page; mobile users will still see the default system page.


How to Switch Between Data Details Pages?

After creating a Custom Data Details Page, both the System Default and Custom Data Details Page will be listed under Extension >> Data Details. Select one and click “Ok” to switch. You can also edit either page by clicking the “Edit” button.

Note:

Once the Custom Data Details Page is enabled, users will see the custom page when accessing data on desktop, but the default details page will continue to be displayed on mobile devices.


How to Delete a Custom Data Details Page?

To delete a Custom Data Details Page, click the “Delete” button next to it under Extension >> Data Details.

Custom Data Details Pages give you the power to transform how data is viewed and managed in your organization. With flexible layouts, rich components, and easy-to-use design tools, you can create interfaces that boost productivity and fit your exact needs. Whether you’re managing deals, projects, or customer interactions, a Custom Data Details Page makes your data work for you.

Ready to get started? Dive in and unlock the full potential of your data today!


I have finished reading. 🏆

👉I can't wait to Try for myself.

👉I need more HELP in Discord Forum.

Did this answer your question?