Data Element - General

View properties of this element, along with a preview of its layout in a Data Grid.

Remarks

The Data Element General tab provides a unified workspace for reviewing and configuring the properties of a Data Element in Grooper, with a live preview of how the element will appear and behave in the Data Grid. This control is designed for solution designers, administrators, and subject matter experts who need to define, validate, and visualize the configuration of fields, sections, tables, or containers within a document's data model.

Purpose

Use this tab to view and edit all properties of the selected Data Element, such as extraction logic, validation rules, display settings, and advanced options. The live preview panel instantly reflects changes, allowing you to validate layout, formatting, and user experience before deploying the configuration.

UI Components

• Properties Panel:

  • Displays all configurable properties of the current Data Element in a categorized, interactive grid.
  • Supports inline editing, drop-down lists, checkboxes, color pickers, and expandable sections for complex properties.
  • Provides contextual help and validation for each property, with a help window that updates as you select different fields.
  • Right-click to access context menu commands such as Clear, Reset, Copy, and Paste.
  • Validation errors are visually indicated, and error messages are shown in the help window.
  • Keyboard navigation and multi-property selection are supported for efficient editing.

• Preview Panel:

  • Shows a live preview of the Data Element as it will appear in the Data Grid, including layout, formatting, and validation indicators.
  • Updates instantly as properties are edited, enabling immediate feedback on configuration changes.
  • Supports hierarchical and tabular views, reflecting the element's role as a field, section, table, or container.
  • Visual indicators highlight required fields, errors, sticky values, and custom styling.
  • May include context menu actions for field-level review, error navigation, and sticky value management.

• Toolbar and Buttons:

  • {load}: Enumerate tables and views in the database, and display them in the table list (for elements linked to external data sources).
  • {save}: Save changes to the properties of the Data Element.
  • {cancel}: Discard unsaved changes and revert to the last saved state.
  • Button states and tooltips provide guidance for available actions and indicate when unsaved changes are present.

Workflow and Scope

• The tab is available for any Data Element node in the design tree, including fields, sections, tables, and containers.
• Edit properties in the properties panel to define extraction logic, validation, display settings, and advanced options.
• Use the preview panel to validate the impact of configuration changes before saving.
• Save changes to update the Data Element, or cancel to revert to the previous configuration.

Example

The following diagram illustrates the typical layout of the Data Element General tab:

┌───────────────────────────────────────────────────────────────────────────┐
│ General                                            {load} {save} {cancel} │
├───────────────────────────────────────────────────────────────────────────┤
│ {Properties}                │ {Preview}                                   │
│ ┌─────────────────────────┐ │ ┌─────────────────────────────────────────┐ │
│ │ Property Grid           │ │ │ Data Grid Preview                       │ │
│ │ - Display Name          │ │ │ ┌────────────────────────────────────┐  │ │
│ │ - Value Extractor       │ │ │ │ Invoice Number: [_____]            │  │ │
│ │ - Required              │ │ │ │ Invoice Date:   [_____]            │  │ │
│ │ - Validation Rule       │ │ │ │ Subtotal:       [_____]            │  │ │
│ │ - Display Width         │ │ │ │ ...                                │  │ │
│ │ - CSS Class             │ │ │ └────────────────────────────────────┘  │ │
│ │ ...                     │ │ │                                         │ │
│ └─────────────────────────┘ │ └─────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘

• {Properties}: Edit and configure all properties of the data element.
• {Preview}: Live preview of the data element as it will appear in the data grid.
• {load}, {save}, {cancel}: Command buttons for loading external data, saving, and discarding changes.

Accessibility

• Fully navigable by keyboard and mouse.
• Contextual help and validation are provided for all properties.
• Tooltips and context menus offer guidance for available actions.

Advanced Features

• Live Preview: Instantly see the effect of property changes in the preview panel.
• Contextual Help: Access detailed documentation and usage guidance for each property.
• Error Navigation: Quickly locate and resolve validation errors using keyboard shortcuts and visual indicators.
• Sticky Values: Apply and retrieve sticky values for streamlined data entry across documents.
• Custom Styling: Use CSS properties and style sheets to customize the appearance of data elements in the grid.

Command Buttons

Button	Shortcut Key		Summary
play_circle load		►	Enumerate tables and views in the database, and display them in the table list. The load button retrieves tables and views from the connected database and displays them in the table list. Use this command for data elements linked to external data sources to refresh available tables and views. The button is only enabled when the data element is configured for database integration. Tooltips provide guidance on usage and error handling.
save save		►	Save changes to the properties. The save button commits all changes made to the properties of the current Data Element. Applies edits to extraction logic, validation, display settings, and advanced options. The button is only enabled when there are unsaved changes. Tooltips provide guidance on saving and versioning.
cancel cancel		►	Discard changes to the properties. The cancel button reverts all unsaved changes to the properties of the current Data Element. Restores all properties to their last saved state, discarding any edits made since the last save. The button is only enabled when there are unsaved changes. Tooltips provide guidance on canceling and data loss prevention.

Child Controls

Name	Type		Summary
Properties	Property Grid	►	Properties of the data element. The Properties panel displays all configurable properties of the current Data Element in a categorized, interactive grid. Supports inline editing, drop-down lists, checkboxes, color pickers, and expandable sections for complex or list properties. Provides contextual help and validation for each property, with a help window that updates as you select different fields. Right-click any property to access context menu commands such as Clear, Reset, Copy, and Paste. Validation errors are visually indicated, and error messages are shown in the help window. Keyboard navigation and multi-property selection are supported for efficient editing. Use this control to configure all aspects of the data element, including extraction logic, validation, display settings, and advanced options.
Preview	Data Grid	►	Displays a preview of how the data element will look in the Data Grid. The Preview panel provides a live, interactive preview of the Data Element as it will appear in the Data Grid. Instantly updates as properties are edited, reflecting changes to layout, formatting, validation, and display settings. Supports hierarchical and tabular views, showing the element's role as a field, section, table, or container. Visual indicators highlight required fields, errors, sticky values, and custom styling. May include context menu actions for field-level review, error navigation, and sticky value management. Keyboard shortcuts are available for error navigation (F8), list search (F7), and cell navigation. Use this control to validate the impact of configuration changes and ensure the data element appears and behaves as intended.

Used By

Design Tab Host