WebAtoms - PopupWindow

This article will cover the popup window in WebAtoms. Today we will learn about implementing a popup window.

What is a Popup window?

Pop up window is a user interface window displayed in the foreground of a screen. The appearance of the popup window can be controlled programmatically with the help of events.

Why PopupWindow control?

WebAtoms provides a simple way of implementing a popup window with features for creating a custom window. With the help of PopupWindow control, we can add forms, lists, editors, etc., to the window.

PopupWindow is a class component that extends from AtomControl. To apply this control, we have to extend the component class from PopupWindow. Html or JSX inside the render() method will be displayed inside the popup with all the styles and click events.

What are the properties of PopupWindow control?

• title - It is a property that allows the user to set the title at the top of the window.

• showWindow() or showModal() - It's a static function that displays the window that allows the user to display the window when called. It also has parameters that are useful for passing data between screens.

• close() - It is a function that closes the window when called.

• titleRenderer - It is a property that allows the user to customize the header with Html or JSX tags instead of a plain title.

Implementing PopupWindow

For implementing the PopupWindow control, we will first create a class with the name PopupWindowDemo which will be the extension of PopupWindow.

Code snippet for PopupWindowDemo

Adding style

---

For this example, we will create a simple screen (PopupWindowScreen) with a button when it's clicked, will call the method showWindow(), and the popup will appear on the screen.

Code snippet for PopupWindowScreen

Both showModal() and showWindow() can be used to display the window.

Adding style

---

Advantages of PopupWindow control?

• This control renders the existing view inside the window by only using extend keyword with PopupWindow.

• The window can be customized in multiple ways with the help of provided render properties, giving more control over the user interface.

• PopupWindow is also draggable, which is beneficial while working with multiple windows on the screen.

• We can open or close the window programmatically, which helps display or close the window during the click, hover, or any event.

• We can also create alert or confirmation dialog windows using PopupWindow.