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 them.

The Mask window is divided into three areas:

  • the left panel located on the left side of the Mask window,

  • the mask stage located in the middle of the Mask window,

  • the components panel located on the right side of the Mask window.

To customize the Mask window users need to drag the Components from the right-hand-side of the Mask window to the central Mask stage. Then, users can further customize the dragged graphical elements by associating an Option defined in the Options tab, or they can create connections between Components using the Connections tab.

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 window and this is where you will actually construct your Mask logic. Graphical elements are dragged from the components panel at the right-hand-side of the Mask window, and dropped in this blank central delimited space.

The Mask stage space is not infinite and its dimensions can be defined in the Summary tab.

Once you have dragged graphical elements from the Components panel into the delimited Mask area, their layout menu opens, which varies according to the chosen component.

Define the settings of the Component and click APPLY, otherwise click CANCEL to close the window.

The layout menu can be opened also through the component context menu when working on masks.

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


Left Panel

The left panel is divided into four tabs:

  • The Summary tab, where the mask’s characteristics can be visualized and modified.

  • The Options tab, where the options which will be associated to the components on the stage will be set up.

  • The Graphics tab, where the list of the Components used in the mask is available.

  • The Connections tab, where it is possible to set up connections which will be used to link components.

It is possible to interact with all these tabs, except the Graphics one, through the pencil icon located in the top-right corner of each tab.


Components Panel

The Components panel contains all the graphical widgets needed to customize a Mask.

They are divided into three families:

A more detailed description of each component, its context menu and configuration is available at the corresponding page.