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.
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.
For implementing the
PopupWindow control, we will first create a class with the name PopupWindowDemo which will be the extension of
Code snippet for PopupWindowDemo
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
showWindow() can be used to display the window.
Advantages of PopupWindow control?
This control renders the existing view inside the window by only using
The window can be customized in multiple ways with the help of provided render properties, giving more control over the user interface.
PopupWindowis 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