# View a Record

The "View a Record" action displays record fields in a modal dialog using Noloco's Details component. This allows users to view record information without navigating away from the current page, perfect for quick reference or reviewing related record details.

## What is the Details Component?

The Details component is Noloco's built-in record viewer that displays field values in a clean, formatted grid layout. When you use the "View a Record" action, it opens this component in a modal, showing the fields you've configured for that record type.

You can further customize how these field values are displayed/presented. After toggling the field you want to have in your record view, you have several options under **Display As**. These are the supported formats for displaying field values.

**Text:**

* Default
* Link
* Button
* Image
* Markdown / Richtext
* Formatted JSON
* QR Code
* Bold
* Headings (H1 - H4)

**Date**:

* Relative days (time since date)

## When to Use View a Record

Use the View a Record action when you want to:

* **Show quick reference information**: Display record details without leaving the current page
* **Preview related records**: View linked record details (customer info from an order, employee details from a task)
* **Reduce navigation clicks**: Let users see information without opening full record pages
* **Display read-only information**: Show data without edit capabilities
* **Create information dashboards**: Quick-view buttons for various related records
* **Mobile-friendly previews**: Avoid full-page navigation on mobile devices

## View a Record vs. Navigate To

**View a Record:**

* Opens in a modal overlay
* Stays on current page
* Quick preview, doesn't change context
* Read-only view (no inline editing by default)
* Closes with X button or clicking outside modal

**Navigate To (Record Page):**

* Navigates to full record page
* Leaves current page
* Full record experience with all functionality
* Allows editing and related actions
* Requires back button to return

**Use "View a Record" when**: Users need quick reference without losing their place **Use "Navigate To" when**: Users need full record access with editing capabilities

## Setting Up View a Record Action

### Step 1: Create the Action Button

1. In build mode, navigate to the record page where you want the button
2. Click the "+" button in the Action Buttons section
3. Click the edit icon to configure the button

### Step 2: Configure Button Appearance

* **Button Text**: Describe what will be shown (e.g., "View Customer", "Show Details", "Preview Order")
* **Appearance**: Usually Default or Information (blue)
* **Icon**: Add relevant icon (eye icon, info icon, user icon)
* **Button Tooltip**: Explain what information will be shown
* **Type**: Usually "One click" (modal opens immediately)

### Step 3: Configure Which Record to View

**What Should Happen**: Select **View a record**

**Which Record:**

**Option 1: This Record**

* Shows details of the current record
* Use when button is on the record you want to view
* Useful for "Quick View" or "Show Full Details" buttons

**Option 2: Related Record**

* Shows details of a linked single-relationship record
* Choose a relationship field (e.g., "Customer", "Assigned To", "Project")
* Use when you want to view a connected record's details

**Example**: On an Order record, select "This record → Customer" to view the customer's details.

### Step 4: Configure Which Fields to Display

The modal will display fields based on the Details component configuration for that record type:

1. Enable the fields you want to show in the modal
2. Configure the field's labels, positions and options

**Field Configuration:**

* Toggle fields on/off in the Details section
* Arrange field order
* Group fields into sections
* Show/hide field labels

## Common Use Cases

### 1. View Customer Details from Order

**Scenario**: Quickly view customer information while processing an order

**Button Configuration:**

* Button Text: "View Customer"
* Icon: User icon
* Type: One click
* Placement: On Order record page

**Action Configuration:**

* What Should Happen: View a record
* Which Record: This record → Customer

**What Users See:** Modal showing customer fields:

* Customer Name
* Email
* Phone
* Address
* Account Status
* Total Orders
* Lifetime Value

***

### 2. Preview Related Project

**Scenario**: View project details from a task without leaving the task page

**Button Configuration:**

* Button Text: "View Project"
* Icon: Folder icon
* Type: One click

**Action Configuration:**

* Which Record: This record → Project

**Benefit**: Users can see project context while working on task, without navigating away.

***

### 3. Show Assigned User Info

**Scenario**: View details about who a task is assigned to

**Button Configuration:**

* Button Text: "View Assignee"
* Icon: User icon
* Type: One click

**Action Configuration:**

* Which Record: This record → Assigned To (user relationship)

**What Users See:** User details:

* Name
* Email
* Department
* Phone
* Manager
* Current workload

***

### 4. Quick View Button for Current Record

**Scenario**: Show full record details in a modal from a compact view (like a card or table row)

**Button Configuration:**

* Button Text: "Quick View"
* Icon: Eye icon
* Type: One click

**Action Configuration:**

* Which Record: This record

**Use Case**: On a table or card view with limited fields, add a Quick View button to see all details without navigating to the full record page.

***

### 5. View Parent Record

**Scenario**: From a sub-item, view the parent record details

**Example**: View invoice details from an invoice line item

**Button Configuration:**

* Button Text: "View Invoice"
* Icon: Document icon

**Action Configuration:**

* Which Record: This record → Invoice

***

### 6. View Related Documents

**Scenario**: Preview document record metadata without downloading

**Button Configuration:**

* Button Text: "Document Info"
* Icon: Info icon

**Action Configuration:**

* Which Record: This record → Document

**What Users See:**

* Document title
* File type
* Upload date
* Uploaded by
* File size
* Description
* Tags

***

### 7. Multi-Record Preview Dashboard

**Scenario**: Create multiple view buttons for different related records

On a Project record page:

**Button 1**: "View Client"

* View record: This record → Client

**Button 2**: "View Project Manager"

* View record: This record → Project Manager

**Button 3**: "View Contract"

* View record: This record → Contract

Users can quickly preview multiple related records without navigation.

***

### 8. View Lookup Information

**Scenario**: Show details from a related record that provides reference data

**Example**: View product specifications from an order line item

**Button Configuration:**

* Button Text: "Product Specs"
* Icon: Info icon

**Action Configuration:**

* Which Record: This record → Product

**What Users See:**

* Product name
* SKU
* Specifications
* Weight
* Dimensions
* Stock level

***

## Combining with Other Actions

### View Before Editing

**Step 1 - View Record:**

* Show record details in modal for review

**Step 2 - Navigate To:**

* Navigate to edit page (after user reviews)

**Use Case**: Let users preview before committing to edit flow.

***

### View and Update in Sequence

**Step 1 - View Record:**

* Display current record details

**Step 2 - Update Record:**

* Show update form for specific fields

**Use Case**: Show context before asking for updates.

***

### Conditional View Based on Status

Create different view buttons based on record state:

**Button 1** (show when Status = "Draft"):

* Text: "Preview Draft"
* View: This record

**Button 2** (show when Status = "Published"):

* Text: "View Published Version"
* View: This record

Use visibility rules to show appropriate button.

***

## Customizing What Fields Appear

### Configuring the Details Component

The View a Record action uses the Details component configuration:

1. Navigate to the record type's detail page in build mode
2. Find the **Details** section
3. Configure which fields to show:
   * Toggle fields on/off
   * Drag to reorder
   * Group into sections
   * Add section headers
4. Changes apply to:
   * Full record detail pages
   * View a Record modals
   * Any place the Details component is used

### Creating Clean Modal Views

**Best practices for modal views:**

* Show essential fields only (5-10 fields ideal)
* Group related fields into sections
* Use clear section headers
* Hide technical IDs or system fields
* Include images or key visual elements
* Show formatted dates and numbers

***

## Best Practices

### Button Placement

* ✅ Place view buttons near where users need context
* ✅ Add to table row actions for quick previews
* ✅ Include on cards for quick detail view
* ✅ Position prominently for important related records

### Button Labels

* ✅ Use clear, descriptive text ("View Customer" not just "View")
* ✅ Indicate what record type will be shown
* ✅ Use consistent naming across your app
* ✅ Add tooltips for additional context

### Modal Content

* ✅ Show relevant fields for the context
* ✅ Keep field count reasonable (not overwhelming)
* ✅ Use sections to organize information
* ✅ Include key identifiers (names, IDs, statuses)
* ✅ Show formatted values (not raw data)

### User Experience

* ✅ Test on mobile devices (modals should be responsive)
* ✅ Ensure modal is easy to close
* ✅ Keep loading times fast
* ✅ Consider accessibility (keyboard navigation, screen readers)

### When to Use vs. Navigate

* ✅ Use View for quick reference and staying in context
* ✅ Use Navigate for full record interaction and editing
* ✅ Provide both options when appropriate
* ✅ Consider user workflow and task flow

***

## Troubleshooting

### Button Doesn't Show Modal

**Issue**: Clicking button does nothing or shows error

**Solutions**:

* Verify related record exists (not null/empty)
* Check relationship field is properly configured
* Ensure user has permission to view the record type
* Verify the record hasn't been deleted
* Check browser console for errors

***

### Modal is Empty or Shows "No Data"

**Issue**: Modal opens but no fields are visible

**Solutions**:

* Configure Details component for that record type
* Toggle on at least some fields to display
* Check field visibility settings
* Verify user has permission to view those fields
* Ensure record has data in the fields

***

### Wrong Record Shows in Modal

**Issue**: Modal displays incorrect record

**Solutions**:

* Verify correct relationship field is selected
* Check relationship field is populated correctly in data
* Test with different records to confirm pattern
* Review relationship configuration in data source

***

### Related Record Not Found

**Issue**: Error says record doesn't exist

**Solutions**:

* Verify relationship field is populated (not null)
* Check related record hasn't been deleted
* Ensure it's a single-relationship field (not multi-select)
* Use visibility rules to hide button when relationship is empty

***

### Modal Shows Too Much/Too Little

**Issue**: Modal displays wrong amount of information

**Solutions**:

* Adjust Details component field configuration
* Toggle fields on/off as needed
* Group fields into collapsible sections
* Create separate view buttons for different detail levels

***

### Permissions Issues

**Issue**: Users can't view certain records

**Solutions**:

* Check table-level view permissions
* Verify field-level permissions for displayed fields
* Review role-based access settings
* Test with appropriate user roles

***

## Advanced Patterns

### Hierarchical Record Viewing

View nested relationships:

**Level 1**: View Customer (from Order) **Level 2**: View Account (from Customer modal)

Users can navigate through related records without leaving the context.

***

### Context-Sensitive Views

Show different buttons for different user roles:

**For Admins**:

* Button: "View Full Details"
* Shows: All fields including sensitive data

**For Standard Users**:

* Button: "View Summary"
* Shows: Limited fields, no sensitive data

Use visibility rules based on user role.

***

### Preview Before Action

Chain View with other actions:

**Step 1 - View Record**: Review details **Step 2 - Update Record**: Make changes (if user proceeds)

User can review before committing to action.

***

### Comparison Views

Create multiple view buttons side-by-side:

**Button 1**: "View Current Version" **Button 2**: "View Previous Version"

Users can compare different related records.

***

## Mobile Considerations

### Mobile-Optimized Views

* Keep field count lower for mobile
* Use vertical layouts
* Ensure modals are scrollable
* Test tap targets are large enough
* Consider full-screen modals on small devices

### Mobile vs. Desktop Views

You can create different buttons for different device types using visibility rules (if Noloco supports device-type rules), or optimize the Details component to work well on all devices.

***

## Accessibility

### Keyboard Navigation

* Modal should be keyboard-accessible
* Tab through fields in logical order
* ESC key should close modal
* Focus should return to button after closing

### Screen Readers

* Use descriptive button text
* Ensure field labels are clear
* Modal should announce when opened
* Provide clear close button

***

## Performance Considerations

### Loading Speed

* View a Record is generally fast (loads one record)
* Large numbers of fields may slow rendering
* Images and file fields can increase load time
* Consider showing only essential fields

### User Experience

* Modal should open quickly (< 1 second)
* Use loading indicator if needed
* Consider caching for frequently viewed records
* Optimize images and file previews

***

## When NOT to Use View a Record

❌ **Don't use when**:

* User needs to edit the record (use Navigate To instead)
* Viewing multiple related records (use a related view/table)
* Complex record with many tabs or sections (use full page)
* Embedding external content (use Show iFrame)
* Record has action buttons user needs access to

✅ **Do use when**:

* Quick reference needed
* Staying in context is important
* Read-only view is sufficient
* Previewing before navigation
* Mobile-friendly lightweight view needed


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.noloco.io/actions/action-buttons/view-a-record.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.