Record Detail Page Views

Learning Objectives

• Understand the difference between default detail pages and custom pages.
• Learn how to use the Page Designer to adjust page layouts via drag-and-drop.
• Master layout techniques such as columns, grouping, and Tabs.
• Advanced: Configure dynamic visibility logic for fields (e.g., showing a "Rejection Reason" only when the status is set to "Rejected").

What is a Record Detail Page?

When a user clicks on a specific row in a list (for example, clicking a "Contract Name"), the page that opens is the Record Detail Page.

It typically consists of three core sections:

1. Header: Displays the record title and key action buttons (Edit, Delete, Submit for Approval).
2. Details: Displays all field values of the specific record.
3. Related Lists: Displays child data associated with the record (e.g., payment records under a contract).

Default View vs. Custom View

• Default View: A single-column form automatically generated by the system based on the object's fields. It is simple but can become difficult to navigate when there are more than 20 fields.
• Custom View: Built using the Amis Designer, this allows you to design layouts with multiple columns, or hide less frequent information inside tabs, much like designing a slide deck.

---

Getting to Know the Steedos Page Designer

The Steedos UI engine is powered by the open-source framework Amis. It provides a "What You See Is What You Get" (WYSIWYG) editor to modify your pages.

How to Enter Design Mode

1. Open any record detail page (e.g., a specific "Project").
2. Click the Settings (Gear Icon) in the top right -> "Edit Page".
3. The system will enter full-screen Designer mode.

Designer Interface Overview

• Left Side: Component Library Your "brick box." It contains layout containers (Columns, Tabs), field components (Inputs, Text), and display components (Tables, Cards).
• Center: Canvas Your "workbench." This is where you drag and drop components from the left.
• Right Side: Properties Panel Your "control center." Select a component on the canvas to modify its title, color, visibility conditions, etc.

---

Core Components Explained

The following components are the most frequently used when designing a detail page:

1. Object Form

The most fundamental unit. It automatically displays the form for the selected object.

• Tip: In the properties panel, you can choose the specific object and even filter which fields to display.

2. Related List

Used to display child data related to the current record.

• Configuration: Drag the component in and select the "Related Object" in the properties (e.g., selecting the associated "Tasks" on a Project page).
• Display Mode: Can be shown as a Table or a Card list.

---

Advanced: Dynamic Visibility (Visible On)

This is the most "intelligent" part of low-code design. We can implement complex interaction logic without writing code.

Scenario: Only display the "Suspension Reason" input field when the "Project Status" is set to "Paused."

1. Select the "Suspension Reason" field component on the canvas.
2. In the right Properties Panel, find the "Visible" or "Visible On" setting.
3. Click "Expression Configuration" (or enter the formula directly).
4. Write the logic:

• If the API Name of the status field is status and the value for paused is paused.
• The expression is: this.status === 'paused'

5. Effect: When the user selects "Paused," the reason box appears instantly; for any other status, it disappears.

Amis Expression Shortcuts

• this.xxx refers to a field in the current form.
• === means equals; !== means does not equal.
• && means AND; || means OR.
• Example: this.amount > 10000 (Displays only when the amount exceeds 10,000).

---

FAQ

Q: Why do I see two different "Detail Pages"? A: Steedos supports "Profile-based Layouts".

• You can design a page for "Sales Reps" that only shows sales data.
• Simultaneously, you can design a page for "Finance Staff" that shows costs and profits.
• When saving the page, the system will ask which Profiles the layout should apply to.