Studio Masks in Events

When configuring the Open modal window and Compute flow events, users can choose to display a floating pop-up window called Mask. The design of a Mask can be fully customized with graphical elements (e.g. containers, tabs, checkboxes, etc.) and the final user of the dashboard will interact with.

The Mask window is divided into three areas:

To customize the Mask window users need to drag the graphical elements from the right-hand-side of the Mask window to the central Mask stage. Then, users can further customize the dragged graphical elements by dragging any available variables from the left-hand-side panel onto the desired graphical element.

Both the width of the left panel and of the right panel can be enlarged/reduced using the handlebar located at the right/left of the panels. Panels can be also closed completely by clicking on the arrow located at the bottom of the Mask stage.

The Mask Stage

The Mask stage is the main area of the Mask stage window and this is where you will actually construct your Mask logic. Graphical elements are dragged from the graphic panels at the right-hand-side of the Mask window, and dropped in this white delimited space.

The Mask stage space is not infinite and its dimensions can be defined from the Mask context menu.

Once you have dragged graphical elements from the graphic panels into the delimited Mask area, you first need to select them to interact with them.

To select a graphical element, you simply left-click on it and a blue border will highlight the new selection. You cannot select more than one graphical element in a unique time.

The Mask Stage Context Menu

If you right-click on any point of the Mask stage area, the Set dimensions option will be shown. By selecting the Set dimensions option, the Set mask dimensions window opens.

Width options:

  • Width (px), it defines the width of the Mask window in pixel. The default value is set at 750 px.

  • Min width (-1 means no min), it defines the minimum width in pixel for the mask panel, which means that during the mask window resizing, the width of the mask won’t be lower than this value. The default value is -1, which means there’s no limit to width resizing of the mask window.

  • Max width (-1 means no max), it defines the maximum width in pixel for the mask panel, which means that during the mask window resizing, the width of the mask won’t be higher than this value. The default value is -1, which means there’s no limit to width resizing of the mask window.

Height options:

  • Height (px), it defines the height of the Mask window in pixel. The default value is set at 600 px.

  • Min height (-1 means no min), it defines the minimum height in pixel for the mask panel, which means that during the mask window resizing, the height of the mask won’t be lower than this value. The default value is -1, which means there’s no limit to height resizing of the mask window.

  • Max height (-1 means no max), it defines the maximum height in pixel for the mask panel, which means that during the mask window resizing, the height of the mask won’t be higher than this value. The default value is -1, which means there’s no limit to height resizing of the mask window.

Variable Panels

The variable panels are divided into two sub-panels:

  • Variable List, where users can find the list of available variables.

  • Variable Inspector, where users can define options related to variables currently used in the mask stage.

The Variable List panel, when the user has selected Mask configuring the Open modal window event, displays the list of variables available in the Variables tab of the view. While, when an user is configuring the Compute flow event, the Variable List panel in the Mask tab displays the variables available in the selected flow.

Users can customize their Mask by dragging the variables available in the Variable List panel onto the graphical options in the Mask stage.

Once a variable has been dragged onto a graphical option, the user can further customize it through the Variable Inspector panel. The Variable Inspector panel displays the customizable options, when the corresponding graphic element is selected and highlighted in the Mask stage.

As a title the Variable Inspector panel displays the name of the variable which has been dragged onto the graphic option. The available options in the Variable Inspector panel are:

  • Default - type in this checkbox the default value you want to display as a suggestion for the user, if you leave it blank no default value will be displayed.

  • Description - type in this checkbox any text you want to display as a tooltip.

  • Required - if selected, the corresponding graphic option will be considered as mandatory for the user.

Graphic Panels

The graphic panels are divided into two sub-panels:

  • Graphic widgets, where users can find the list of available graphic organizers.

  • Graphic options, where users can find the list of available graphical options.

From the Graphic widgets sub-panel, users can drag onto the Mask the following organizers:

The Graphic widgets panel changes its layout and switches from the list of graphic organizers to displaying the corresponding customizable options, when a graphic element belonging to the Graphic widgets list is selected and highlighted in the Mask stage.

From the Graphic options sub-panel, users can drag onto the Mask the following graphical options:

  • Checkbox

  • Combobox

  • Text field

  • Number field

  • Password field

  • Radio button

  • Structure list

  • Source control

  • Char list

  • Color Picker

  • General Items List

  • Code Field

  • Values Autocomplete

  • Calendar field

The Graphic option panel changes its layout and switches from the list of graphical options to displaying the customizable options, when the corresponding graphic element is selected and highlighted in the Mask stage.

Graphic Mask Connections