Studio Widgets¶

The node, which is the structure embedding the content, is common to all the Widgets, while the content, which is the graphical representation of data, 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. User can interact in a deep way with data underlying our analysis and trigger modification and editing on them. Therefore, widget families are organized around three different aims the user want to fullfill by using a View:

|Describing|__ its data
|Editing|__ its data
|Interacting|__ with its data

While in this page we are going to focus the attention on the common characteristic of all the widgets we refer to the pages referenced above for a deeper description about these possibilities offered by Rules Studio component, and to the single widget pages for a more focused discussion about each widget’s type.

Working on Widgets¶

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.

Then, 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 to drag the attribute/s onto the widget on the slide.

By dragging the attribute as explained above, it will be allocated in the widget by default. 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.

Moreover, users can move Widgets within the slide or change their dimension.

In order to move the widget within the slide, it is sufficient to hover its border, drag it and finally drop it where desired.

In order to resize the height and the width of the widget, users need to click on it and adjust the dimensions through the squared handles along the border.

Finally, some Widgets can also be rotated by using the circular icon above them, which appears when the 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, 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 contains the following widgets moving options:
- 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 widget type, the other options mentioned above are common to all Widgets.

See also

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 concerns the attribute definition. In fact, 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 particularly useful for Widgets such as Texts and Shapes, while there are some options of other widgets that cannot be parametrized at all. In those cases it will be specified with a note in the proper section.

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.
	Y position	It defines the widget position on the Y-axis of the slide.
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 in percentage.
	Scale height (%)	It defines the height in 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.
	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 the elevation effect.
	Background color	It defines the background color of the widget. By clicking it, users can select Standard colors, 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, 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 title.
	Placement	It defines where the title 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 title shows up once hovering over the widget.
	Leave delay (ms)	It defines the milliseconds before the title disappears once hovering over the widget.
	Arrow	If selected, the tooltip will add an arrow pointing 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 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.

Widgets families¶

In Rulex Studio there is a big amount of widget types, each of which has specific functions and features.

Widgets in Rulex Studio are grouped in families, each of which embodies a particular aspect of the graphical representation of data and describe a specific type of data.

To know more about each widget family listed below, click the related title.

Plots, which describe the trend of a column.
Tables, which describe an attribute subset.
Actions, which filter data and change the graphical visualization of other widgets.
Gauges, which represent scalar values.
Images, which allow importing images on the slide.
Texts, which are free space where users can write a text, but if set in Parametric Mode they can describe scalar quantities of data.
Shapes, which are graphical elements used to enrich the dashboard, but if set in Parametric Mode they can describe scalar quantities of data.