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
In build mode, navigate to the record page where you want the button
Click the "+" button in the Action Buttons section
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:
Enable the fields you want to show in the modal
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:
Navigate to the record type's detail page in build mode
Find the Details section
Configure which fields to show:
Toggle fields on/off
Drag to reorder
Group into sections
Add section headers
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
Last updated
Was this helpful?