Lightbox Overview Lightbox editing opens a modal dialog window for editing field values outside the grid. This provides dedicated space for rich text formatting, large text entry, and complex field editing.
Triggering Lightbox Editing Lightbox editing is triggered by clicking on a field configured for lightbox display.
Trigger Method Activation Use Case Cell click Single click on field Text or rich text fields Double click Double-click required When inline editing is too crowded Edit button Embedded cell button Accessibility and clarity Keyboard F2 key or Enter Keyboard-only navigation
Text Field Lightbox Configuration Text fields can be configured to use lightbox editing for better control and visibility.
Basic Configuration { "header" : "Description" , "bindings" : "description" , "type" : "text" , "lightbox" : true , "lightboxHeight" : 400 , "lightboxWidth" : 600 }
Property Type Default Description lightboxBoolean false Enable lightbox editing for this field lightboxWidthNumber 600 Width of lightbox dialog in pixels lightboxHeightNumber 400 Height of lightbox dialog in pixels lightboxTitleString Column header Custom title for the lightbox dialog lightboxReadOnlyBoolean false Open lightbox in read-only mode
Rich Text Field Lightbox Rich text fields benefit from lightbox editing to preserve formatting and display editing tools.
Rich Text Lightbox Example { "header" : "Risk Description" , "bindings" : "description" , "type" : "text" , "lightbox" : true , "lightboxHeight" : 500 , "serverRender" : false , "enableRichText" : true }
Inline grid editing of rich text fields may cause formatting loss (line breaks, images, styling). Always use lightbox editing for Text type fields to preserve Polarion formatting.
Lightbox Behavior Lightbox dialogs provide standardized behavior across all field types.
Dialog Lifecycle Event Behavior Notes Open Displays current field value Modal overlay blocks grid interaction Edit User modifies content Changes are staged in memory Cancel Discards all changes Returns to previous value Save Validates and commits changes Triggers grid save operation Validation Real-time or on-save Error messages displayed in dialog
Dialog Controls { "lightboxControls" : { "showCancel" : true , "showSave" : true , "showClear" : false , "autoSave" : false , "saveOnEnter" : false } }
Control Type Default Purpose showCancelBoolean true Show Cancel button showSaveBoolean true Show Save button showClearBoolean false Show Clear/Reset button autoSaveBoolean false Save on blur/close saveOnEnterBoolean false Save with Ctrl+Enter
Field-Specific Lightbox Configuration Enumeration Field Lightbox Enumeration fields can use lightbox for multiEnum display and filtering.
{ "header" : "Risk Categories" , "bindings" : "categories" , "type" : "multiEnum:riskCategory" , "lightbox" : true , "lightboxHeight" : 350 , "enableSearch" : true }
Date Field Lightbox Date fields open a calendar picker in lightbox mode.
{ "header" : "Due Date" , "bindings" : "dueDate" , "type" : "date" , "lightbox" : true , "lightboxShowCalendar" : true , "lightboxShowTime" : false }
User Reference Lightbox User reference fields show user directory in lightbox.
{ "header" : "Assigned To" , "bindings" : "task.assignee" , "type" : "ref:user" , "lightbox" : true , "lightboxShowGroups" : true , "enableSearch" : true }
Lightbox Styling and Layout Lightbox appearance can be customized through configuration properties.
Dialog Styling { "header" : "Notes" , "bindings" : "notes" , "type" : "text" , "lightbox" : true , "lightboxCss" : "lightbox-large" , "lightboxBodyCss" : "lightbox-dark" , "lightboxHeight" : 500 , "lightboxWidth" : 700 }
Property Type Purpose lightboxCssString CSS class for dialog container lightboxBodyCssString CSS class for dialog body lightboxHeaderCssString CSS class for dialog header lightboxHeightNumber Dialog height in pixels lightboxWidthNumber Dialog width in pixels
Lightbox Content Rendering How content is displayed within the lightbox depends on field type and configuration.
Text Content Display { "header" : "Analysis" , "bindings" : "analysis" , "type" : "text" , "lightbox" : true , "lightboxRenderMode" : "html" , "multiLine" : true , "wordWrap" : true }
Render Mode Display Use Case plaintextPlain text without formatting Simple text fields htmlHTML-rendered content Rich text preserved markdownMarkdown-formatted content Structured documentation preformattedMonospace, spaces preserved Code or logs
Lightbox Validation Lightbox dialogs support field validation before saving changes.
Validation Configuration { "header" : "Title" , "bindings" : "title" , "type" : "text" , "lightbox" : true , "lightboxValidation" : { "required" : true , "minLength" : 3 , "maxLength" : 255 , "pattern" : "^[A-Z]" , "customValidator" : "validateTitle" } }
Validator Type Example Message requiredBoolean true ”This field is required” minLengthNumber 3 ”Minimum 3 characters required” maxLengthNumber 255 ”Maximum 255 characters allowed” patternRegex ^[A-Z]”Must start with uppercase” customValidatorFunction validateTitleCustom error message
Keyboard Navigation in Lightbox Lightbox dialogs support keyboard shortcuts for efficient editing.
Key Combination Action Notes Tab Move to next field Cycles through dialog controls Shift+Tab Move to previous field Reverse tab order Ctrl+Enter Save and close When saveOnEnter: true Escape Close without saving Cancels all changes Ctrl+A Select all text Text fields only Ctrl+Z Undo Supported in rich text Ctrl+Y Redo Supported in rich text
Lightbox State Persistence Lightbox dialogs can persist state across grid operations.
State Configuration { "lightbox" : true , "lightboxPersistState" : true , "lightboxRememberSize" : true , "lightboxRememberPosition" : true }
Property Type Default Effect lightboxPersistStateBoolean false Remember dialog state in session lightboxRememberSizeBoolean false Remember user-resized dimensions lightboxRememberPositionBoolean false Remember window position
Lightbox Usage Patterns Common configuration patterns for different use cases.
Large Text Entry For fields that need significant space for editing:
{ "header" : "Detailed Analysis" , "bindings" : "detailedAnalysis" , "type" : "text" , "lightbox" : true , "lightboxHeight" : 600 , "lightboxWidth" : 800 , "multiLine" : true , "wordWrap" : true , "lightboxShowLineNumbers" : true }
Read-Only Content Display For viewing complex formatted content:
{ "header" : "Risk Assessment" , "bindings" : "assessment" , "type" : "text" , "lightbox" : true , "lightboxReadOnly" : true , "serverRender" : true }
Conditional Lightbox Display Lightbox can be enabled conditionally based on field content or user role:
{ "header" : "Notes" , "bindings" : "notes" , "type" : "text" , "lightbox" : "${!shortNotes}" , "lightboxHeight" : 400 }
Accessibility and Lightbox Lightbox dialogs should follow accessibility guidelines.
Ensure dialogs have proper ARIA labels
Support keyboard-only navigation
Provide clear focus indicators
Include descriptive error messages
Allow dialog dismissal with Escape key
Lightbox editing can impact performance with large documents.
Scenario Impact Recommendation Many lightbox fields Slower initial load Limit to 5-10 lightbox fields Large text content Slow dialog opening Consider pagination or lazy-load Complex validation Validation delay Use debouncing on custom validators Real-time sync Network traffic Batch save operations
For guidance on configuring lightweight columns, see Column Configuration .
Support Tickets Source Code
PolarionAppConfigManager.javaSheetConstants.ts 
