Action links and detail components are essential for creating interactive, user-friendly applications. Action links enable users to perform operations on records (view, edit, delete, custom actions), while detail components display comprehensive record information. Together, they form the foundation of effective record navigation and management.

In this section, you'll learn how to create action links, configure different action types, set up detail components, display connected records, and build professional detail pages that provide complete record views.

Action links are clickable elements that perform actions on records. They appear in table components, card views, and other list displays.

Common Action Types

• View: Navigate to detail page
• Edit: Open edit form
• Delete: Remove record
• Duplicate: Copy record
• Custom Page: Navigate to specific page
• Run Rule: Execute action rule
• Send Email: Trigger email
• Generate PDF: Create document

Where Action Links Appear

• Table components (action column)
• Card components (buttons/icons)
• Detail pages (top actions bar)
• List views
• Search results

Step-by-step process for adding action links:

Step 1: Open Component Settings

1. Edit table or card component
2. Navigate to "Actions" section
3. Click "Add Action"

Step 2: Configure Action

1. Choose Action Type
   • View, Edit, Delete, Custom, etc.
2. Set Action Label
   • Text displayed to user
   • Examples: "View Details", "Edit", "Remove"
3. Choose Icon (optional)
   • Visual icon for action
   • Enhances recognition
4. Set Action Behavior
   • Open in same page
   • Open in popup
   • Open in new tab
5. Configure Permissions
   • Who can see/use this action
   • Role-based restrictions

Step 3: Test Action

• View component with action link
• Click action to test behavior
• Verify expected result
• Test with different user roles

The View action navigates to a detail page showing full record information.

Configuration

• Label: "View", "Details", "See More", etc.
• Icon: Eye icon, arrow, etc.
• Destination: Detail page
• Behavior: Navigate or open popup

Best Practices

• Make view action prominent
• Consider making record name clickable
• Use consistent icon across app
• Ensure everyone can view (unless restricted)

Example

Customer Table:

• Label: "View Customer"
• Icon: Eye
• Destination: Customer Detail Page
• Opens in same window

The Edit action opens a form to modify record data.

Configuration

• Label: "Edit", "Modify", "Update"
• Icon: Pencil, edit icon
• Destination: Edit form page
• Behavior: Navigate, popup, or inline

Edit Permissions

Control who can edit records:

• All Users: Anyone can edit
• Owner Only: Only record creator
• Specific Roles: Admin, Manager, etc.
• Conditional: Based on field values

Example

Task Table:

• Label: "Edit Task"
• Icon: Pencil
• Destination: Task Edit Form
• Opens in popup for quick edits
• Only assigned user can edit

The Delete action removes a record from the table.

Configuration

• Label: "Delete", "Remove", "Archive"
• Icon: Trash can, X icon
• Confirmation: Require confirmation message
• Warning: Display custom warning text

Delete Options

• Hard Delete: Permanently remove
• Soft Delete: Mark as deleted (change status)
• Connected Records: Cascade, prevent, or orphan

Safety Considerations

• Always require confirmation
• Explain what will be deleted
• Warn about connected records
• Restrict to appropriate roles
• Consider soft delete instead
• Log all deletions

Example

Order Table:

• Label: "Cancel Order"
• Icon: Trash
• Confirmation: "Are you sure you want to cancel this order?"
• Actually changes status to "Cancelled" (soft delete)
• Only managers can cancel

Navigate to custom pages with context:

Use Cases

• View related records
• Special workflows
• Custom reports
• Multi-step processes

Configuration

1. Select "Custom Page" action type
2. Choose destination page
3. Pass record ID as parameter
4. Set label and icon

Example

Customer Table:

• Label: "View Orders"
• Icon: Shopping cart
• Destination: Orders page filtered to this customer
• Passes customer ID as filter

Trigger custom logic via action links:

Use Cases

• Send notification emails
• Update field values
• Create related records
• Complex workflows
• Generate documents

Configuration

1. Create action rule first
2. Add "Action Rule" link to component
3. Select which rule to run
4. Set label and icon
5. Configure confirmation if needed

Example

Invoice Table:

• Label: "Send Invoice"
• Icon: Email
• Runs rule that emails PDF to customer
• Shows success message
• Only admins can send

Customize action link appearance:

Display Options

• Button: Full button with text
• Icon Only: Just icon, no text
• Link: Text link
• Dropdown Menu: Actions in menu

Color Coding

• Primary (Blue): Main actions (View, Edit)
• Success (Green): Positive actions (Approve, Complete)
• Danger (Red): Destructive actions (Delete, Cancel)
• Warning (Yellow): Caution actions (Archive, Suspend)
• Secondary (Gray): Optional actions

Icon Selection

• Use recognizable icons
• Be consistent across application
• Match icon to action meaning
• Consider cultural implications

Detail components display comprehensive record information.

What is a Detail Component?

• Shows all fields from a single record
• Displayed on dedicated detail page
• Includes connected record information
• Central hub for record interaction

Adding Detail Component

1. Create detail page
2. Add "Details" component
3. Select table
4. Choose fields to display
5. Configure layout and styling

Field Selection

Choose which fields to show:

• Include all important fields
• Exclude system fields unless needed
• Group related fields
• Order fields logically

Layout Options

• Single Column: Fields stack vertically
• Two Column: Fields in two columns
• Tabbed: Fields organized in tabs
• Sections: Grouped with headers

Show related records on detail pages:

Embedded Table Components

Add table components showing connected records:

Example: Customer Detail Page

• Customer Details: Detail component
• Orders Table: Shows all customer orders
• Contacts Table: Shows related contacts
• Activities Table: Shows interaction history

Automatic Filtering

Tables automatically filter to related records:

• Based on page context (customer ID)
• No user action required
• Only shows relevant data

Nested Detail Views

Click through to view related record details:

• Customer → Orders → Order Detail
• Project → Tasks → Task Detail
• Breadcrumb navigation
• Back buttons

Structure detail pages effectively:

Typical Detail Page Layout

1. Header Section
   • Record name/title
   • Key identifier
   • Status badge
   • Primary actions
2. Main Information Section
   • Detail component
   • Core field display
   • Essential information
3. Related Records Sections
   • Connected record tables
   • Related lists
   • Each in its own section
4. Activity/History Section
   • Record history log
   • Activity timeline
   • Audit trail
5. Footer/Additional Actions
   • Secondary actions
   • Download options
   • Share links

Tabbed Detail Pages

Organize complex detail pages with tabs:

• Overview Tab: Main details and key info
• Related Tab: Connected records
• History Tab: Activity and changes
• Documents Tab: File attachments
• Notes Tab: Comments and notes

Responsive Design

• Mobile-friendly layouts
• Single column on small screens
• Collapsible sections
• Touch-friendly actions

Example 1: Customer Detail Page

Components:

• Header: Customer name, account type badge
• Actions: Edit, Send Email, Create Order
• Details: Contact info, address, account details
• Orders Table: All customer orders
• Invoices Table: All invoices
• Activities Table: Interaction history
• Notes Section: Customer notes

Example 2: Order Detail Page

Components:

• Header: Order number, status, date
• Actions: Edit, Cancel, Send Invoice, Generate PDF
• Customer Info: Who placed order
• Order Details: Shipping, payment, totals
• Line Items Table: Products ordered
• Payments Table: Payment history
• Shipments Table: Tracking info
• History: Order status changes

Example 3: Project Detail Page

Tabs:

• Overview: Project details, status, dates, description
• Tasks: All project tasks with Kanban view
• Team: Assigned team members
• Documents: File attachments
• Budget: Financial tracking
• Activity: Timeline of changes

Detail pages typically include action buttons:

Primary Actions

• Edit Record: Modify details
• Delete/Archive: Remove record
• Duplicate: Create copy

Contextual Actions

• Send Email: Email related parties
• Generate Document: Create PDF, invoice, etc.
• Change Status: Update workflow state
• Assign User: Reassign ownership

Navigation Actions

• View Related: Navigate to connected records
• Create Related: Add new connected record
• Back to List: Return to table view

Action Bar Placement

• Top right of page (common)
• Below header
• Floating action button
• Dropdown menu for many actions

Help users navigate record hierarchies:

Example Breadcrumbs

• Home → Customers → Acme Corp → Orders → Order #12345
• Projects → Website Redesign → Tasks → Homepage Design
• Products → Electronics → Laptops → Dell XPS 15

Implementation

• Add breadcrumb component
• Configure parent pages
• Auto-generates based on navigation
• Clickable links to parent pages

Action Links

• Use clear, action-oriented labels
• Don't overload with too many actions
• Group related actions in menus
• Use icons for recognition
• Color-code by action type
• Always confirm destructive actions
• Test permissions thoroughly

Detail Pages

• Show most important info first
• Group related fields logically
• Use sections and headers
• Include all relevant connected records
• Make actions easily accessible
• Provide navigation aids (breadcrumbs, back buttons)
• Optimize for mobile viewing

Connected Records

• Include all important relationships
• Use clear section headers
• Show record counts
• Enable quick actions on related records
• Allow inline creation of related records

In this section, you've learned about action links and detail components:

• Action links enable record operations (view, edit, delete, custom)
• Detail components display comprehensive record information
• Connected record displays show related data automatically
• Detail page organization creates effective record views
• Action buttons provide quick access to operations
• Navigation aids help users move through record hierarchies

Action links and detail pages are fundamental to creating intuitive, interactive applications that users can navigate and manage effectively.

Hands-On Exercise (To Be Added)

Exercise placeholders will include practical activities such as:

• Add action links to a table component
• Create a comprehensive detail page
• Display connected records on detail pages
• Configure action permissions
• Build a tabbed detail page for complex records

Knowledge Check (To Be Added)

Quiz questions will test understanding of:

• Different action link types and when to use them
• Best practices for delete actions
• How to organize detail pages effectively
• Displaying connected records
• Action link permissions and security