i4designer Knowledgebase

Historical

Abstract

Here are the i4designer Historical components for your new project created on the selected platform. Check out more details in this article.

The Historical Data or the HTML Trending functionality is composed of five components that can be managed independently or in combination with each other. Hence, the user is provided with the advantage given by flexibility, in terms of layout and functionality, since the five independent components can be placed anywhere on the screen.

The components available in the Historical category of the i4designer Toolbox panel are described, individually, in the upcoming articles.

Toolbox
Abstract

Check out this article in order to learn more details about the i4designer Toolbox component and the properties provided by it.

The i4designer Toolbox is a lightweight component the provides the user with possibility to manage and configure the Chart component.

Warning

This is not a self-standing component and should always be used along with the Chart component.*

Toolbox_component.jpg

The Toolbox component

Category

Property

Description

Common

Name

The name of the component, visible in other Designer locations (such as Page explorer).

Name_pipe.jpg

Object ID

Sets the Object ID of the component. By defining an object ID for the control, it can be passed as SignalPrefix when using parameter passing in navigation. The value of the Object ID can be used via a placeholder [OID] in other properties of this extension. The placeholder is supported in all signal properties, symbolic text and states.

Example: Setpoint [OID]

Object_ID.jpg

Toolip text

Optional tooltip text, that will be shown on mouseover at runtime.

Tooltip_text.jpg

Security

Project authorization authorization/ Permission

The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,).

This property is named "Project authorization" for projects created on i4SCADA platform.

Project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

Roles.jpg

System authorization / Role

The system authorization required to display the component. If the logged in user does not have this system authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,).

This property is named "System authorization" for projects created on i4SCADA platform.

System_authorization.jpg

This property is named "Permissions" for projects created on i4connected platform.

Permissions.jpg

Security access behavior

Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.

Security_access_behavior.jpg

Layout

Layout mode

Sets the behaviour of the component related to the page placement. The user can select the component layout from the options available in the drop-down list: Default, Dock top, Dock bottom, Dock left, Dock right, Stretched, Pin top left, Pin top center, Pin top right, Pin right middle, Pin bottom right, Pin bottom center, Pin bottom left, Pin left middle and Pin center.

Layout_mode.jpg

Margin

Sets the margin of the component relative to the drawing board area. The supported values are the standard CSS values for the margin.

The top, bottom, left and right values can either be typed in the main property field or by using the Margin editor.

Margin_small.jpg

The Margin editor can be opened by clicking the Open button.

Margin_large.jpg

The components margins can be updated by setting the margin value and selecting the desired unit:

  • Ems (em) - The em is a scalable unit. One em is equal to the current font-size;

  • Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution).

  • Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.

Effects

Opacity

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

By default, the Component's opacity is set to value 1. Using the up / down arrows the user can control the opacity degree.

Opacity.jpg

By clicking the Open button the view is extended to display the Opacity slider.

Opacity_slider.jpg

Shadow color

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

Shadow_color.jpg

Shadow offset X

Sets the offset of the shadow on the horizontal axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_X.jpg

Shadow offset Y

Sets the offset of the shadow on the vertical axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_Y.jpg

Shadow size

Sets the width of the component shadow. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_size.jpg

Configuration

Auto update

Specifies whether the updating should happen automatically or not.

Toolbox_Auto_update.jpg

Client side configuration

Specifies whether the configurations are saved locally.

By default, the property is set to false, hence, all configurations are safely stored on the target server, and can be loaded to the component, regardless of the used browser.

If the property is set to true, all configurations are saved on the browser's local storage. When loading configurations saved locally, the system will initially load the configuration that is saved in the local storage, if one exists. If it doesn't exist it will fall back to the Initial configuration field. Further on, configurations saved locally can be lost, if the browser application is uninstalled, or if the user decides to change browser settings and return to factory defaults.

Cleint_side_configuration.jpg

Configuration buttons

Allows the user with possibility to configure the table buttons individually. The list of buttons can be accessed by clicking the Expand array list button. The list features the possibility to manage the:

Toolbox_config_buttons.jpg

The list of configuration button, allows the user to change their position, by using the Move up / Move buttons.

Toolbox_button_actions.jpg

Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties:

Buttons_properties_Toolbox.jpg
  • Button name - sets the name of the button.

  • Alternative button name - Only used for the Run / Pause buttons. This property allows the user to assign buttons with different names, depending on the button possition.

  • Enable operator - Sets the logical operator that checks the condition which will enable / disable the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Enable_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Enable signal name - Sets the signal name of the condition that will enable / disable the button.

    Enable_operator.jpg
  • Enable signal value - Sets the signal value of the condition that will enable / disable the button.

  • Project authorization / Permissions - The project authorization / Permission required for displaying the button. If the logged in user does not have this project authorization / permission, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled to all users.

  • System authorization / Roles - The System authorization / Role required to display the button. If the logged in user does not have this system authorization / role, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled for all users.

  • Security access behavior - Sets the behavior of the button to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged in user needs to meet both conditions to be able to see and utilise the button, at run-time.

  • Visibility operator - Sets the logical operator that checks the condition which will enable / disable visibility of the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Visibility_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Visibility signal name - Sets the signal name of the condition that will enable / disable the button visibility.

    Visibility_signal_name.jpg
  • Visibility signal value - Sets the signal value of the condition that will enable / disable the button visibility.

  • Hidden - Allows the user to hide the button, by enabling this property. If property is disabled, the button will be visible, if all the other conditions are met.

    Hidden.jpg

Configuration namespace

The namespace used by the chart predefined configuration, that should be applied at run time.

By setting this property, the respective configuration will be, by default, applied.

Configuration_namespace.jpg

DateTime format

Defines the format of the datetime, displayed in all the dialogs where date specific fields are available.

Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/.

For example: DD.MM.YYYY hh:mm:ss

DateTime_format.jpg

Group name

Sets the name of the alarm group, used by the component.

Important

When using the three historical components on one project page, it is mandatory that the same Group name is specified, for all, in order that they represent the same data.

Group_name.jpg

Initial configuration

Sets the name of the an existing configuration, that will be initially loaded for the component, when opening the run-time project visualization.

Initial_configuration.jpg

Time Range

Contains a set of time range configurations. By clicking the Expand array list button, a list of modular time range properties is exposed. Based on the selection made for the Date range property, the view is updated accordingly, as follows:

  • Date range Offset - allows the user to pick the current filter, on a specified date, using the design-time properties Start offset and End offset, by choosing the type (seconds, minutes, hours, days). Time frame is by default calculated and set.

    • Start offset interval - Allows the user to specify the start length offset measured in seconds, minutes, days, weeks, months or years.

    • Start offset - Allows the user to set the start offset interval.

    • End offset interval - Allows the user to set the end offset interval.

    • End offset - Allows the user to specify the end length offset measured in seconds, minutes, days, weeks, months or years.

    Offset.jpg
  • Date range Specific - allows the user to pick the desired time interval, using the Start date / End date calendar selectors.

    • Start date - sets the start date of the component measurement.

    • End date - sets the end date of the component measurement.

    Specific.jpg
  • Date range Day - allows the user to select the desired Day as time range, from the calendar view.

    • Date - sets the date range, to a specific day.

    Day.jpg
  • Date range Week - allows the user to select the desired Week as time range, from the calendar view.

    • Date - sets the date range, to a specific week.

    week.jpg
  • Date range Month - allows the user to select the desired Month as time range, from the calendar view.

    • Date - sets the date range, to a specific month.

    Month.jpg
  • Date range Year - allows the user to select the desired Year as time range, from the calendar view.

    • Date - sets the date range, to a specific year.

    year.jpg
  • Date range:

    • Current day - allows the user to select the current day, as time range. Time frame of 24 hours is by default calculated and set.

      Current_day.jpg
    • Current week - allows the user to select the current week, as time range. Time frame of 7 days is by default calculated and set.

      Current_week.jpg
    • Current month - allows the user to select the current month, as time range. Time frame is by default calculated and set.

      Curent_month.jpg
    • Current year - allows the user to select the current year, as time range. Time frame is by default calculated and set.

      Current_time_range.jpg
  • Date range Last day / Last week / Last month / Last year

    • Last day - allows the user to select the day before the current one. Time frame of 24 hours is by default calculated and set.

      Last_day.jpg
    • Last week - allows te user to select the week before the current one. Time frame of 7 days is by default calculated and set.

      Las_week.jpg
    • Last month - allows the user to select the month before the current one. Time frame is by default calculated and set.

      Last_month.jpg
    • Last year - allows the user to select the year before the current one, as time range. Time frame is by default calculated and set.

      Past_date_range.jpg

Time range information format

Defines the format of the time range information, displayed by the time range information label. The Show time range information property must be enabled.

Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/.

For example: DD.MM.YYYY hh:mm:ss

Time_range_info_format.jpg

Title text

Sets the title of the toolbox component. The defined toolbox title will be displayed both at design and run-time, by the chart header.

Title_text.jpg

Update rate

Sets the update rate of the Chart measurements, by allowing the user to manually fill in the desired value. The default update rate is set to 2000 milliseconds. This property will be taken into consideration only if the Auto update property is set to True.

Update_rate.jpg

Palette

Background color

Sets the color of the component background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Background_color.jpg

Border color

Sets the color of the component border. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Border_color.jpg

Buttons background

Sets the color of the component buttons background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Buttons_background.jpg

Buttons foreground

Sets the color of the component buttons foreground. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

buttons_foreground.jpg

Title foreground

Sets the color of the component title textual information foreground. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Title_foreground.jpg

Style

Border width

Sets the width of the component border, expressed in pixels.

The border width value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

This field supports the standard CSS notation.

Border_width.jpg

Typography

Font family

Sets the font family of the component font, selecting from web-safe fonts available in the drop-down list.

Font_family.jpg

Title font size

Sets the size of the header font.

The header font size value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Title_font_size.jpg

Title font weight

Sets the thickness of the chart title displayed by the component header, , selecting from the drop-down list options: normal, 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (regular), 300 (light), 200 (extra-light) and 100 (thin).

Title_font_weight.jpg

Appearance

Orientation

Sets the component orientation, allowing the user to chose between horizontal orientation and vertical orientation.

Orientation.jpg

Show buttons icons

Allows the user to toggle the visibility of the chart buttons icons.

Show_buttons_icons.jpg

Show buttons label

Allows the user to toggle the visibility of the chart buttons labels.

Show_butons_label.jpg

Show time range information

Allows the user to toggle the visibility of the selected time range. If enabled, the time range will be displayed on the left side of the toolbar.

Show_time_range_information.jpg

Transform

Angle

Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value.

The component angle can also be adjusted directly on the design surface by means of mouse manipulation.

Angle.jpg

Height

Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component height can also be adjusted directly on the design surface by means of mouse manipulation.

Control_height.jpg

Left

Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Left.jpg

Top

Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Top.jpg

Width

Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component width can also be adjusted directly on the design surface by means of mouse manipulation.

Control_width.jpg
Chart
Abstract

Check out this article in order to learn more details about the i4designer Chart component and the properties provided by it.

The i4designer Chart component offers a visual chart view over the data provided by a set of time series.

Chart_comp.jpg

The Chart component

Category

Property

Description

Common

Name

The name of the component, visible in other Designer locations (such as Page explorer).

Name_pipe.jpg

Object ID

Sets the Object ID of the component. By defining an object ID for the control, it can be passed as SignalPrefix when using parameter passing in navigation. The value of the Object ID can be used via a placeholder [OID] in other properties of this extension. The placeholder is supported in all signal properties, symbolic text and states.

Example: Setpoint [OID]

Object_ID.jpg

Toolip text

Optional tooltip text, that will be shown on mouseover at runtime.

Tooltip_text.jpg

Security

Project authorization / Permission

The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,).

This property is named "Project authorization" for projects created on i4SCADA platform.

Project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

Roles.jpg

System authorization / Role

The system authorization required to display the component. If the logged in user does not have this system authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,).

This property is named "System authorization" for projects created on i4SCADA platform.

System_authorization.jpg

This property is named "Permissions" for projects created on i4connected platform.

Permissions.jpg

Security access behavior

Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.

Security_access_behavior.jpg

Layout

Layout mode

Sets the behaviour of the component related to the page placement. The user can select the component layout from the options available in the drop-down list: Default, Dock top, Dock bottom, Dock left, Dock right, Stretched, Pin top left, Pin top center, Pin top right, Pin right middle, Pin bottom right, Pin bottom center, Pin bottom left, Pin left middle and Pin center.

Layout_mode.jpg

Margin

Sets the margin of the component relative to the drawing board area. The supported values are the standard CSS values for the margin.

The top, bottom, left and right values can either be typed in the main property field or by using the Margin editor.

Margin_small.jpg

The Margin editor can be opened by clicking the Open button.

Margin_large.jpg

The components margins can be updated by setting the margin value and selecting the desired unit:

  • Ems (em) - The em is a scalable unit. One em is equal to the current font-size;

  • Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution).

  • Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.

Effects

Opacity

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

By default, the Component's opacity is set to value 1. Using the up / down arrows the user can control the opacity degree.

Opacity.jpg

By clicking the Open button the view is extended to display the Opacity slider.

Opacity_slider.jpg

Shadow color

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

Shadow_color.jpg

Shadow offset X

Sets the offset of the shadow on the horizontal axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_X.jpg

Shadow offset Y

Sets the offset of the shadow on the vertical axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_Y.jpg

Shadow size

Sets the width of the component shadow. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_size.jpg

Configuration

Axis name

Sets the name of the axis.

Axis_name.jpg

Chart date format

Selects the time and date format for the Axis. Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/.

For example: M/d/yyyy

Chart_date_format.jpg

Chart title

Sets the title of the chart component. The defined chart title will be displayed both at design and run-time, by the chart header.

Chart_title.jpg

Chart type

Sets the type of chart, used to represent signal values, allowing the user to chose the desired type from the designated drop-down list options:

  • Analog - Uses continuous range of values to represent information

  • Digital - Uses discrete or discontinuous values to represent information

Chart_type.jpg

Client side configuration

Defines whether configurations are saved locally.

By default, the property is set to false, hence, all configurations are safely stored on the target server, and can be loaded to the component, regardless of the used browser.

If the property is set to true, all configurations are saved on the browser's local storage. When loading configurations saved locally, the system will initially load the configuration that is saved in the local storage, if one exists. If it doesn't exist it will fall back to the Initial configuration field. Further on, configurations saved locally can be lost, if the browser application is uninstalled, or if the user decides to change browser settings and return to factory defaults.

Client_side_configuration.jpg

Configuration buttons

Allows the user with possibility to configure the chart buttons individually. The list of buttons can be accessed by clicking the Expand array list button. The list features the possibility to manage the:

  • the Series button

  • the Axis button

  • the Regions button

  • the Legend button

  • the Load save button

Config_buttons_Chart.jpg

The list of configuration button, allows the user to change their position, by using the Move up / Move buttons.

Up_and_Down_buttons_Chart.jpg

Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties:

Chart_config_properties_list.jpg
  • Button name - sets the name of the button.

  • Enable operator - Sets the logical operator that checks the condition which will enable / disable the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Enable_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Enable signal name - Sets the signal name of the condition that will enable / disable the button.

    Enable_operator.jpg
  • Enable signal value - Sets the signal value of the condition that will enable / disable the button.

  • Project authorization / Permissions - The project authorization / Permission required for displaying the button. If the logged in user does not have this project authorization / permission, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled to all users.

  • System authorization / Roles - The System authorization / Role required to display the button. If the logged in user does not have this system authorization / role, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled for all users.

  • Security access behavior - Sets the behavior of the button to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged in user needs to meet both conditions to be able to see and utilise the button, at run-time.

  • Visibility operator - Sets the logical operator that checks the condition which will enable / disable visibility of the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Visibility_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Visibility signal name - Sets the signal name of the condition that will enable / disable the button visibility.

    Visibility_signal_name.jpg
  • Visibility signal value - Sets the signal value of the condition that will enable / disable the button visibility.

  • Hidden - Allows the user to hide the button, by enabling this property. If property is disabled, the button will be visible, if all the other conditions are met.

    Hidden.jpg

Configuration namespace

The namespace used by the chart predefined configuration, that should be applied at run time.

By setting this property, the respective configuration will be, by default, applied.

Configuration_namespace.jpg

Group name

Sets the name of the alarm group, used by the component.

Important

When using the three historical components on one project page, it is mandatory that the same Group name is specified, for all, in order that they represent the same data.

Group_name.jpg

Initial configuration

Sets the name of the an existing configuration, that will be initially loaded for the component, when opening the run-time project visualization.

Initial_configuration.jpg

Internal toolbox

Enables or disable the visibility of the integrated chart toolbox.

If property is set to True, the chart will expose its own Toolbox component, embedded inside the toolbar.

If this property is set to False, the user can add the Toolbox component to the page project, and make sure the Chart component and the Toolbox component share the same Group name.

Internal_toolbox.jpg

Legend visibility operator

Sets the logical operator that enables or disables the visibility of the chart legend. The logical operator symbol can be selected from the designated drop-down list.

Legend_visibility_operator.jpg

Legend visibility signal name

Sets the name of the Signal that enables or disables the visibility of the chart legend. The desired Signal name can be either manually filled in, or selected from the list of pre-imported / pre-synchronized Signals.

Legend_visibility_signal.jpg

Legend visibility value

Sets the signal value that enables or disables the visibility of the chart legend.

Legend_visibility_value.jpg

Max series count

Sets the maximum number of series that can be selected at once on the chart.

Max_series_count.jpg

MinGrid Distance

Sets the minimum distance of the chart grid.

Min_Grid_Distance.jpg

Time range information format

Defines the format of the time range information, displayed by the time range information label. The Show time range information property must be enabled.

Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/.

For example: DD.MM.YYYY hh:mm:ss

Time_range_info_format.jpg

Toolbox buttons

Allows the user with possibility to configure the table buttons individually. This property is effective only if the "Internal toolbox" property is set to True.

The list of buttons can be accessed by clicking the Expand array list button. The list features the possibility to manage the:

  • the Pause button

  • The Refresh button

  • The Configuration button

  • The Time settings button

  • The Load Save button

  • The Export button

Toolbox_buttons.jpg

The list of configuration button, allows the user to change their position, by using the Move up / Move buttons.

Up_and_Down_config_buttons_toolbox.jpg

Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties:

Buttons_properties_Toolbox.jpg
  • Button name - sets the name of the button.

  • Alternative button name - Only used for the Run / Pause buttons. This property allows the user to assign buttons with different names, depending on the button possition.

  • Enable operator - Sets the logical operator that checks the condition which will enable / disable the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Enable_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Enable signal name - Sets the signal name of the condition that will enable / disable the button.

    Enable_operator.jpg
  • Enable signal value - Sets the signal value of the condition that will enable / disable the button.

  • Project authorization / Permissions - The project authorization / Permission required for displaying the button. If the logged in user does not have this project authorization / permission, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled to all users.

  • System authorization / Roles - The System authorization / Role required to display the button. If the logged in user does not have this system authorization / role, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled for all users.

  • Security access behavior - Sets the behavior of the button to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged in user needs to meet both conditions to be able to see and utilise the button, at run-time.

  • Visibility operator - Sets the logical operator that checks the condition which will enable / disable visibility of the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Visibility_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Visibility signal name - Sets the signal name of the condition that will enable / disable the button visibility.

    Visibility_signal_name.jpg
  • Visibility signal value - Sets the signal value of the condition that will enable / disable the button visibility.

  • Hidden - Allows the user to hide the button, by enabling this property. If property is disabled, the button will be visible, if all the other conditions are met.

    Hidden.jpg

Appearance

Axis value position

Sets the position of the axis values either inside or outside of the chart area.

Axis_value_position.jpg

Grid thickness

Sets the thickness of the chart grid. The grid thickness value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Grid_thickness.jpg

Label rotation

Sets the rotation angle of the chart labels. The label rotation value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Label_rotation.jpg

Legend entries alignment

Sets the alignment of the entries inside the legend, choosing from the drop-down list items: Left, Center and Right.

Legend_entries_alignment.jpg

Legend position

Sets the position of the chart legend, allowing the user to chose from the drop-down list items: Left, Right, Top, Bottom and Absolute.

Legend_position.jpg

Legend use equal widths

Allows the user with possibility to set all legend items to have the same width, if property is set to true. This property should be enabled when using vertical legends or with legends having one row.

Legend_use_equal_widths.jpg

Show buttons icons

Allows the user to toggle the visibility of the chart buttons icons.

Show_buttons_icons.jpg

Show buttons label

Allows the user to toggle the visibility of the chart buttons labels.

Show_butons_label.jpg

Show labels

Allows the user to toggle the visibility of the chart labels.

Show_labels.jpg

Show legend

Allows the user to toggle the visibility of the chart legend.

Show_legend.jpg

Show time range information

Allows the user to toggle the visibility of the selected time range. If enabled, the time range will be displayed on the left side of the toolbar.

Show_time_range_information.jpg

Palette

Axis color

Sets the color of the chart axis. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Axis_color.jpg

Background

Sets the background color of the data area. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Background.jpg

Border color

Sets the color of the component's border. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Border_color.jpg

Buttons background

Sets the color of the chart buttons background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Buttons_background.jpg

Buttons foreground

Sets the color of the chart buttons foreground. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

buttons_foreground.jpg

Grid color

Sets the color of the chart grid. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Grid_color.jpg

Header background

Sets the color of the header background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

header_background.jpg

Header foreground

Sets the color of the header foreground. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Header_foreground.jpg

Legend text color

Sets the color of the legend textual information. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Legend_text_color.jpg

Typography

Header font family

Sets the font family of the component font, selecting from web-safe fonts available in the drop-down list.

Header_font_family.jpg

Header font size

Sets the size of the header font.

The header font size value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Header_font_size.jpg

Header font weight

Sets the thickness of the chart title displayed by the component header, , selecting from the drop-down list options: normal, 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (regular), 300 (light), 200 (extra-light) and 100 (thin).

Header_font_weight.jpg

Style

Border width

Sets the width of the component border, expressed in pixels.

The border width value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

This field supports the standard CSS notation.

Border_width.jpg

Internal toolbox

Auto update

Specifies whether the updating should happen automatically or not. This property is effective only if the Internal toolbox property is set to True.

Auto_update.jpg

Time Range

Contains a set of time range configurations. By clicking the Expand array list button, a list of modular time range properties is exposed. Based on the selection made for the Date range property, the view is updated accordingly, as follows:

  • Date range Offset - allows the user to pick the current filter, on a specified date, using the design-time properties Start offset and End offset, by choosing the type (seconds, minutes, hours, days). Time frame is by default calculated and set.

    • Start offset interval - Allows the user to specify the start length offset measured in seconds, minutes, days, weeks, months or years.

    • Start offset - Allows the user to set the start offset interval.

    • End offset interval - Allows the user to set the end offset interval.

    • End offset - Allows the user to specify the end length offset measured in seconds, minutes, days, weeks, months or years.

    Offset.jpg
  • Date range Specific - allows the user to pick the desired time interval, using the Start date / End date calendar selectors.

    • Start date - sets the start date of the component measurement.

    • End date - sets the end date of the component measurement.

    Specific.jpg
  • Date range Day - allows the user to select the desired Day as time range, from the calendar view.

    • Date - sets the date range, to a specific day.

    Day.jpg
  • Date range Week - allows the user to select the desired Week as time range, from the calendar view.

    • Date - sets the date range, to a specific week.

    week.jpg
  • Date range Month - allows the user to select the desired Month as time range, from the calendar view.

    • Date - sets the date range, to a specific month.

    Month.jpg
  • Date range Year - allows the user to select the desired Year as time range, from the calendar view.

    • Date - sets the date range, to a specific year.

    year.jpg
  • Date range:

    • Current day - allows the user to select the current day, as time range. Time frame of 24 hours is by default calculated and set.

      Current_day.jpg
    • Current week - allows the user to select the current week, as time range. Time frame of 7 days is by default calculated and set.

      Current_week.jpg
    • Current month - allows the user to select the current month, as time range. Time frame is by default calculated and set.

      Curent_month.jpg
    • Current year - allows the user to select the current year, as time range. Time frame is by default calculated and set.

      Current_time_range.jpg
  • Date range Last day / Last week / Last month / Last year

    • Last day - allows the user to select the day before the current one. Time frame of 24 hours is by default calculated and set.

      Last_day.jpg
    • Last week - allows te user to select the week before the current one. Time frame of 7 days is by default calculated and set.

      Las_week.jpg
    • Last month - allows the user to select the month before the current one. Time frame is by default calculated and set.

      Last_month.jpg
    • Last year - allows the user to select the year before the current one, as time range. Time frame is by default calculated and set.

      Past_date_range.jpg

Update rate

Sets the update rate of the Chart measurements, by allowing the user to manually fill in the desired value. The default update rate is set to 2000 milliseconds. This property will be taken into consideration only if the Auto update property is set to True.

Update_rate.jpg

Transform

Angle

Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value.

The component angle can also be adjusted directly on the design surface by means of mouse manipulation.

Angle.jpg

Height

Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component height can also be adjusted directly on the design surface by means of mouse manipulation.

Control_height.jpg

Left

Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Left.jpg

Top

Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Top.jpg

Width

Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component width can also be adjusted directly on the design surface by means of mouse manipulation.

Control_width.jpg
Data Table
Abstract

Check out this article in order to learn more details about the i4designer Data table component and the properties provided by it.

The i4designer Data Table component offers a table view over the data provided by a set of time series. This component is designed to be used together with the Chart and the Toolbox components.

Data_Table.jpg

The Data Table component

Category

Property

Description

Common

Name

The name of the component, visible in other Designer locations (such as Page explorer).

Name_pipe.jpg

Object ID

Sets the Object ID of the component. By defining an object ID for the control, it can be passed as SignalPrefix when using parameter passing in navigation. The value of the Object ID can be used via a placeholder [OID] in other properties of this extension. The placeholder is supported in all signal properties, symbolic text and states.

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

Optional tooltip text, that will be shown on mouseover at runtime.

Tooltip_text.jpg

Security

Project authorization / Permission

The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,).

This property is named "Project authorization" for projects created on i4SCADA platform.

Project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

Roles.jpg

System authorization / Role

The system authorization required to display the component. If the logged in user does not have this system authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,).

This property is named "System authorization" for projects created on i4SCADA platform.

System_authorization.jpg

This property is named "Permissions" for projects created on i4connected platform.

Permissions.jpg

Security access behavior

Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.

Security_access_behavior.jpg

Layout

Layout mode

Sets the behaviour of the component related to the page placement. The user can select the component layout from the options available in the drop-down list: Default, Dock top, Dock bottom, Dock left, Dock right, Stretched, Pin top left, Pin top center, Pin top right, Pin right middle, Pin bottom right, Pin bottom center, Pin bottom left, Pin left middle and Pin center.

Layout_mode.jpg

Margin

Sets the margin of the component relative to the drawing board area. The supported values are the standard CSS values for the margin.

The top, bottom, left and right values can either be typed in the main property field or by using the Margin editor.

Margin_small.jpg

The Margin editor can be opened by clicking the Open button.

Margin_large.jpg

The components margins can be updated by setting the margin value and selecting the desired unit:

  • Ems (em) - The em is a scalable unit. One em is equal to the current font-size;

  • Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution).

  • Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.

Effects

Opacity

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

By default, the Component's opacity is set to value 1. Using the up / down arrows the user can control the opacity degree.

Opacity.jpg

By clicking the Open button the view is extended to display the Opacity slider.

Opacity_slider.jpg

Shadow color

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

Shadow_color.jpg

Shadow offset X

Sets the offset of the shadow on the horizontal axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_X.jpg

Shadow offset Y

Sets the offset of the shadow on the vertical axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_Y.jpg

Shadow size

Sets the width of the component shadow. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_size.jpg

Configuration

Client side configuration

Defines whether configurations are saved locally.

By default, the property is set to false, hence, all configurations are safely stored on the target server, and can be loaded to the component, regardless of the used browser.

If the property is set to true, all configurations are saved on the browser's local storage. When loading configurations saved locally, the system will initially load the configuration that is saved in the local storage, if one exists. If it doesn't exist it will fall back to the Initial configuration field. Further on, configurations saved locally can be lost, if the browser application is uninstalled, or if the user decides to change browser settings and return to factory defaults.

Client_side_configuration.jpg

Configuration buttons

Allows the user with possibility to configure the table buttons individually. The list of buttons can be accessed by clicking the Expand array list button. The list features the possibility to manage the:

  • the Time button,

  • the Signals button,

  • the Common button ,

  • the Load save button.

Configuration_buttons.jpg

The list of configuration button, allows the user to change their position, by using the Move up / Move buttons.

Move_buttons.jpg

Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties:

Button_properties.jpg
  • Button name - sets the name of the button.

  • Enable operator - Sets the logical operator that checks the condition which will enable / disable the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Enable_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Enable signal name - Sets the signal name of the condition that will enable / disable the button.

    Enable_operator.jpg
  • Enable signal value - Sets the signal value of the condition that will enable / disable the button.

  • Project authorization / Permissions - The project authorization / Permission required for displaying the button. If the logged in user does not have this project authorization / permission, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled to all users.

  • System authorization / Roles - The System authorization / Role required to display the button. If the logged in user does not have this system authorization / role, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled for all users.

  • Security access behavior - Sets the behavior of the button to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged in user needs to meet both conditions to be able to see and utilise the button, at run-time.

  • Visibility operator - Sets the logical operator that checks the condition which will enable / disable visibility of the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Visibility_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Visibility signal name - Sets the signal name of the condition that will enable / disable the button visibility.

    Visibility_signal_name.jpg
  • Visibility signal value - Sets the signal value of the condition that will enable / disable the button visibility.

  • Hidden - Allows the user to hide the button, by enabling this property. If property is disabled, the button will be visible, if all the other conditions are met.

    Hidden.jpg

Configuration namespace

The namespace used by the chart predefined configuration, that should be applied at run time.

By setting this property, the respective configuration will be, by default, applied.

Configuration_namespace.jpg

Group name

Sets the name of the alarm group, used by the component.

Important

When using the three historical components on one project page, it is mandatory that the same Group name is specified, for all, in order that they represent the same data.

Group_name.jpg

Initial configuration

Sets the name of the initially loaded table configuration.

Initial_configuration.jpg

Internal toolbox

Enables or disable the visibility of the integrated table toolbox.

If property is set to True, the chart will expose its own Toolbox component, embedded inside the toolbar.

If this property is set to False, the user can add the Toolbox component to the page project, and make sure the Data Table component and the Toolbox component share the same Group name.

Internal_toolbox.jpg

Time range information format

Defines the format of the time range information, displayed by the time range information label. The Show time range information property must be enabled.

Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/.

For example: DD.MM.YYYY hh:mm:ss

Time_range_info_format.jpg

Title text

Sets the text displayed by the component title.

Title_text.jpg

Toolbox buttons

Allows the user with possibility to configure the table buttons individually. This property is effective only if the "Internal toolbox" property is set to True.

The list of buttons can be accessed by clicking the Expand array list button. The list features the possibility to manage the:

  • the Pause button

  • The Refresh button

  • The Configuration button

  • The Time settings button

  • The Load Save button

  • The Export button

Toolbox_buttons.jpg

The list of configuration button, allows the user to change their position, by using the Move up / Move buttons.

Up_and_Down_config_buttons_toolbox.jpg

Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties:

Buttons_properties_Toolbox.jpg
  • Button name - sets the name of the button.

  • Alternative button name - Only used for the Run / Pause buttons. This property allows the user to assign buttons with different names, depending on the button possition.

  • Enable operator - Sets the logical operator that checks the condition which will enable / disable the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Enable_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Enable signal name - Sets the signal name of the condition that will enable / disable the button.

    Enable_operator.jpg
  • Enable signal value - Sets the signal value of the condition that will enable / disable the button.

  • Project authorization / Permissions - The project authorization / Permission required for displaying the button. If the logged in user does not have this project authorization / permission, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled to all users.

  • System authorization / Roles - The System authorization / Role required to display the button. If the logged in user does not have this system authorization / role, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled for all users.

  • Security access behavior - Sets the behavior of the button to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged in user needs to meet both conditions to be able to see and utilise the button, at run-time.

  • Visibility operator - Sets the logical operator that checks the condition which will enable / disable visibility of the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Visibility_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Visibility signal name - Sets the signal name of the condition that will enable / disable the button visibility.

    Visibility_signal_name.jpg
  • Visibility signal value - Sets the signal value of the condition that will enable / disable the button visibility.

  • Hidden - Allows the user to hide the button, by enabling this property. If property is disabled, the button will be visible, if all the other conditions are met.

    Hidden.jpg

Palette

Background color

Sets the color of the component background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Background_color.jpg

Border color

Sets the color of the chart buttons background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Border_color.jpg

Buttons background

Sets the color of the chart buttons background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Buttons_background.jpg

Buttons foreground

Sets the color of the chart buttons foreground. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

buttons_foreground.jpg

Foreground color

Sets the foreground color of the component. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Foreground_color.jpg

Header background

Sets the color of the header background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

header_background.jpg

Header foreground

Sets the color of the header foreground. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Header_foreground.jpg

Typography

Header font family

Sets the font family of the component font, selecting from web-safe fonts available in the drop-down list.

Header_font_family.jpg

Header font size

Sets the size of the header font.

The header font size value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Header_font_size.jpg

Header font weight

Sets the thickness of the chart title displayed by the component header, , selecting from the drop-down list options: normal, 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (regular), 300 (light), 200 (extra-light) and 100 (thin).

Header_font_weight.jpg

Appearance

Show buttons icons

Allows the user to toggle the visibility of the chart buttons icons.

Show_buttons_icons.jpg

Show buttons label

Allows the user to toggle the visibility of the chart buttons labels.

Show_butons_label.jpg

Show time range information

Allows the user to toggle the visibility of the selected time range. If enabled, the time range will be displayed on the left side of the toolbar.

Show_time_range_information.jpg

Style

Border width

Sets the width of the component border, expressed in pixels.

The border width value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

This field supports the standard CSS notation.

Border_width.jpg

Internal toolbox

Auto update

Specifies whether the updating should happen automatically or not. This property is effective only if the Internal toolbox property is set to True.

Auto_update.jpg

Time Range

Contains a set of time range configurations. By clicking the Expand array list button, a list of modular time range properties is exposed. Based on the selection made for the Date range property, the view is updated accordingly, as follows:

  • Date range Offset - allows the user to pick the current filter, on a specified date, using the design-time properties Start offset and End offset, by choosing the type (seconds, minutes, hours, days). Time frame is by default calculated and set.

    • Start offset interval - Allows the user to specify the start length offset measured in seconds, minutes, days, weeks, months or years.

    • Start offset - Allows the user to set the start offset interval.

    • End offset interval - Allows the user to set the end offset interval.

    • End offset - Allows the user to specify the end length offset measured in seconds, minutes, days, weeks, months or years.

    Offset.jpg
  • Date range Specific - allows the user to pick the desired time interval, using the Start date / End date calendar selectors.

    • Start date - sets the start date of the component measurement.

    • End date - sets the end date of the component measurement.

    Specific.jpg
  • Date range Day - allows the user to select the desired Day as time range, from the calendar view.

    • Date - sets the date range, to a specific day.

    Day.jpg
  • Date range Week - allows the user to select the desired Week as time range, from the calendar view.

    • Date - sets the date range, to a specific week.

    week.jpg
  • Date range Month - allows the user to select the desired Month as time range, from the calendar view.

    • Date - sets the date range, to a specific month.

    Month.jpg
  • Date range Year - allows the user to select the desired Year as time range, from the calendar view.

    • Date - sets the date range, to a specific year.

    year.jpg
  • Date range:

    • Current day - allows the user to select the current day, as time range. Time frame of 24 hours is by default calculated and set.

      Current_day.jpg
    • Current week - allows the user to select the current week, as time range. Time frame of 7 days is by default calculated and set.

      Current_week.jpg
    • Current month - allows the user to select the current month, as time range. Time frame is by default calculated and set.

      Curent_month.jpg
    • Current year - allows the user to select the current year, as time range. Time frame is by default calculated and set.

      Current_time_range.jpg
  • Date range Last day / Last week / Last month / Last year

    • Last day - allows the user to select the day before the current one. Time frame of 24 hours is by default calculated and set.

      Last_day.jpg
    • Last week - allows te user to select the week before the current one. Time frame of 7 days is by default calculated and set.

      Las_week.jpg
    • Last month - allows the user to select the month before the current one. Time frame is by default calculated and set.

      Last_month.jpg
    • Last year - allows the user to select the year before the current one, as time range. Time frame is by default calculated and set.

      Past_date_range.jpg

Update rate

Sets the update rate of the Chart measurements, by allowing the user to manually fill in the desired value. The default update rate is set to 2000 milliseconds. This property will be taken into consideration only if the Auto update property is set to True.

Update_rate.jpg

Transform

Angle

Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value.

The component angle can also be adjusted directly on the design surface by means of mouse manipulation.

Angle.jpg

Height

Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component height can also be adjusted directly on the design surface by means of mouse manipulation.

Control_height.jpg

Left

Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Left.jpg

Top

Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Top.jpg

Width

Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component width can also be adjusted directly on the design surface by means of mouse manipulation.

Control_width.jpg
Series details
Abstract

Check out this article in order to learn more details about the i4designer Series details component and the properties provided by it.

The i4designer Series details component is a lightweight component which can display information regarding the data series configured inside the chart. Being the data provider of the Data series, the component table will reflect the Signals and Signal values configured for the Chart component, considering that the appropriate design-time settings have been organised.

Series_details_component.jpg

The Series details component

Category

Property

Description

Common

Name

The name of the component, visible in other Designer locations (such as Page explorer).

Name_pipe.jpg

Object ID

Sets the Object ID of the component. By defining an object ID for the control, it can be passed as SignalPrefix when using parameter passing in navigation. The value of the Object ID can be used via a placeholder [OID] in other properties of this extension. The placeholder is supported in all signal properties, symbolic text and states.

Example: Setpoint [OID]

Object_ID.jpg

Toolip text

Optional tooltip text, that will be shown on mouseover at runtime.

Tooltip_text.jpg

Security

Project authorization authorization/ Permission

The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,).

This property is named "Project authorization" for projects created on i4SCADA platform.

Project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

Roles.jpg

System authorization / Role

The system authorization required to display the component. If the logged in user does not have this system authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,).

This property is named "System authorization" for projects created on i4SCADA platform.

System_authorization.jpg

This property is named "Permissions" for projects created on i4connected platform.

Permissions.jpg

Security access behavior

Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.

Security_access_behavior.jpg

Layout

Layout mode

Sets the behaviour of the component related to the page placement. The user can select the component layout from the options available in the drop-down list: Default, Dock top, Dock bottom, Dock left, Dock right, Stretched, Pin top left, Pin top center, Pin top right, Pin right middle, Pin bottom right, Pin bottom center, Pin bottom left, Pin left middle and Pin center.

Layout_mode.jpg

Margin

Sets the margin of the component relative to the drawing board area. The supported values are the standard CSS values for the margin.

The top, bottom, left and right values can either be typed in the main property field or by using the Margin editor.

Margin_small.jpg

The Margin editor can be opened by clicking the Open button.

Margin_large.jpg

The components margins can be updated by setting the margin value and selecting the desired unit:

  • Ems (em) - The em is a scalable unit. One em is equal to the current font-size;

  • Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution).

  • Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.

Effects

Opacity

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

By default, the Component's opacity is set to value 1. Using the up / down arrows the user can control the opacity degree.

Opacity.jpg

By clicking the Open button the view is extended to display the Opacity slider.

Opacity_slider.jpg

Shadow color

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

Shadow_color.jpg

Shadow offset X

Sets the offset of the shadow on the horizontal axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_X.jpg

Shadow offset Y

Sets the offset of the shadow on the vertical axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_Y.jpg

Shadow size

Sets the width of the component shadow. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_size.jpg

Configuration

Client side configuration

Defines whether configurations are saved locally.

By default, the property is set to false, hence, all configurations are safely stored on the target server, and can be loaded to the component, regardless of the used browser.

If the property is set to true, all configurations are saved on the browser's local storage. When loading configurations saved locally, the system will initially load the configuration that is saved in the local storage, if one exists. If it doesn't exist it will fall back to the Initial configuration field. Further on, configurations saved locally can be lost, if the browser application is uninstalled, or if the user decides to change browser settings and return to factory defaults.

Client_side_configuration.jpg

Configuration buttons

Allows the user with possibility to configure the table buttons individually. The list of buttons can be accessed by clicking the Expand array list button. The list features the possibility to manage the:

  • the Series button

  • the Details button

  • the Layout button

  • the Load save button

Configuration_buttons.jpg

The list of configuration buttons, allows the user to change their position, by using the Move up / Move buttons.

Button_actions.jpg

Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties:

Buton_properties.jpg
  • Button name - sets the name of the button.

  • Enable operator - Sets the logical operator that checks the condition which will enable / disable the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Enable_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Enable signal name - Sets the signal name of the condition that will enable / disable the button.

    Enable_operator.jpg
  • Enable signal value - Sets the signal value of the condition that will enable / disable the button.

  • Project authorization / Permissions - The project authorization / Permission required for displaying the button. If the logged in user does not have this project authorization / permission, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled to all users.

  • System authorization / Roles - The System authorization / Role required to display the button. If the logged in user does not have this system authorization / role, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled for all users.

  • Security access behavior - Sets the behavior of the button to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged in user needs to meet both conditions to be able to see and utilise the button, at run-time.

  • Visibility operator - Sets the logical operator that checks the condition which will enable / disable visibility of the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Visibility_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Visibility signal name - Sets the signal name of the condition that will enable / disable the button visibility.

    Visibility_signal_name.jpg
  • Visibility signal value - Sets the signal value of the condition that will enable / disable the button visibility.

  • Hidden - Allows the user to hide the button, by enabling this property. If property is disabled, the button will be visible, if all the other conditions are met.

    Hidden.jpg

Configuration namespace

The namespace used by the chart predefined configuration, that should be applied at run time.

By setting this property, the respective configuration will be, by default, applied.

Configuration_namespace.jpg

Group name

Sets the name of the alarm group, used by the component.

Important

When using the three historical components on one project page, it is mandatory that the same Group name is specified, for all, in order that they represent the same data.

Group_name.jpg

Initial configuration

Sets the name of the an existing configuration, that will be initially loaded for the component, when opening the run-time project visualization.

Initial_configuration.jpg

Time range informaion format

Defines the format of the time range information, displayed by the time range information label. The Show time range information property must be enabled.

Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/.

For example: DD.MM.YYYY hh:mm:ss

Time_range_info_format.jpg

Title text

Sets the text displayed by the component title.

Title_text.jpg

Appearance

Details layout mode

Sets the layout mode of the series details, allowing the user to chose from the drop-down list options: Table or Card.

Details_layout_mode.jpg

Show button icons

Allows the user to toggle the visibility of the chart buttons icons.

Show_buttons_icons.jpg

Show buttons label

Allows the user to toggle the visibility of the chart buttons labels.

Show_butons_label.jpg

Show time range information

Allows the user to toggle the visibility of the selected time range. If enabled, the time range will be displayed on the left side of the toolbar.

Show_time_range_information.jpg

Palette

Background color

Sets the color of the component background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Background_color.jpg

Border color

Sets the color of the component border. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Border_color.jpg

Buttons background

Sets the color of the component buttons background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Buttons_background.jpg

Buttons foreground

Sets the color of the component buttons foreground. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

buttons_foreground.jpg

Foreground color

Sets the color of the component foreground. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Foreground_color.jpg

Header background

Sets the color of the component header background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Header_background.jpg

Header foreground

Sets the color of the component header foreground. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Title_foreground.jpg

Typography

Font family

Sets the font family of the component font, selecting from web-safe fonts available in the drop-down list.

Font_family.jpg

Title font size

Sets the size of the header font.

The header font size value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Title_font_size.jpg

Title font weight

Sets the thickness of the chart title displayed by the component header, , selecting from the drop-down list options: normal, 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (regular), 300 (light), 200 (extra-light) and 100 (thin).

Title_font_weight.jpg

Style

Border width

Sets the width of the component border, expressed in pixels.

The border width value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

This field supports the standard CSS notation.

Border_width.jpg

Transform

Angle

Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value.

The component angle can also be adjusted directly on the design surface by means of mouse manipulation.

Angle.jpg

Height

Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component height can also be adjusted directly on the design surface by means of mouse manipulation.

Control_height.jpg

Left

Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Left.jpg

Top

Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Top.jpg

Width

Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component width can also be adjusted directly on the design surface by means of mouse manipulation.

Control_width.jpg
Cursor details
Abstract

Check out this article in order to learn more details about the i4designer Cursor details component and the properties provided by it.

The i4designer Cursor details component is a lightweight component, which can expose the data and time series providers, as series data, by creating data cursors. The Cursor details component works through a tight relation with the Chart component.

Cursor_details.jpg

The Cursor details component

Category

Property

Description

Common

Name

The name of the component, visible in other Designer locations (such as Page explorer).

Name_pipe.jpg

Object ID

Sets the Object ID of the component. By defining an object ID for the control, it can be passed as SignalPrefix when using parameter passing in navigation. The value of the Object ID can be used via a placeholder [OID] in other properties of this extension. The placeholder is supported in all signal properties, symbolic text and states.

Example: Setpoint [OID]

Object_ID.jpg

Toolip text

Optional tooltip text, that will be shown on mouseover at runtime.

Tooltip_text.jpg

Security

Project authorization authorization/ Permission

The project authorization required for displaying the component. If the logged in user does not have this project authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled to all users. Further on, the user can also add multiple Project authorizations / Roles, separated by comma (,).

This property is named "Project authorization" for projects created on i4SCADA platform.

Project_authorization.jpg

This property is named "Role" for projects created on i4connected platform.

Roles.jpg

System authorization / Role

The system authorization required to display the component. If the logged in user does not have this system authorization, the component will not be visible or enabled (depending on the set Security access behavior). If the property is left empty, the component will be visible and enabled for all users. Further on, the user can also add multiple System authorizations / Permissions, separated by comma (,).

This property is named "System authorization" for projects created on i4SCADA platform.

System_authorization.jpg

This property is named "Permissions" for projects created on i4connected platform.

Permissions.jpg

Security access behavior

Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged user needs to meet both conditions to be able to see and utilize the component, at run-time.

Security_access_behavior.jpg

Layout

Layout mode

Sets the behaviour of the component related to the page placement. The user can select the component layout from the options available in the drop-down list: Default, Dock top, Dock bottom, Dock left, Dock right, Stretched, Pin top left, Pin top center, Pin top right, Pin right middle, Pin bottom right, Pin bottom center, Pin bottom left, Pin left middle and Pin center.

Layout_mode.jpg

Margin

Sets the margin of the component relative to the drawing board area. The supported values are the standard CSS values for the margin.

The top, bottom, left and right values can either be typed in the main property field or by using the Margin editor.

Margin_small.jpg

The Margin editor can be opened by clicking the Open button.

Margin_large.jpg

The components margins can be updated by setting the margin value and selecting the desired unit:

  • Ems (em) - The em is a scalable unit. One em is equal to the current font-size;

  • Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution).

  • Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.

Effects

Opacity

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

By default, the Component's opacity is set to value 1. Using the up / down arrows the user can control the opacity degree.

Opacity.jpg

By clicking the Open button the view is extended to display the Opacity slider.

Opacity_slider.jpg

Shadow color

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

Shadow_color.jpg

Shadow offset X

Sets the offset of the shadow on the horizontal axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_X.jpg

Shadow offset Y

Sets the offset of the shadow on the vertical axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_Y.jpg

Shadow size

Sets the width of the component shadow. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_size.jpg

Configuration

Client side configuration

Defines whether configurations are saved locally or on the target server.

By default, the property is set to false, hence, all configurations are safely stored on the target server, and can be loaded to the component, regardless of the used browser.

If the property is set to true, all configurations are saved on the browser's local storage. When loading configurations saved locally, the system will initially load the configuration that is saved in the local storage, if one exists. If it doesn't exist it will fall back to the Initial configuration field. Further on, configurations saved locally can be lost, if the browser application is uninstalled, or if the user decides to change browser settings and return to factory defaults.

Client_side_configuration.jpg

Configuration buttons

Allows the user with possibility to configure the table buttons individually. The list of buttons can be accessed by clicking the Expand array list button. The list features the possibility to manage the:

  • the Series button

  • the Details button

  • the Layout button

  • the Load save button

Configuration_buttons.jpg

The list of configuration buttons, allows the user to change their position, by using the Move up / Move buttons.

Button_actions.jpg

Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties:

Buton_properties.jpg
  • Button name - sets the name of the button.

  • Enable operator - Sets the logical operator that checks the condition which will enable / disable the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Enable_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Enable signal name - Sets the signal name of the condition that will enable / disable the button.

    Enable_operator.jpg
  • Enable signal value - Sets the signal value of the condition that will enable / disable the button.

  • Project authorization / Permissions - The project authorization / Permission required for displaying the button. If the logged in user does not have this project authorization / permission, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled to all users.

  • System authorization / Roles - The System authorization / Role required to display the button. If the logged in user does not have this system authorization / role, the button will not be visible or enabled. If the property is left empty, the button will be visible and enabled for all users.

  • Security access behavior - Sets the behavior of the button to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Project authorization / Roles and System authorization / Permissions properties. In case both Project authorization / Roles and System authorization / Permissions properties are set, the logged in user needs to meet both conditions to be able to see and utilise the button, at run-time.

  • Visibility operator - Sets the logical operator that checks the condition which will enable / disable visibility of the button. As the logical operator needs to be manually inserted, the below list illustrates the logical operators that can be used:

    Visibility_operator.jpg
    • = (Equals)

    • != (Different)

    • < (Less than)

    • > (Greater than)

    • <= (Less or equal)

    • >= (Greater or equal)

    • & (AND)

    • | (OR)

    • ^ (NOT)

    • << (Left shift)

    • >> (Right shift)

    • endswith (Ends with)

    • startswith (Starts with)

    • contains (Contains)

  • Visibility signal name - Sets the signal name of the condition that will enable / disable the button visibility.

    Visibility_signal_name.jpg
  • Visibility signal value - Sets the signal value of the condition that will enable / disable the button visibility.

  • Hidden - Allows the user to hide the button, by enabling this property. If property is disabled, the button will be visible, if all the other conditions are met.

    Hidden.jpg

Configuration namespace

The namespace used by the chart predefined configuration, that should be applied at run time.

By setting this property, the respective configuration will be, by default, applied.

Configuration_namespace.jpg

Group name

Sets the name of the alarm group, used by the component.

Important

When using the three historical components on one project page, it is mandatory that the same Group name is specified, for all, in order that they represent the same data.

Group_name.jpg

Initial configuration

Sets the name of the initially loaded chart configuration.

Initial_configuration.jpg

Time range information format

Defines the format of the time range information, displayed by the time range information label. The Show time range information property must be enabled.

Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/.

For example: DD.MM.YYYY hh:mm:ss

Time_range_info_format.jpg

Title text

Sets the text displayed by the component title.

Title_text.jpg

Palette

Background color

Sets the color of the component background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Background_color.jpg

Border color

Sets the color of the component border. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Border_color.jpg

Buttons background

Sets the background color displayed by the component's buttons. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Buttons_background.jpg

Buttons foreground

Sets the foreground color of the component's buttons. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

buttons_foreground.jpg

Foreground color

Sets the color of the component foreground. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Foreground_color.jpg

Header background

Sets the color of the component header background. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Header_background.jpg

Header foreground

Sets the color of the component header foreground. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Title_foreground.jpg

Typography

Font family

Sets the font family of the component font, selecting from web-safe fonts available in the drop-down list.

Font_family.jpg

Title font size

Sets the size of the header font.

The header font size value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

Title_font_size.jpg

Title font weight

Sets the thickness of the chart title displayed by the component header, , selecting from the drop-down list options: normal, 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (regular), 300 (light), 200 (extra-light) and 100 (thin).

Title_font_weight.jpg

Appearance

Show buttons icons

Allows the user to toggle the visibility of the chart buttons icons.

Show_buttons_icons.jpg

Show buttons label

Allows the user to toggle the visibility of the chart buttons labels.

Show_butons_label.jpg

Show time range information

Allows the user to toggle the visibility of the selected time range. If enabled, the time range will be displayed on the left side of the toolbar.

Show_time_range_information.jpg

Style

Border width

Sets the width of the component border, expressed in pixels.

The border width value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.

This field supports the standard CSS notation.

Border_width.jpg

Transform

Angle

Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value.

The component angle can also be adjusted directly on the design surface by means of mouse manipulation.

Angle.jpg

Height

Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component height can also be adjusted directly on the design surface by means of mouse manipulation.

Control_height.jpg

Left

Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Left.jpg

Top

Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Top.jpg

Width

Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component width can also be adjusted directly on the design surface by means of mouse manipulation.

Control_width.jpg