View a Record

Display record details in a modal using action buttons

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.

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


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


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

  • ✅ 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


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


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


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

Last updated

Was this helpful?