Skip to main content
Skip table of contents

Niagara - Pop-up - Creating and opening from the main screen

NOTE: The article uses .gif files, the process of loading them may take a while.

Pop-up screens can be used in many ways. In the case of visualization, they are usually used to confirm the change of important data or an additional window for parameter configuration.
This article outlines the process of creating and adding a pop-up window to the main screen. It is based on the example of approving a change.

Creating a pop-up window

  1. In the Files space, create a new PX file. This file will be the base for the pop-up screen.

NOTE: The .px file that will be used as the pop-up window can be saved in a different location than Files, but when referring to it on the home screen, the reference must be to the path from the Files folder. Otherwise, the Niagara Workbench window will show an error code.

  1. Open the newly created file and in the upper right corner of the screen switch it to edit mode by selecting Px Editor. In the example, a label and a button were created to approve the change of the variable value.

  2. To add the button, open the kitPx palette. The variable to be approved should be placed on the screen using drag&drop. A configuration pop-up window will appear to select the item of reference. In the case of creating an approval window, it will be the ActionButton from the kitPx palette.

Animation 1 Adding the Action button to the pop-up window

  1. In the settings of the newly added button, configure ActionBinding, which sets the value of a variable. For example, a variable of type NumericWritable that edits the temperature setpoint value.

Animation 2 An example of a solution to approve a change.

An example pop-up screen approving a change of a variable value has been created.

Opening a pop-up window

  1. The last step to use the pop-up window is to create an element on the main screen that calls it. In the example, the ActionButton is used, with ActionBinding removed and replaced with PopupBinding. In the newly added element, specify the path to the created pop-up window.

Animation 3 Adding the Popup Binding

  1. Everything has now been configured. Below are the results of the previously described process.

Animation 4 Sample pop-up window

 

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.