Popups

The Popup is a UI component used to display information, forms, confirmations, or messages in a floating window. It helps in improving user interaction without navigating away from the current page. This widget can be configured as modal or non-modal, making it highly flexible for different use cases.

We can have multiple popups configured for a single screen.

Key Features

• Modal & Non-Modal Support – Controls whether the background remains interactive.
• Draggable & Resizable – Allows users to reposition and resize the popup.
• Customizable Header & Footer – Includes title, close button, and action buttons.
• Event Bindings – Triggers actions when opened (onOpen) or closed (onClose).
• Supports Dynamic Content – Can render forms, tables, messages, or custom components.
• Header Image Support – Option to display an image in the popup header.
• Pinned Mode – Keeps the popup fixed in place to prevent repositioning.
• Maximizable – Provides an option to maximize the popup to full-screen mode.

Use Cases for Popup

• Displaying Forms (e.g., login, registration, feedback)
• Confirmation Messages (e.g., "Are you sure you want to delete?")
• Alerts and Notifications
• Showing Detailed Information (e.g., user profile, order details)

Create Popup

Follow the below steps to create a popup

1. From the explorer menu, right-click popups in an interface (or) master layout (or) Component and select Add.
2. In the properties panel, configure the properties as required and then click save icon.
3. The "Popup created successfully" message displays upon successful creation.
4. In the popup canvas, design the popup using the widgets as required and click save.

Name	Description	Comments
Basic Configuration
Name*	Provide the name of the popup.	Name must start with a character followed by alphanumeric or ''. No spaces are allowed. Except underscore (), no other special characters are allowed. Name cannot start with a number.
Header	Provide the title(text) for the popup.	It will be display in the header section of the popup.
Description	Provide the summary for the popup.	-
Header Image Url	Provide the url source for popup header.	Valid URL to display in the popup header.
isActive	Specify whether the popup is active. Either Yes or No.	By default, Yes is selected.
Basic Bindings
Visibility*	Provide the expression as required.	This popup will be visible only if the expression validated to true.
Header	Please select string value binding.	This value will be used to display the title of the popup.
On Close	Select the event for on close.	Callback to invoke when popup is close. Common use cases: Logging the close action, Triggering a save function before closing, Navigating to another page
On Open	Select the event for on open.	Callback to invoke when popup is open. Possible use cases: Fetching data to display in the popup, Initializing form fields, Running validation checks before allowing user interaction
Additional Configurations
Draggable	Specify whether the popup is draggable. Either Yes or No.	By default, no is selected. When set to Yes, allows the popup to be moved across the screen by clicking and dragging the header. When enabled, users can reposition the popup freely.
Model	Specify whether the popup is model. Either Yes or No.	By default, no is selected. When set to Yes, the popup will appear as a modal dialog, preventing interaction with the background elements. Useful for scenarios where user attention is required before proceeding.
Maximizable	Specify whether the popup is pinned. Either Yes or No.	By default, no is selected. When set to Yes, it enables a button in the popup header that allows users to maximize the dialog to occupy the full screen. Provides an enhanced view for content-heavy popups, improving usability.
Resizable	Specify whether the popup is resizable. Either Yes or No.	By default, no is selected. When set to Yes, it allows users to manually adjust the size of the popup by dragging its edges or corners. Helps in dynamically changing the content layout based on user preferences.
Id*	Provide a unique identifier for reference.	By default, an id is generated automatically.
Style & Layout
Height	The height for widget defines its vertical size in units.
Width	The width for widget defines its horizontal size in units.
Unit Type	Specify the type of unit used to define height and width. Options: px, rem, %.
CSS Class	Provide the CSS class name that exists in the application.
Style	Inline styles are a way to apply CSS directly for the widget. It allows quick styling without needing an external or internal CSS file.
Attributes Configuration
Name	Provide the name of the attribute.	e.g., title, tabindex, hidden, pTooltip, attr.aria-label, etc.
Value Type	Select an option from the available value types. Following are the list of options: Text, One-way Binding, Two-way Binding, Expression, Boolean Attribute, Directive, Template Reference Variable	Text: allows user to assign static values. One-way Binding: Dynamically assigns a value from the component model properties. Two-way Binding: Synchronizes value between UI and component, allowing automatic updates. Expression: Allows user to assign dynamic expressions or component model properties using expression builder. Boolean Attribute, Directive, Template Reference Variable: Use this option when no explicit value is required for attribute, typically for enabling features or referencing elements.
Value	Text → Enter a static value directly. One-way / Two-way Binding → Select a dynamic value from the available options in the autocomplete control. Two-way binding ensures automatic updates. Expression → Assign expression using the Expression Builder for dynamic evaluations. Boolean Attributes, Directives, Template Reference Variables → No explicit value input is required. These are typically standalone attributes used for enabling functionalities or referencing elements.	Note: Value field will be disabled when select below options. Boolean Attribute, Directive, Template Reference Variable

Note: An asterisk (*) denotes that the property is mandatory for creating a popup.

How to Use the Popup

Opening the Popup

• To open the popup, the visible binding model must be set to true.
• For instance, if you want to open the popup when clicking a button, you need to bind the button's click event to an action that sets the popup's visible model to true.

Closing the Popup

• Once the popup is open, you can close it by setting the visible model back to false.
• This ensures that the popup disappears from the view.

Configuring Popup Content

• The popup content can be designed and customized using the designer area.
• You can add various widgets, components, or dynamic content inside the popup layout.

Models, Event and Function Integration

• The popup supports events, functions, models, subscriptions, and validation groups.
• To use these functionalities, you must create the corresponding events, functions, models, and validation groups at the screen level.
• These configurations will be available for use within the popup.