Operating with your data

The main difference between Rulex Studio custom interface and a general dashboarding system is its interactivity.

Indeed, Rulex Studio interactions do not only tune the data representation, but allow the user to perform entire scripted operations. These interactions permit the user for example to modify data, to change input attributes of widget descriptions, to open popup or helping mask, to send mail or alert or report, to compute some stored procedures.

Dashboarding is brought in Rulex Studio component to a new level; the whole tool allows the user to construct a real web interface with online forms, buttons and toolbars all around our data visualization.

This possibility is mainly covered by two tools: the Events and the following families

• Action

• Control

To the Events, their nature and their configuration is dedicated this section.

---

Actions

Actions are Widgets of Rulex Studio for which the Event associated to the onChange trigger is already defined by the widget itself. It is an operation of Data filtering.

By operating on an Action widget, a filter is triggered on an underlying Dataset, leading to a Data filtering effect.

This effect by default operates on all the other Widgets on the same slide, but this scope can be configured to reduce this effect.

In Rulex Studio, users can choose among different types of Filter actions:

• Filter button

• Filter form field

• Filter drop down menu

• Filter autocomplete

• Filter radio button

• Filter values

• Filter slider

• Filter Calendar

Actions differ one to the other not only graphically, but also by the way they allow the selection of values then used in the filter construction: for example, some actions allow selecting only one value at a time, some allow multiple values, some allow numbers only or ranges only.

In the Actions layout menus page , users will find all the information regarding the available configuration options of each action type, as well as their filtering characteristics.

Note

The event triggers available for the Actions widgets change according to the action type. A box with a list of the event triggers available for each action filter is available in the corresponding page.

As previously said, Actions are strictly related to other Widgets on the same slide as, once they have been dragged, they are automatically linked to all the other widgets on the slide to create a dynamic dashboard. This link between an Action and all the Widgets can be edited in the scope section, as explained below.

The first step to start working on actions consists in dragging an Action onto the stage and, subsequently, dragging the attribute whose values will be filtered by the action.

As soon as the attribute has been dragged onto the action, the Layout options window will automatically open and will allow users to start the configuration process.

The Layout options menu is made of two tabs:

• INPUT tab, where users define all the information regarding the data to import and the filter/s to set. it is not populated with options if the Layout options menu is opened before dragging an attribute on it.

• LAYOUT tab, where users customize the action layout. This menu changes according to the corresponding action type. More information on the options available and on the compatible attribute type for each Action can be found in the Actions layout menus page.

If users try to open the Layout options menu before associating an attribute to the widget itself, the INPUT tab will be empty, as it populates with options according to the type of the attribute which has been dragged onto the widget and according to the action type.

In the Scope Options section, in the Scope text field, users can specify the Widgets to which the operation will be applied.

By default, all the widgets which are present on the slide are included in the Scope, but users can also edit this list, by using the text field or by opening the Select wanted window, where a list of all the widgets on the current slide is present and can be checked or unchecked.

To know each widget’s name on the stage and to locate it, users can browse the Slides tab.

As a result, the Widgets specified in the Scope will update and will show the filtered data only when the Action is active.

Tip

By selecting an empty scope (meaning the Action will not reflect its natural effect on any other widget), and by adding a dedicated Event to the onChange trigger it is possible to use the selected value (or values) of the Action for a different operation and not the already defined filter operation.

---

Data Filtering

Actions default effect when their internal values are changed is to trigger a Data filtering operation on the Dataset the attribute dragged onto them belongs to.

This operation is performed following three steps:

1. the selected value of the considered Action generates a filter code as in the pre or post-filter query manager.

2. By applying this filter code to the Dataset of the attribute dragged, a subset of dataset’s rows is considered. The index of the filtered rows is the output of the Action application.

3. Then, according to the dataset relations, the generated index is propagated through the other tables to produce second level effects.

4. All the widgets consider in the scope of the Action are refreshed to take into consideration an eventual modification in the underlying data due to the Data Filtering

One of the point which needs further description, is the Data Filtering effect propagation. This effect propagation based on internal dataset relations, is completely equal to the propagation of the Data selection

If an Action selects a subset of rows on the first dataset and a second dataset has some relations with the original dataset, a subset of rows is filtered also in the second dataset.

Therefore, even a widget using attributes from the second dataset will see the effect of the Action data filtering, as long as it is included in action scope.

The effect is described in the image below:

In fact, if different Widgets, representing data from different tables, share an attribute with the same name, the filter will be propagated to all of them.

Warning

Filters are propagated only once per dataset. If a dataset has already obtained an effect, it will no longer be considered again in the same propagation.

Example

The following example uses the Client Data and the Transactions datasets.

Both datasets contain an attribute called Id, which is the attribute which will make the filter propagation possible, so basically both datasets will be filtered, even though the action was active on a specific attribute on one dataset.

In this case we are going to use the Filter drop down menu, two Vertical Bar chart and attributes from the tables: Clients_data and Transactions.

• Drag the attribute Job contained in Clients_data table onto the X Axis of the first plot.

• Drag the attribute Value contained in the Transactions table and onto the X Axis of the second plot.

• Drag a Filter drop down menu onto the slide and drop onto it the attribute Product contained in the Transactions dataset.

• At this point, the Layout options tab automatically opens. The Table and the Attribute sections are already filled out. The Scope field is automatically filled with all the other widgets on the slide.

• Select the Loan value in the Filter drop down menu.

• Once the filter has been applied, both plots will show a graphical representation of data according to the filter. This behavior happened because the filter which has been created on the Product attribute of the Transactions dataset has been applied to all attributes within the dataset itself but, as the Id attribute is present also in the Clients_data dataset, it has been propagated to the Id attribute in the Clients_data dataset and to all the other attributes within the dataset.

• As you can see, the first plot will show the loan data based on the job of the subjects, while the second plot will show the loan data based on its value.

---

Controls

Controls are a type of widget in Rulex Studio, found in the Widgets panel of the stage.

Differently from the Actions, the Controls widgets do not own a pre-determinate operation triggered at state change.

Therefore, to harness the full potential of these widgets, Controls need to be associated with events.

Note

The event triggers available for these widgets are:

• onClick

• onMouseEnter

• onMouseLeave.

There are two types of Controls widgets:

• General button

• Toolbar

Each type of widget has its own set of configuration options. In the following subsections, users will find detailed information about how to configure the standard Button widget.

To the configuration of the Toolbar one, it is dedicated this page

---

General Button

The General button widget has the graphical aspect of a button. To use this widget correctly, it must be linked to an event associated to its onClick trigger.

The table below provides a detailed description of the General button layout options along with their corresponding GOLD references. These options can also be modified using parametric mode.

Subsection	Option	Description	GOLD Ref
Button	Button variant	This drop-down list defines the button’s graphical style. Available options include: Contained, Outlined, Text.
	Disable button	By selecting this checkbox, the button will be immediately disabled, causing it to appear greyed out and preventing any user interaction.
	Disable hover effect	By selecting this checkbox, the button’s hover effect will be disabled.
Title	Text style	Here, users can define the title style, which can be bold, italic or underlined.
	Title text	In this text field, users can define the text appearing onto the General button widget.
	Font family	It defines the text font of the General button. Users can select the desired one in the drop-down menu.
	Text transform	From this drop-down list, the text appearing on the widget can be customized. Available options include: None, Capitalize, Uppercase, Lowercase.
	Font size (px)	In this spin-box, users can choose the desired font size in pixels of their button’s text.
	Title color	This option defines the button’s title color. 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 dark blue.
	Title color hover	This option defines the title text color that will appear when hovering over the General button. 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 light blue.
Icon	Change icon	It adds an icon to the button. By clicking on it, users can select the desired one in the corresponding Select icons window. In this window, they can also define the Color as well as the Color hover of the selected icon (available for standard icons only). Additionally, a Custom option lets users upload their own icons in PNG or SVG format.
	Icon position	From this drop-down list, users can choose where to position the icon in relation to the button’s text. Available options are: Right and Left.
	Icon width (px)	From this spin-box, users can customize their icon’s width in pixels.
	Icon height (px)	From this spin-box, users can customize their icon’s height in pixels.
Color	Color	This option defines the color of the General button. 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 light blue.
	Color hover	This option defines the button’s color when users hover over it. 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 dark blue.
Border	Border radius (px)	This spin-box allows users to set the button’s corner radius by specifying a value in pixels. The higher the number, the more rounded the button’s corners will appear.
	Border size (px)	It controls the thickness of a button’s border by specifying a value in pixels. The higher the number, the thicker the border will appear. This option is only applicable when the Button variant option is set to Outlined.
Label	Text style and alignment	Here, users can define the label style, which can be bold, italic or underlined, as well as the label horizontal alignment, which can be right, center, left.
	Label placement	From this drop-down list, the placement of the button’s text label can be chosen. Available options include: Top, End, Bottom, Start.
	Label text	In this text field, users can enter the label appearing on the outside of the General button.
	Font family	It defines the font of the button’s text label. Users can select the desired one in the drop-down menu.
	Text transform	From this drop-down list, users can further customize the button’s text label. Available options include: None, Capitalize, Uppercase, Lowercase.
	Font size (px)	In this spin box, users can choose the desired font size in pixels of their button’s text label.
	Label color	It defines the color of the button’s text label. 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 dark blue.

Tip

It is also possible to define the size of the button label by clicking the three dotted icon in the top-left corner of the General button. The available options are: S (Small), M (Medium) or L (Large).

---

GOLD References

Here is the description of the GOLD class Action:

Here is the description of the GOLD class Controls:

• Studio Events
  • Event Triggers
  • Opening the Event Window
    • Studio Events Window
      • Events and Steps
      • The Events Tab
      • The Navigation Bar
        • Studio Masks in Events
          • The Mask Stage
          • Variable Panels
          • Graphic Panels
          • Graphic Mask Connections
            • Graphic Widget
              • Container
              • Tab
              • Carousel
              • Collapse
              • Label
            • Graphic Options
              • Checkbox
              • Combobox
              • Text field
              • Number field
              • Password
              • Radio button
              • Char list
              • Color Picker
              • General Items List
              • Code Field
              • Values Autocomplete
              • Calendar Field
    • Link Event
      • Example
    • Open Modal Window Event
      • Example
    • Compute Flow Event
      • Example
    • Execute Macro Event
    • Code Event
      • View Class
    • Report Event
      • Exporting Reports
    • Change Layout Event
      • Example
• Actions
  • Filter Button
  • Filter Form Field
  • Filter Drop Down Menu
  • Filter Autocomplete
  • Filter Radio Button
  • Filter Values
  • Filter Slider
  • Filter Calendar
  • Action Schema
• Toolbar
  • Buttons in a Toolbar
  • Toolbar Schema