Studio Widgets¶

Widgets are the base objects of Rulex Studio and the building blocks composing our Slides, Dialogs and Reports. They are composed by two elements, the node and the content:

The node is the structure embedding the content, and it is common to all the widgets.
The content is the graphical representation of data, and it varies for each widget.

They are located in the right panel of the stage window, and their nature and behavior varies a lot depending on the widget type. For this reason, they are organized in families and sub-families to help the user to understand the usage of each of them.

As described in the Rulex Studio Overview, the graphical representation offered by Rulex Studio View is more than a simple dashboarding. Users can interact directly with the data underlying their analyses, trigger modifications, and perform editing operations on them. Depending on what users want to achieve with a view, widget families are organized around three different aims:

In this page, we will analyze the common characteristics of all the widgets. By clicking on the links above, you will be redirected to pages that provide an extensive description of the possibilities offered by Rulex Studio. Additionally, each widget type will be presented in a dedicated page for a comprehensive overview of its customization.

Widgets Node¶

The first step to start working on Widgets is to drag the desired one from the Widgets list on the right panel of the stage window and drop it onto the slide.

If the widget requires it, it can be associated to data attributes to interact with them. In the Datasets tab, users will browse through the tables and choose the desired attribute/s to visualize in the widget (it is possible to select more than one attribute at the same time by pressing either CTRL or Shift keys). Once users have made their choice, they will proceed by dragging the attribute/s onto the widget on the slide.

After the attribute is dragged, as explained above, it will be allocated in the widget to a default position. In some cases, depending on the type of widget, users can define further configurations, which are explained in detail at the corresponding page of each specific widget. At the same time, the dropping area could be multiple if different attributes can be associated in different ways to the same widget. Even in this case, we refer to the single widget page for further explanations.

Every widget shares a common part: the node. The node is responsible for the widget location and size. By selecting any of the widgets dropped on the stage, you can highlight the node transformer, which allows you to modify node dimensions. Moreover, users can move Widgets within the slide by simply dragging around their selected node. It is then sufficient to hover their border, drag and finally drop them where desired.

To resize the height and the width, users need to click the widgets and adjust their dimensions using the squared handles along the border. Additionally, some Widgets can also be rotated using the circular icon above them, which appears when a widget is selected.

Widget Context Menu

Some other interactions with Widgets are possible through the widget context menu, that appears by right-clicking on the widget border. The available options are:

Open widget layout, it shows all the specific widget layout customizations.
Open node layout, it shows all the layout options of the general node, which are explained in detail below.
Set events, it allows defining which trigger will set out the event. Once selected the event window opens up ready to configure.
Arrange options: which controls the z dimension of the node, hence their overlapping behavior:
- Send to back, it moves the selected widget behind all the others.
- Send backward, it moves the selected widget one step behind.
- Bring forward, it moves the selected widget one step ahead.
- Bring to front, it moves the selected widget ahead of all the others.
Delete, it deletes the widget.
Copy, it copies the widget.

Note

Except for the Open widget layout, whose internal options change according to the specific widget type, the other options mentioned above are common to all Widgets since they are associated to node properties.

Tip

When clicking on the Open widget layout, most of the options can be parametrized by clicking on the fx icon, which appears next to each option when hovering over it with the cursor. At this point users can write the desired GOLD code in the window that automatically appears. The procedure is the same as explained in the dedicated Rulex Factory page. The only difference affects the attribute definition. While in the Data Manager there is only one table, here there are multiple tables that could contain the same attribute or an attribute with the same name. In order to specify the one to use it is sufficient to write $tablesname!attributename.

The parametrization is present for most of the options. If it is not available, a note will specify this in the appropriate section.

Node Layout¶

One of the entries of the Widgets context menu refers to the Node layout menu where general characteristics of the node can be modified or customized.

In the table below, users can find the explanation of the Open node layout options.

Subsection	Option	Description
Position	X position	It defines the widget position on the X-axis of the slide/dialog/page.
	Y position	It defines the widget position on the Y-axis of the slide/dialog/page.
Size	Lock aspect ratio	If selected, when users modify one size value, all the other values will adapt accordingly.
	Width (px)	It defines the width of the widget.
	Height (px)	It defines the height of the widget.
	Scale width (%)	It defines the width as a percentage.
	Scale height (%)	It defines the height as a percentage.
Rotation	Angle	It defines the degrees of the widget rotation.
Node layout	Node as a paper	If selected, a shading along the widget border will appear.
	Node is visible	If not selected, the context is hidden in the slide/dialog/page.
	Border style	It defines the border layout. The possible values are: Solid, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset, None, Hidden.
	Border width (px)	It defines the width of the widget border.
	Border radius	It defines the radius of the widget border.
	Elevation	It defines the degree of elevation effect.
	Background color	It defines the background color of the widget. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is white.
	Border color	It defines the color of the widget border. By clicking it , users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is blue.
Tooltip	Title	Here, users can define the widget tooltip text.
	Placement	It defines where the tooltip will be located. The possible values are: Top-Start, Top, Top-End, Right-Start, Right, Right-End, Bottom-Start, Bottom, Bottom-End, Left-Start, Left, Left-End.
	Enter delay (ms)	It defines the milliseconds before the tooltip shows up once hovering over the widget.
	Leave delay (ms)	It defines the milliseconds before the tooltip disappears once hovering over the widget.
	Arrow	If selected, the tooltip will add an arrow pointing to the widget.

Tip

The Open widget layout can be opened from the widget context menu or simply double-clicking the widget frame.

In order to start working on a widget, follow the steps below.

Prerequisites

The user must have created a view
The user must have imported at least one dataset containing an attribute.

Procedure

Drag the desired widget from the Widgets panel onto the slide.
In the Datasets panel, select the desired attribute/s and drag it/them onto the widget.
If you only want to modify the widget dimension, use the squared handles that appear when clicking the widget frame, otherwise use the widget context menu for further configuration options.
Click Save in the toolbar to ultimate the operation.