Components are the fundamental building blocks for creating your custom data details page. Instead of being limited to a default layout, you can use components to tailor the interface precisely to your business workflows and user needs. You can set up the following components in a custom data details page:

You can also set the Style of each component.

The Summary Card component is used to display key information from the current dataset, including a title, subtitle, and briefing fields. It is typically placed at the top of a data details page for a quick overview of core content, as shown in the image below:

Enable the switch next to Title to display a title within the component. The title's content will be the record's Data Title. You can also click Set Data Title and go to Advanced to configure it.

To set the subtitle, select a form field from the Subtitle dropdown menu. Supported field types include: Single Line, Radio, Single Select, and Workflow Status.

Click "+ Add Fields" to add your desired fields. Once added, you can reorder, rename, or delete them.

For the added briefing fields, two layout options are available: Landscape and Portrait. You can choose the one that best fits your needs. The effects of each are shown below:

The Stage Bar component visually displays the current business stage of a record (such as a project stage or an opportunity stage) and allows for quick stage switching.

You can select fields from the Single Select or Radio to serve as the Stage Field. The component will display the options from the selected field sequentially in the stage bar (excluding the "Other" option). The stage is automatically highlighted based on the current data's value.

When enabled, members viewing a record's details can directly click on the Stage Bar to switch stages. This will simultaneously update the stage field's value without entering the data editing page. The effect is shown below:

Go to the Style section to switch the stage bar's appearance and set its color. You can choose to either Follow Theme Color or select a Custom Color.

The Field component allows you to display fields from a form on a custom data details page for members to view.

The super admin can adjust which fields are shown after adding this component. When you add the component, the Display Fields section will, by default, select all form fields except for the following types:

By default, the layout of the displayed fields follows the form's property settings. If you want to customize the following aspects, you must enable Field Custom Layout.

The Data Entry component allows members to input data into a specific form without leaving the data details page. This creates a seamless "view and fill" experience.

Choose the form you want members to fill out. You can select the current form or any other form within this app.

Once you have selected the data entry form, you can set default values for its main fields. When a member begins to fill out the form, the system will automatically populate the corresponding fields based on these default settings. The member is still allowed to modify these pre-filled values.

Click "Set Default Value" and configure the following options:

After configuring all settings, click "OK" to save.

The Image component is used to display one or more images in a data details page. It supports features such as Auto Play and Multi-Image Carouseling.

You can decide your Image source: either Image Field in Current Data or Manual Upload.

Simply select an image field from the current record, as shown below:

To add your own images, switch to Manual Upload and click "+ Upload". After uploading, you can configure the following settings for each image as needed:

Taking the Display Text as an example, here is what the result looks like:

When your data source contains multiple images (either from Image Field in Current Data or through Manual Upload), the Carousel Settings section will become available. It allows you to configure Auto Play and Carousel Mode :

When enabled, images will be played automatically in a slideshow. You can also set the time interval between slides.

When Aut Play is enabled, you can still manually switch between images:

You can choose between the following two Carousel Modes:

Under the Multi Images carousel mode, the following parameters can be configured:

For example, if you set Images per view to 2 and Images per scroll to 2 with 5 total images (A, B, C, D, E), the carousel works like this:

The cycle then repeats from the beginning.

You can select the Fill Mode of the image:

The different fill modes are shown below:

Rich Text empowers you to display formatted content, including text, images, and hyperlinks, in a data details page. With flexible layout options, it's perfect for announcements, instructions, and other content requiring custom styling.

Super admins can use the following tools when editing content in the rich text field:

When the current form is a workflow form, you can use the Updates component to display the following information on the details page:

The Comments component allows users to comment on regular forms or workflow forms. They can also @mention relevant members to notify them of reviewing.

The History component is used to record changes made to form data. It allows members to view the modification history when accessing a record's details.

The Embedded Page component allows you to embed other web pages directly into a data details page. After setting the link address using one of the methods below, the system will automatically display the corresponding web content.

It allows you to design and personalize the appearance of your own components.

After selecting a certain component, you can configure its Component Style and Background in the Style column of the right panel.

It provides two styles for the component: Card and Borderless.

This is what the Card style looks like:

This is what the Borderless style looks like:

Here is a more detailed comparison between these two styles:

If you set the component style to Card, you have the option to set a custom background color or image. Here is an example of the effect:

You can select one of the following fill modes: Contain, Cover, and Stretch. Their features and effects are just the same as those we have mentioned in the Image component section.

I have finished reading. 🏆

👉I can't wait to Try for Myself.

👉I need more HELP in Discord Forum.
​