Setup Data Table Screen Design Standard

Setup Data Table Screen Design Standard

Article Type: Standard / Reference Audience: Solution Architects, Application Designers, Developers Module: Fuuz Platform - Application Designer Applies to Versions: 2025.12+ Template Reference: Table_Screen_Design_Template_-_Setup_0_0_1.json

Setup Data table screens provide specialized interfaces for managing small, stable configuration and reference data defined during application deployment and maintained by administrators. This design standard defines a streamlined framework for building filter-and-table screens optimized for Setup Data, which differs from Master Data and Transactional Data due to its small size, infrequent changes, admin-only access, and critical role in application configuration.

1. Overview

Setup Data represents the foundational definitions, classifications, and parameters that control application behavior and provide dropdown options, status values, and configuration settings throughout the system.

What is Setup Data?

Setup Data represents configuration and reference data defined during deployment that rarely changes after initial setup. These records are typically managed exclusively by administrators, contain tens to hundreds of records (not thousands), and serve as lookup values, dropdown options, workflow states, or system parameters. Setup Data is foundational to application operation—changing or deleting setup records can have cascading effects on transactions, master data, and business processes.

Examples of Setup Data:

• Status Types: Work Order Statuses (Draft, Released, In Progress, Completed), Quality Statuses (Pass, Fail, Review), Approval Statuses
• Categories: Product Categories, Customer Types, Equipment Classes, Defect Classifications
• Units of Measure: EA, LB, KG, M, FT, GAL, L - with conversion factors
• Reason Codes: Downtime Reasons, Scrap Reasons, Return Reasons, Adjustment Reasons
• Priority Levels: Low, Medium, High, Critical, Emergency
• Workflows: Data Flow definitions, Saved Transforms, Notification Templates
• Topics: MQTT topics, event subscriptions, integration endpoints
• System Parameters: Global settings, thresholds, timeouts, default values

Design Principles

1. Simplicity First: Setup Data screens are simple, clean interfaces focused on quick viewing and editing
2. Admin-Oriented: Designed for administrator users who understand system implications of changes
3. Auto-Load Appropriate: Small datasets can auto-load for immediate viewing without performance concerns
4. Modal Forms Preferred: Quick edits in modal overlays rather than navigating to separate detail screens
5. Deletion Protection: Never allow mass delete; setup records are foundational to application integrity

Setup Data Characteristics

Feature	Setup Data Configuration
Auto-Search (autoLoad)	✓ Typically enabled - small datasets load quickly
Image Columns	✗ Not recommended - setup data is text-based
Wiki Pages	✗ Rarely needed - setup data is self-explanatory
Mass Delete	✗ Never - foundational data, cascading impact
Mass Update	✗ Never - each setup record requires individual review
Filter Complexity	Minimal - 1-2 filters sufficient (type, active/inactive)
End User Exposure	⚠ Often admin-only - end users see values in dropdowns, not setup screens
Edit Pattern	Modal forms preferred - quick in-place editing without navigation
Typical Volume	Tens to hundreds of records - stable after initial setup

Important: Setup Data is foundational to application operation. Deleting or incorrectly modifying setup records can break workflows, cause data integrity issues, or render the application unusable. NEVER allow mass delete or mass update. Each setup record change should be carefully reviewed by administrators who understand system implications.

2. Architecture & Data Flow

Template Architecture

Setup Data table screens use a simplified version of the standard horizontal split layout, optimized for small datasets and minimal filtering:

ROOT (Screen)
└── ContainerOuter (Horizontal flex, flexGrow)
    ├── ResizableFilterPanel (0-300px, collapsible)
    │   └── ContainerFilterOuter
    │       ├── ContainerFilterPanelHeader (40px, with Search action)
    │       │   └── BrandSeparator (4px gradient)
    │       └── FormFilterPanel
    │           ├── Type/Category Filter (optional)
    │           ├── Active Only Switch
    │           └── Minimal additional filters
    │
    └── ContainerBody (flexGrow, left border #5b30df)
        ├── ContainerTableHeader (40px, action toolbar)
        │   ├── ContainerActionsStandard (Create only)
        │   └── ContainerActionsCustom (minimal)
        ├── BrandSeparator (4px gradient)
        └── Table1 (flexGrow, auto-loads small dataset)

Visual Layout

┌────────────────────┬──────────────────────────────────────────────┐
│  Filter Panel      │  ContainerBody                               │
│  (Resizable 0-300) │                                              │
│  Often collapsed   │  ┌────────────────────────────────────────┐  │
│                    │  │ ContainerTableHeader (40px)            │  │
│  ┌──────────────┐  │  │ [Create]                               │  │
│  │ Filter Panel │  │  └────────────────────────────────────────┘  │
│  │ [🔍 Search]  │  │  ════════════════════════════════════════════│
│  └──────────────┘  │                                              │
│  ═══════════════   │  ┌────────────────────────────────────────┐  │
│  ┌──────────────┐  │  │                                        │  │
│  │ Type Filter  │  │  │              Table1                    │  │
│  │ (optional)   │  │  │        (Auto-Loaded Data)              │  │
│  ├──────────────┤  │  │                                        │  │
│  │ ☐ Active Only│  │  │  ⋮ │ Code    │ Name        │ Active  │  │
│  └──────────────┘  │  │  ⋮ │ DRAFT   │ Draft       │ ✓       │  │
│                    │  │  ⋮ │ RELEASE │ Released    │ ✓       │  │
│                    │  │  ⋮ │ PROG    │ In Progress │ ✓       │  │
│                    │  │  ⋮ │ COMP    │ Completed   │ ✓       │  │
│                    │  │  ⋮ │ CANCEL  │ Cancelled   │ ✓       │  │
│                    │  │                                        │  │
│                    │  └────────────────────────────────────────┘  │
│                    │                                              │
│                    │  Status: 5 records                           │
└────────────────────┴──────────────────────────────────────────────┘

Key Differences from Master Data Tables

• Auto-Load Enabled: Setup Data is small enough to auto-load without performance issues
• Minimal Filters: Typically 1-2 filters maximum (Type, Active Only)
• Filter Panel Often Collapsed: Users see all data immediately; filters are optional refinement
• No Delete Action: Setup Data deletion is restricted to prevent cascading issues
• Modal Edit Forms: Quick in-place editing rather than separate detail screens
• Row Actions: Edit Only: No delete, no complex operations
• Admin-Only Access: Setup screens typically hidden from end users via role-based access control

3. Use Cases

• Status Configuration: Define and maintain work order statuses, quality statuses, approval states, and workflow step definitions used throughout the application.
• Category Management: Maintain product categories, customer types, equipment classes, and other classification schemes that organize master and transactional data.
• Unit of Measure Setup: Configure measurement units (EA, LB, KG, etc.) with conversion factors and display formats for inventory and production operations.
• Reason Code Definition: Define downtime reasons, scrap reasons, return reasons, and adjustment reasons for operational event tracking and root cause analysis.
• Priority Configuration: Establish priority levels for work orders, maintenance requests, quality issues, and other operational activities.
• Workflow Configuration: Manage Data Flow definitions, Saved Transform configurations, and integration endpoints that automate business processes.
• System Parameter Tuning: Adjust global settings, thresholds, timeouts, default values, and other system parameters that control application behavior.
• Dropdown Population: Ensure all dropdown lists, select menus, and picklists throughout the application have complete, accurate value sets.
• Initial Deployment Setup: Configure foundational reference data during application deployment before end users begin operations.
• Periodic Maintenance: Review and update setup values quarterly or annually to add new categories, retire obsolete codes, or adjust parameters.

4. Screen Details

Auto-Search Configuration

Typically enable auto-search (autoLoad: true) for Setup Data tables since datasets are small and users expect immediate viewing.

{
  "query": {
    "autoLoad": true
  }
}

Note: Setup Data tables rarely exceed 100-200 records. Auto-loading provides immediate access without requiring users to apply filters. If a specific setup table grows beyond 250 records, consider disabling auto-load and requiring a filter.

Filter Panel Standards

Minimal Filter Organization

Setup Data requires minimal filtering since datasets are small and completely visible:

1. Type/Category Filter (optional): If setup data has subtypes (e.g., Status Type: Work Order, Quality, Maintenance)
2. Active Only Switch: Toggle to show/hide inactive setup records
3. That's It: More filters are typically unnecessary for setup data volumes

Active Only Switch

{
  "type": "switch",
  "width": "100%",
  "label": "Active Only",
  "dataPath": "activeOnly",
  "defaultValue": true
}

Note: Default to showing only active records. Administrators can toggle off to view inactive/deprecated setup values when needed for historical reference or reactivation.

Filter Actions

Action	Icon	Transformation
Search	magnifying-glass	$components.Table1.fn.search()
Clear/Reset	eraser	$components.FormFilterPanel.fn.reset()

Table Configuration

Essential Table Properties for Setup Data

{
  "width": "100%",
  "height": "0px",
  "flexGrow": true,
  "selectable": "single",
  "showToolPanels": true,
  "showStatusBar": true,
  "enableGrouping": false,
  "enableCharts": false,
  "showColumnMenu": false,
  "enableRowDragging": false,
  "disableColumnDragging": true,
  "disableDragLeaveHidesColumns": true,
  "masterDetail": false,
  "hideTableHeader": false,
  "rowMultiSelectWithClick": false
}

Query Configuration

{
  "query": {
    "api": "Application",
    "model": "YourSetupDataModel",
    "dataPath": "edges",
    "autoLoad": true,
    "fields": ["id"],
    "dataSubscription": { "enabled": false }
  }
}

Default Sort

Sort by display order or name for logical presentation:

{
  "defaultSort": [
    { "field": "TableColumnOrder", "direction": "asc" }
  ]
}

Column Standards

Column Layout Order for Setup Data

Setup Data table screens follow simplified column order:

1. Actions Menu Column (Edit only) — 40px
2. NO IMAGE COLUMNS (not needed for text-based setup data)
3. Code/ID Column (Short identifier used in dropdowns, API references)
4. Name/Label Column (Display name shown to users)
5. Description Column (Optional detailed explanation)
6. Type/Category Column (If setup data has subtypes)
7. Order/Sequence Column (Optional display order control)
8. Active Status Column (Boolean indicating if record is in use)
9. NO AUDIT COLUMNS (Audit details not typically needed for setup data viewing)

Code Column

{
  "label": "Code",
  "format": "text",
  "sortable": true,
  "dataPath": "code",
  "width": "100px",
  "showColumnSuppressMenu": true
}

Name/Label Column

{
  "label": "Name",
  "format": "text",
  "sortable": true,
  "dataPath": "name",
  "width": "200px",
  "showColumnSuppressMenu": true
}

Active Status Column

{
  "label": "Active",
  "format": "boolean",
  "sortable": true,
  "dataPath": "active",
  "width": "80px"
}

Action Patterns

Table Header Actions for Setup Data

Action	Icon	Color	Notes
Create Single	plus	success	Opens modal form for new setup record

NO DELETE, NO MASS UPDATE, NO BULK ACTIONS

Row Actions Menu

{
  "label": " ",
  "format": "menu",
  "sortable": false,
  "dataPath": "actions",
  "width": "40px",
  "menuIcon": "ellipsis-v",
  "iconSize": "small",
  "showColumnSuppressMenu": false,
  "actions": [
    { "text": "Edit", "icon": { "icon": "pencil", "color": "warning" } }
  ]
}

Modal Form Editing

Setup Data edit actions should open modal forms for quick in-place editing:

• Use Dialog component with form inside
• Include Code, Name, Description, Type, Active fields
• Provide Save and Cancel buttons
• Refresh table after successful save
• No navigation to separate screens

Critical: NEVER allow mass delete or individual delete actions on Setup Data tables. Deleting setup records can cascade through the entire application, breaking dropdowns, workflows, and data integrity. If a setup value is no longer needed, mark it as inactive rather than deleting it.

5. Technical Details

Modal Form Implementation

Setup Data editing uses modal forms to provide quick access without navigation overhead.

Modal Form Structure

• Place Dialog component at screen root level (sibling to ContainerOuter)
• Dialog opens via action transformation setting dialog visibility state
• Form inside dialog includes all editable Setup Data fields
• Save button triggers mutation and closes dialog
• Cancel button closes dialog without saving
• After save, table automatically refreshes to show updated data

Inactivation vs. Deletion

Setup Data should never be deleted. Instead, use the inactivation pattern.

Inactivation Benefits

• Preserves Historical References: Existing transactions still reference setup values even after retirement
• Prevents Broken Dropdowns: Dropdown lists continue to function, showing inactive values for existing records
• Supports Reactivation: Setup values can be easily reactivated if needed again
• Audit Compliance: Complete configuration history maintained for regulatory compliance
• Reporting Accuracy: Historical reports continue to display correct status/category names

Implementation Pattern

• All Setup Data models include an active boolean field (default: true)
• Dropdown queries filter to active: true for new transactions
• Existing records display inactive values without filtering
• Setup Data table shows all records with "Active Only" toggle defaulting to true
• Edit form provides checkbox to mark records inactive

Naming Conventions

Use the same naming conventions as Master Data tables:

• Screen Names: StatusTypes, Categories, UnitsOfMeasure, ReasonCodes
• Table Names: Table1 (maintains consistency)
• Filter Form: FormFilterPanel (maintains consistency)
• Modal Dialog: DialogEditSetup or DialogEditRecord
• Edit Form: FormEditSetup

6. Troubleshooting

• Issue: Setup values not appearing in dropdown lists throughout application • Cause: Records marked inactive or query filtering incorrectly • Fix: Verify setup records have active: true; check dropdown queries don't over-filter; ensure proper predicate queries for "in use" vs "available for selection"
• Issue: Cannot create new setup record • Cause: Unique constraint violation on code field or missing required fields • Fix: Verify code field is unique; check all required fields populated; review validation errors in modal form
• Issue: Edit modal doesn't open • Cause: Dialog component not configured or action transformation incorrect • Fix: Verify Dialog component exists at screen root; check row action transformation sets dialog visibility state; ensure dialog state variable initialized
• Issue: Table doesn't refresh after save • Cause: Missing table refresh call after mutation • Fix: Add table.fn.search() call in save button action after successful mutation; or use mutation result to update table cache
• Issue: Active Only filter not working • Cause: Filter dataPath doesn't match query parameter or predicate incorrect • Fix: Verify Active Only switch dataPath maps to query active field; check GraphQL predicate uses correct field name; ensure boolean comparison is exact (active: true)
• Issue: Users accidentally deleted critical setup records • Cause: Delete action mistakenly added to setup screen • Fix: REMOVE delete action immediately; restore deleted records from backup or Data Change History; implement inactivation pattern instead; document setup data protection policy
• Issue: Changes to setup data not reflecting immediately in other screens • Cause: Client-side caching or screens not re-querying • Fix: Implement cache invalidation on setup data changes; consider using subscriptions for setup data; document that users may need to refresh screens after setup changes
• Issue: End users seeing setup data screens they shouldn't access • Cause: Role-based access control not configured • Fix: Verify setup screens restricted to Admin role only; check route configuration includes proper role requirements; test with non-admin user accounts
• Issue: Setup data order not displaying logically • Cause: No order/sequence field or default sort not configured • Fix: Add order field to setup data model; populate with display sequence values; set table default sort on order field ascending; provide UI for administrators to adjust order
• Issue: Filter panel takes up too much space for small setup datasets • Cause: Filter panel defaults to open • Fix: Consider defaulting filter panel to collapsed for setup screens; users can expand if needed; or reduce filter panel default size to 200px instead of 300px

7. Revision History

Version	Date	Editor	Description
1.0	2024-12-26	Fuuz Documentation Team	Initial Release - Setup Data Table Screen Design Standard

See Also

• Master-Data-Table-Screen-Design-Standard
• Historical-Data-Table-Screen-Design-Standard
• Mobile-Screen-Design-Standard
• HMI-Template-Standard-ISA-101-Compliant
• Data-Model-Schema-Design-Standards

---

Source: support.fuuz.com