Skip to main content

Popup Widget

The Popup widget creates a modal dialog that displays content over the main interface. It's built using Element UI's dialog component and provides extensive customization options for content display, validation rules, and user interactions.

Basic Configuration​

Global Settings​

Name

  • The display name for the popup widget
  • Used for identification and reference within the interface

Variable/Model

  • Defines the data model binding for the popup
  • Controls the popup's visibility state and data context
  • Format: variableName or model.property

Content Management​

Dialog Properties​

Title

  • Sets the header text displayed at the top of the popup
  • Supports translation using the SF_translate filter
  • Can include dynamic content using variable interpolation

Content Structure

  • Popups contain a grid layout system (el-row/el-col)
  • Can include any combination of widgets: forms, tables, buttons, text, etc.
  • Widgets are rendered based on their individual validation rules

Nested Widget Support​

The popup acts as a container for other widgets:

  • Grid layouts for structured content organization
  • Form elements (inputs, selects, checkboxes, etc.)
  • Display widgets (text, titles, images, tables)
  • Interactive widgets (buttons, drawers, other popups)

Visibility and Validation​

Screen-Based Validation​

Configure different behaviors across multiple screens/contexts:

Available

  • Controls whether the popup is available in specific screens
  • Boolean value: true or false

Visible

  • Controls popup visibility with advanced condition support
  • Options:
    • Simple boolean: true or false
    • Dynamic conditions using variables: {{variableName}}
    • Complex expressions: {{user.role}} === 'admin' && {{status}} === 'active'

Required

  • Defines if popup interaction is mandatory
  • Inherits validation rules for contained form elements

Disable

  • Controls whether the popup can be opened/interacted with
  • Supports conditional logic similar to visibility

Advanced Visibility Conditions​

Variable References

  • Use {{variableName}} for dynamic conditions
  • Access nested properties: {{user.profile.role}}
  • Support for comparison operators: ===, !==, >, <, >=, <=

Complex Conditions

// Example conditions
{{isAuthenticated}} && {{user.permissions.includes('view_popup')}}
{{formStep}} >= 3 || {{userRole}} === 'admin'
{{status}} !== 'disabled' && {{popup_trigger}} === true

Styling and Layout​

Basic Styling​

Class Names

  • Static CSS classes: custom-popup large-modal
  • Dynamic classes using conditions:
{
  'urgent-popup': {{priority}} === 'high',
  'readonly-mode': {{userRole}} !== 'admin'
}

Size and Positioning

  • Width: Set popup width (pixels, percentages, or CSS units)
  • Height: Define popup height constraints
  • The popup automatically centers on screen

Behavior Settings​

Close on External Click

  • Don't Close on mask click: Prevents closing when clicking outside
  • Default: false (allows closing by clicking backdrop)
  • Set to true to require explicit close action

Modal Behavior

  • Blocks interaction with background content
  • Provides overlay/backdrop effect
  • Keyboard navigation support (ESC to close)

Content Widget Configuration​

Form Integration​

When containing form elements:

  • Form Validation: Inherits validation from parent form context
  • Data Binding: Form elements connect to the popup's model
  • Submission Handling: Form actions can close popup or trigger events

Grid Layout Options​

Column Configuration

  • Responsive grid system (24-column layout)
  • Column spans: Define width allocation for content sections
  • Responsive breakpoints: xs, sm, md, lg, xl

Alignment and Justification

  • Justify: start, center, end, space-around, space-between
  • Align: top, middle, bottom
  • Gutter: Spacing between columns

Event Handling​

On Close

  • Triggered when popup is closed (any method)
  • Can execute custom JavaScript functions
  • Access to popup data context

Visibility Changes

  • Automatic event firing on show/hide
  • Integration with parent component lifecycle

Widget Events​

Nested widgets maintain their individual event handlers:

  • Button clicks
  • Form submissions
  • Data changes
  • Validation events

Data Management​

Component Keys​

The popup automatically manages form keys for nested components:

SF_comp_keys: [
  {
    id: "widget_id",
    model: "data_model", 
    type: "widget_type",
    options: { /* widget-specific options */ }
  }
]

State Management​

Visibility State

  • Managed through comp_management object
  • Automatic state initialization
  • Persistent across component lifecycle

Data Context

  • Access to parent scope variables
  • Form data binding
  • Model synchronization

Configuration Examples​

Simple Information Popup​

{
  "type": "popup",
  "name": "User Information",
  "model": "showUserInfo",
  "options": {
    "title": "User Details",
    "dontCloseExternalClick": false,
    "validation": {
      "screen1": {
        "available": true,
        "visible": "{{selectedUser}} !== null",
        "required": false,
        "disable": false
      }
    }
  }
}

Form Popup with Validation​

{
  "type": "popup", 
  "name": "Edit Profile",
  "model": "editProfileModal",
  "options": {
    "title": "Edit User Profile",
    "dontCloseExternalClick": true,
    "classNames": "profile-edit-modal",
    "validation": {
      "screen1": {
        "available": true,
        "visible": "{{editMode}} === true && {{userRole}} === 'admin'",
        "required": true,
        "disable": "{{formSubmitting}} === true"
      }
    }
  }
}

Conditional Popup​

{
  "type": "popup",
  "name": "Confirmation Dialog", 
  "model": "confirmationVisible",
  "options": {
    "title": "Confirm Action",
    "dontCloseExternalClick": true,
    "classes": {
      "warning-popup": "{{actionType}} === 'delete'",
      "info-popup": "{{actionType}} === 'update'"
    },
    "validation": {
      "screen1": {
        "available": true,
        "visible": "{{pendingAction}} !== null",
        "required": true,
        "disable": false
      }
    }
  }
}

Best Practices​

Performance Optimization​

  • Use specific visibility conditions to avoid unnecessary renders
  • Implement proper data cleanup on close
  • Minimize nested widget complexity

User Experience​

  • Provide clear close mechanisms (buttons, ESC key)
  • Use appropriate sizes for content
  • Implement loading states for async operations

Accessibility​

  • Ensure keyboard navigation works properly
  • Provide appropriate ARIA labels
  • Maintain focus management

Data Integrity​

  • Validate form data before closing
  • Handle unsaved changes appropriately
  • Provide confirmation for destructive actions

Integration Patterns​

With Tables​

  • Row action popups for details/editing
  • Bulk operation confirmations
  • Filter/search interfaces

With Forms​

  • Multi-step wizards
  • Detailed input sections
  • File upload interfaces

With Navigation​

  • Context menus
  • Help systems
  • Settings panels

The Popup widget provides a powerful foundation for creating rich, interactive modal experiences while maintaining clean separation between content and presentation logic.