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.

Tip

For a set of step-based tutorials describing the usage of the Historical components, please visit the dedicated tutorials, here.

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 the 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.*

The Toolbox component

Category	Property	Description
Common	Name	The name of the component, visible in other Designer locations (such as Page explorer).
	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]
	Tooltip text	Optional tooltip text, that will be shown on mouseover at runtime.
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. This property is named "Role" for projects created on i4connected platform.
	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. This property is named "Permissions" for projects created on i4connected platform.
	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.
Layout	Layout mode	Sets the behavior 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	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. The Margin editor can be opened by clicking the Open button. 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 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. By clicking the Open button the view is extended to display the Opacity slider.
	Shadow color	Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.
	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 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 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.
Configuration	Auto-update	Specifies whether the updating should happen automatically or not.
	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.
	Configuration buttons	Allows the user with the 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 list of configuration buttons, allows the user to change their position, by using the Move up / Move buttons. Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties: 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 position. 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: = (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 signal value - Sets the signal value of the condition that will enable/disable the button. Project authorizations / 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 authorizations / 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 be 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 utilize 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: = (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 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 the property is disabled, the button will be visible, if all the other conditions are met.
	Configuration namespace	The namespace used by the chart predefined configuration should be applied at run time. By setting this property, the respective configuration will be, by default, applied.
	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 is 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
	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.
	Max entries	Defines the maximum number of logbooks displayed by the chart series. By default, the value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows. Warning By setting this property to 0 (or lower), the chart will not be populated.
	Initial configuration	Sets the name of the existing configuration, that will be initially loaded for the component when opening the run-time project visualization.
	Series list	Allows the user to configure the series, at design-time. The configured series will be automatically taken over by the Toolbox, when opening the run-time visualization. Log Tag - Displays the signal log tag. Note The Signal log is only required for projects created on the i4scada platform. Signal name - The signal is selected from the list of Signals. If Signals were previously synchronized or uploaded to the current project, otherwise, you can type in the Signal name, in the dedicated field.
	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). The 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. 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. 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. 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. 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. 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. Date range: Current day - allows the user to select the current day, as time range. The time frame of 24 hours is by default calculated and set. Current week - allows the user to select the current week, as a time range. The time frame of 7 days is by default calculated and set. Current month - allows the user to select the current month, as a time range. The time frame is by default calculated and set. Current year - allows the user to select the current year, as a time range. The time frame is by default calculated and set. Date range Last day / Last week / Last month / Last year Last day - allows the user to select the day before the current one. The time frame of 24 hours is by default calculated and set. Last week - allows the user to select the week before the current one. The time frame of 7 days is by default calculated and set. Last month - allows the user to select the month before the current one. The time frame is by default calculated and set. Last year - allows the user to select the year before the current one, as time range. The time frame is by default calculated and set.
	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 is 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
	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.
	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.
Signal	Signal name format	Defines the format in which the signal information appears. This property can be used to extract the following Signal information, written between square brackets: [name] [value] [unit] [description], therefore, at run-time, the Signal name, current value, unit of measure, and description will be displayed. By default, these components will have the Signal name format property populated with the “[name]” value. The user can add other available formats, such as [value] [unit] [description], with or without space between them, separated by any type of separator (e.g. dot, comma, or semicolon). The information will be visible at both run-time and design time.
Palette	Background color	Sets the color of the component background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Border color	Sets the color of the component border. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Buttons background	Sets the color of the component buttons' background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Buttons foreground	Sets the color of the component buttons foreground. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Title foreground	Sets the color of the component title textual information foreground. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
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. The components border width can be updated by setting the values and the desired unit: Ems (em) - The em is a scalable unit. One em is equal to the current font size; Pixels (px) - Pixels 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.
Typography	Button font family	Sets the font family of the button title, selecting from web-safe fonts available in the drop-down list.
	Button font size	Sets the font size of the button. The button font-size value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.
	Button font weight	Sets the thickness of the button, selecting from the drop-down list options: 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (normal), 300 (light), 200 (extra-light) and 100 (thin).
	Header font family	Sets the font family of the component font, selecting from web-safe fonts available in the drop-down list.
	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 weight	Sets the thickness of the chart title displayed by the component header, selecting from the drop-down list options: 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (normal), 300 (light), 200 (extra-light) and 100 (thin).
Appearance	Show buttons icons	Allows the user to toggle the visibility of the chart buttons icons.
	Show buttons label	Allows the user to toggle the visibility of the chart buttons label.
	Show time range information	Alows 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.
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.
	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.
	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.
	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.
	Width	Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixel value. The component width can also be adjusted directly on the design surface by means of mouse manipulation.
	Disable flip	Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.
	Horizontal flip	Flips the selected component horizontally.
	Vertical flip	Flips the selected component vertically.

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.

The Chart component

Category	Property	Description
Common	Name	The name of the component, visible in other Designer locations (such as Page explorer).
	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]
	Tooltip text	Optional tooltip text, that will be shown on mouseover at runtime.
Security	Project authorization / Permissions	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. This property is named "Role" for projects created on i4connected platform.
	System authorization / Roles	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. This property is named "Permissions" for projects created on i4connected platform.
	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.
Layout	Layout mode	Sets the behavior 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	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. The Margin editor can be opened by clicking the Open button. 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 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. By clicking the Open button the view is extended to display the Opacity slider.
	Shadow color	Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.
	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 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 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.
Configuration	Axes list	The Y Axis represents the data range. This axis is shown vertically and it is fully customizable by the means of the following properties: Name - Sets the name of the axis. By default, the name is set to "Y Axis", but you can change the name, by typing it in the designated field. Axis color - Sets the color of the Y axis. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten. Digits - Sets the number of digits displayed after the comma, by the Y-Axis labels. The default value is set to 10. Grid color - Sets the color of the chart grid, allowing the user to select it, using the color picker tool. Grid thickness - sets the thickness of the chart grid, expressed in pixels. By default, the value is set to 0, which means that the grid lines are not visible. To enable their visibility, the value of the grid thickness parameter should be higher or equal to 1. Inversed - Enables or disables the direction of the chart labels. Is Auto - Sets the behavior of the Min / Max Axis values. If the property is disabled, the user can customize the Signal Min / Max range, using the below selectors. If the property is enabled, the Min / Max selectors will be disabled and the Axis values will automatically apply the Signal Min / Max range. Label rotation - Sets the angle rotation of Y-Axis chart labels. The default value is set to 0 but it can be increased or decreased, as desired. Logarithmic - Enables or disables the Logarithmic scale representation. Max - Allows the user with the possibility to select the maximum value of the Y-Axis labels. The default value is set to 100 but it can be increased or decreased, as desired. Min - Allows the user with the possibility to select the minimum value of the Y-Axis labels. The default value is set to 0 but it can be increased or decreased, as desired. Min Grid Distance - Sets the value of the minimum distance between the grid lines on the chart surface. The default value is set to 20 pixels, but it can be increased or decreased, by either manually filling in the expected distance, or by using the up/down arrows, of the dedicated field. Opposite - Enables or disables the orientation of the Y-Axis. By default, the Y-Axis is displayed on the left side of the chart. By enabling this parameter, the orientation of the Y-Axis will be changed and it will be displayed on the right side of the chart. Scientific - Enables or disables the Scientific scale representation. Show First label - Enables or disables the display of the first chart label. By default, the Show First Label parameter is enabled. To disable it, simply unmark the designated check-box. If the first chart label is 0, having this parameter disabled, will remove the 0 labels from the chart. Show labels - Enables or disables the chart labels display. By default, the show label parameter is set to TRUE. Show Last label - Show Last Label - enables or disables the display of the last chart label. By default, the Show Last Label parameter is enabled. To disable it, simply unmark the designated check-box. If the last chart label is 10, having this parameter disabled, will remove the 10 labels from the chart. Axis thickness - Sets the thickness of the Y-Axis, expressed in pixels. The default value can be increased or decreased, either by manually typing in the desired value or by using the up and down arrows. Title rotation - sets the angular rotation of the Y-Axis chart title. The default value is set to 0 but it can be increased or decreased, as desired. Integer Values - Enables or disables the usage of Integer values. By default, the Use Integer Values parameter is disabled. To enable it, simply mark the designated check-box. Axis value position - Sets the position of the values to either Outside or Inside the bootstrap grid.
	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 type	Sets the type of chart, used to represent signal values, allowing the user to choose the desired type from the designated drop-down list options: Analog - Uses a continuous range of values to represent information; Digital - Uses discrete or discontinuous values to represent information
	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.
	Configuration buttons	Allows the user the 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 Horizontal Lines button the Legend button the Save/Load button the Print button The list of configuration buttons, allows the user to change their position, by using the Move up / Move buttons. Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties: 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: = (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 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 be 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 utilize 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: = (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 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 the property is disabled, the button will be visible, if all the other conditions are met.
	Configuration namespace	The namespace used by the chart predefined configuration should be applied at run time. By setting this property, the respective configuration will be, by default, applied.
	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.
	Initial configuration	Sets the name of the existing configuration, that will be initially loaded for the component when opening the run-time project visualization.
	Internal toolbox	Enables or disables the visibility of the integrated chart toolbox. If the 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.
	Legend Configuration	Allows the user to configure the legend's chart, at design-time. The configured series will be automatically taken over by the chart, when opening the run-time visualization. Background color - Sets the background color of the component's legend border. Legend background opacity - Sets the opacity of the component's legend background. The default value is set to 1. Border color - Sets the color of the component's legend border. Legend border opacity - Sets the opacity of the component's legend border. The default value is set to 0. Legend entries alignment - Sets the alignment of the entries inside the legend, choosing from the drop-down list items: Left, Center, and Right. Legend Max Height - Sets the legend's maximum height. The value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows. The default value is set to 50. 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. Show legend - Allows the user to toggle the visibility of the chart legend. Text Color - Sets the color of the legend textual information. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten. 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. 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. Visibility value - Sets the signal value that enables or disables the visibility of the chart. Legend border width -Sets the width of the chart's legend border in pixels. The border width is specified by one single value and it applies the same width to all four sides (top, bottom, right, and left). The default value is 0 (pixels) and it can be increased/decreased by using the up and down arrows.
	Horizontal line list	Allows the user to configure the horizontal lines of the chart, at design-time. The configured horizontal lines will be automatically taken over by the chart, when opening the run-time visualization. Name - Sets the name of the axis. By default, the name is set to "Y", but you can change the name, by typing it in the designated field. Axis - Sets the axis to which the region/line belongs. Foreground - Sets the foreground color of the component's text. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten. Min - Allows the user the possibility to select the minimum value of the Y-Axis labels. The value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows. The default value is set to -100. Max -allows the user the possibility to select the maximum value of the Y-Axis labels. The value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows. The default value is set to 100. Min Offset - Sets the offset from which the horizontal line starts. The value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows. Max Offset - Sets the offset from which the horizontal line ends. The value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows. Line Type - Sets the type of the line, allowing the user to choose the desired type from the designated drop-down list options: Line and Region.
	Series list	Allows the user to configure the series, at design time. The configured series will be automatically taken over by the Chart, when opening the run-time visualization. Axis - Allows the user the possibility to change the current axis. Digital - Enables or disables whether the values are manipulated into a Digital line or not. Digital bit - Sets the Digital bit. The default value is set to 1. Digits - Sets the number of digits displayed after the comma, by the chart values. The default value is set to 10. Display name - Sets the name of the Series. By default, the name of the series is automatically provided, by the system, considering the signal constituting the data series. Fill color - Allows the user to customize the background color for the plot area, which fills in the gap between the X-axis and the edge of your graph. Invert digital - Enables or disables the Invert digital representation option to define whether the historical values are inverted or not. Show gaps - Allows the user to select the Signal used by the current series. To open the Signals list, click on the expand array list button. Signal selector - Allows the user to select the Signal used by the current series. To open the Signals list, click on the expand array list button. Log Tag - Displays the signal Log Tag. Note The Signal log is only required for projects created on the i4scada platform. Signal name - The signal is selected from the list of Signals. If Signals were previously synchronized or uploaded to the current project, otherwise, you can type in the Signal name, in the dedicated field. Stroke color - Allows the user to customize the color of the lines, dots, or bars, displayed by the chart. The default value is set to a randomly selected color, but you can customize it, by using the color picker tool. Axis thickness - Sets the thickness of the Y-Axis, expressed in pixels. By default, the value is set to 0, but you can increase or decrease the value manually. Chart type - Allows the user to customize the graphical representation of the chart data, by choosing from the following types: Line, Stacked line, Dots, Line dots, Step, Bar, Stacked bar.
	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 is 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 .
	Toolbox configuration	Allows the user to configure the toolbox, at design time. The configured toolbox will be automatically taken over, when opening the run-time visualization. Auto update - Specifies whether the updating should happen automatically or not. This property is effective only if the property is set to True. Max entries - Defines the maximum number of logbooks displayed by the chart series. By default, the value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows. Time Range - Contains a set of time range configurations. By clicking the Expand array list button, a list of Date range properties is exposed. Based on the selection made for the Date range property, the view is updated accordingly. 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.
	Toolbox buttons	Allows the user the 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 & Cursor button the Export button The list of configuration buttons, allows the user to change their position, by using the Move up / Move buttons. Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties: 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 position. 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: = (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 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 be 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 utilize 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: = (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 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 the property is disabled, the button will be visible, if all the other conditions are met.
	X Axis	The chart's timeline is represented by the X Axis, positioned horizontally at the bottom of the chart. Axis name - Sets the name of the X axis. Axis color - Sets the color of the X axis. Show labels - Enables or disables the chart labels display. By default, the Show Label parameter is set to TRUE. Axis thickness - Sets the thickness of the X-Axis, expressed in pixels. By default, the value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows. Axis value position Sets the position of the values to either Outside or Inside the bootstrap grid. Chart date format - Selects the time and date format for the DateTime Signal values. Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, and DD. Further information is available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/. For example: M/d/yyyy. Grid color - Sets the color of the chart grid, allowing the user to select it, using the color picker tool. Grid thickness - sets the thickness of the chart grid, expressed in pixels. By default, the value is set to 0.5, which means that the grid lines are not visible. To enable their visibility, the value of the grid thickness parameter should be higher or equal to 1. Label rotation - Sets the angle rotation of X-Axis chart labels. By default, the value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows. Min Grid Distance - sets the value of the minimum distance between the grid lines on the chart surface. The default value is set to 50 pixels, but it can be increased or decreased, by either manually filling in the expected distance, or by using the up/down arrows, of the dedicated field.
Appearance	Show buttons icons	Allows the user to toggle the visibility of the chart buttons icons.
	Show buttons label	Allows the user to toggle the visibility of the chart buttons labels.
	Show header	Allows the user to toggle the visibility of the chart header.
	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.
Palette	Background	Sets the background color of the data area. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Border color	Sets the color of the component's border. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Buttons background	Sets the color of the chart buttons background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Buttons foreground	Sets the color of the chart buttons foreground. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Header background	Sets the color of the header background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Header foreground	Sets the color of the header foreground. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
Signal	Signal name format	Defines the format in which the signal information appears. This property can be used to extract the following Signal information, written between square brackets: [name] [value] [unit] [description], therefore, at run-time, the Signal name, current value, unit of measure, and description will be displayed. By default, these components will have the Signal name format property populated with the “[name]” value. The user can add other available formats, such as [value] [unit] [description], with or without space between them, separated by any type of separator (e.g. dot, comma, or semicolon). The information will be visible at both run-time and design time.
Typography	Button font family	Sets the font family of the button title, selecting from web-safe fonts available in the drop-down list.
	Button font size	Sets the font size of the button. The button font-size value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.
	Button font weight	Sets the thickness of the button, selecting from the drop-down list options: 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (normal), 300 (light), 200 (extra-light) and 100 (thin).
	Header font family	Sets the font family of the component font, selecting from web-safe fonts available in the drop-down list.
	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-weight	Sets the font weight of the chart displayed by the component header, selecting from the drop-down list options: 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (normal), 300 (light), 200 (extra-light) and 100 (thin).
Style	Border width	Sets the width of the container border 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. The component's border width can be updated by setting the values and the desired unit: Ems (em) - The em is a scalable unit. One em is equal to the current font size; Pixels (px) - Pixels 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.
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.
	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.
	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.
	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.
	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.
	Disable flip	Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.
	Horizontal flip	Flips the selected component horizontally.
	Vertical flip	Flips the selected component vertically.

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.

The Data Table component

Category	Property	Description
Common	Name	The name of the component, visible in other Designer locations (such as Page explorer).
	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]
	Tooltip text	Optional tooltip text, that will be shown on mouseover at runtime.
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. This property is named "Role" for projects created on i4connected platform.
	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. This property is named "Permissions" for projects created on i4connected platform.
	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.
Layout	Layout mode	Sets the behavior 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	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. The Margin editor can be opened by clicking the Open button. 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 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. By clicking the Open button the view is extended to display the Opacity slider.
	Shadow color	Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.
	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 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 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.
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.
	Configuration buttons	Allows the user with the 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 Save/Load button. The list of configuration buttons, allows the user to change their position, by using the Move up / Move buttons. Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties: 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: = (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 signal value - Sets the signal value of the condition that will enable/disable the button. Project authorizations / 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 authorizations / 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 be 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 utilize 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: = (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 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 the property is disabled, the button will be visible, if all the other conditions are met.
	Configuration namespace	The namespace used by the chart predefined configuration, should be applied at run time. By setting this property, the respective configuration will be, by default, applied.
	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.
	Initial configuration	Sets the name of the initially loaded table configuration.
	Internal toolbox	Enables or disables the visibility of the integrated table toolbox. If the 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.
	Page size	Sets the size of the page component using the up and down arrows to increase and decrease, or by manually typing the desired pixel value.
	Series list	Allows the user to configure the series, at design time. The configured series will be automatically taken over by the Chart, when opening the run-time visualization. Alignment - Sets the alignment of the Signal values in the signal cell, by selecting from the drop-down list options: Left, Center, and Right. Auto format - Enables or disables the automatic formatting of the signal value. When the automatic formatting is enabled, the signal shows the exact value with all its existing decimals. Background - Sets the background color of the new series property. The user can either manually type in the HEX color code or use the color picker tool. Width - Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixel value. The component width can also be adjusted directly on the design surface by means of mouse manipulation. Digits - Sets the number of digits displayed after the comma, by the chart values. The default value is set to 1. Display name - Sets the name of the Series. By default, the name of the series is automatically provided, by the system, considering the signal constituting the data series. Foreground - Sets the foreground color in the data series table. The user can either manually type in the HEX color code or use the color picker tool. Scientific - Enables or disables the Scientific scale representation. Tip A scientific scale representation is a set of numbers that help to measure or quantify various objects. A scale on the graph shows the way the numbers are used in data. Signal selector - Allows the user to select the Signal used by the current series. To open the Signals list, click on the expand array list button. LogTag - Displays the signal Log tag. Note The Signal log is only required for projects created on the i4scada platform. Signal name - The signal is selected from the list of Signals. If Signals were previously synchronized or uploaded to the current project, otherwise, you can type in the Signal name, in the dedicated field. Unit - Allows the user to set the signals unit of measure.
	Show pager	Sets the display of the pager bar. By default, the property is set to TRUE.
	Time column	Sets the time column configuration by means of the following properties: Alignment - Sets the alignment of the data, in the table view. You can choose from the following options: Center, Left , or Right. Foreground - Sets the foreground color of the Timestamp column entries. Background - Sets the background color of the Timestamp column entries. Width - Sets the width of the Timestamp Data Table columns. The width is by default set to 300, The default value can be increased or decreased, either by manually typing in the desired value or by using the up and down arrows. Freeze Time - Allows you to lock the Timestamp column, so that, when you scroll down or over to view the rest of your table, the Timestamp column remains on the screen. By default, the Freeze Time option is disabled. Show Date - Enables or disables the display of the date, for the Timestamp column entries. By default, the Show Date option is enabled. By disabling it, the Timestamp entries will only display the Time. Show Milliseconds - Enables or disables the display of milliseconds, for the Timestamp column entries. By default, the Show Milliseconds option is disabled.
	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 is 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.
	Title text	Sets the text displayed by the component title.
	Toolbox configuration	Allows the user to configure the toolbox, at design time. The configured toolbox will be automatically taken over, when opening the run-time visualization. Auto update - Specifies whether the updating should happen automatically or not. This property is effective only if the property is set to True. Max entries - Defines the maximum number of logbooks displayed by the chart series. By default, the value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows. Time range - Contains a set of time range configurations. By clicking the Expand array list button, a list of Date range properties is exposed. Based on the selection made for the Date range property, the view is updated accordingly. 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). The 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. 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. 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. 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. 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. Date range: Current day - allows the user to select the current day, as time range. The time frame of 24 hours is by default calculated and set. Current week - allows the user to select the current week, as a time range. The time frame of 7 days is by default calculated and set. Current month - allows the user to select the current month, as a time range. The time frame is by default calculated and set. Current year - allows the user to select the current year, as a time range. The time frame is by default calculated and set. Date range Last day / Last week / Last month / Last year Last day - allows the user to select the day before the current one. The time frame of 24 hours is by default calculated and set. Last week - allows the user to select the week before the current one. The time frame of 7 days is by default calculated and set. Last month - allows the user to select the month before the current one. The time frame is by default calculated and set. Last year - allows the user to select the year before the current one, as time range. The time frame is by default calculated and set. 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.
	Toolbox buttons	Allows the user with the 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 The list of configuration buttons, allows the user to change their position, by using the Move up / Move buttons. Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties: 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 position. 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: = (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 signal value - Sets the signal value of the condition that will enable/disable the button. Project authorizations / 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 authorizations / 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 be 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 utilize 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: = (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 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 the property is disabled, the button will be visible, if all the other conditions are met.
Palette	Background color	Sets the color of the component background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Border color	Sets the color of the chart buttons background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Buttons background	Sets the color of the chart buttons background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Buttons foreground	Sets the color of the chart buttons foreground. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Header background	Sets the color of the header background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Header foreground	Sets the color of the header foreground. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
Typography	Header font family	Sets the font family of the component font, selecting from web-safe fonts available in the drop-down list.
	Button font family	Sets the font family of the button title, selecting from web-safe fonts available in the drop-down list.
	Button font size	Sets the font size of the button. The button font-size value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.
	Button font weight	Sets the thickness of the button, selecting from the drop-down list options: 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (normal), 300 (light), 200 (extra-light) and 100 (thin).
	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 weight	Sets the thickness of the chart title displayed by the component header, selecting from the drop-down list options: 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (normal), 300 (light), 200 (extra-light) and 100 (thin).
Appearance	Show buttons icons	Allows the user to toggle the visibility of the chart buttons icons.
	Show header	Allows the user to toggle the visibility of the Data table header.
	Show buttons label	Allows the user to toggle the visibility of the chart buttons labels.
	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.
Signal	Signal name format	Defines the format in which the signal information appears. This property can be used to extract the following Signal information, written between square brackets: [name] [value] [unit] [description], therefore, at run-time, the Signal name, current value, unit of measure, and description will be displayed. By default, these components will have the Signal name format property populated with the “[name]” value. The user can add other available formats, such as [value] [unit] [description], with or without space between them, separated by any type of separator (e.g. dot, comma, or semicolon). The information will be visible at both run-time and design time.
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. The components border width can be updated by setting the values and the desired unit: Ems (em) - The em is a scalable unit. One em is equal to the current font size; Pixels (px) - Pixels 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.
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.
	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.
	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.
	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.
	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.
	Disable flip	Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.
	Horizontal flip	Flips the selected component horizontally.
	Vertical flip	Flips the selected component vertically.

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 that 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 organized.

The Series details component

Category	Property	Description
Common	Name	The name of the component, visible in other Designer locations (such as Page explorer).
	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]
	Tooltip text	Optional tooltip text, that will be shown on mouseover at runtime.
Security	Project authorizations/ Permissions	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. This property is named "Role" for projects created on i4connected platform.
	System authorizations / Roles	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. This property is named "Permissions" for projects created on i4connected platform.
	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.
Layout	Layout mode	Sets the behavior 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	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. The Margin editor can be opened by clicking the Open button. 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 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. By clicking the Open button the view is extended to display the Opacity slider.
	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 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 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 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.
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.
	Configuration buttons	Allows the user with the 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 Save/Load button The list of configuration buttons, allows the user to change their position, by using the Move up / Move buttons. Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties: 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: = (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 signal value - Sets the signal value of the condition that will enable/disable the button. Project authorizations / 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 authorizations / 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 be 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 utilize 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: = (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 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 the property is disabled, the button will be visible, if all the other conditions are met.
	Configuration namespace	The namespace used by the chart predefined configuration should be applied at run time. By setting this property, the respective configuration will be, by default, applied.
	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.
	Initial configuration	Sets the name of the existing configuration, that will be initially loaded for the component when opening the run-time project visualization.
	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 is 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
	Title text	Sets the text displayed by the component title.
Appearance	Details layout mode	Sets the layout mode of the series details, allowing the user to choose from the drop-down list options: Table or Card.
	Show button icons	Allows the user to toggle the visibility of the chart buttons icons.
	Show buttons label	Allows the user to toggle the visibility of the chart buttons labels.
	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.
Palette	Background color	Sets the color of the component background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Border color	Sets the color of the component border. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Buttons background	Sets the color of the component buttons' background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Buttons foreground	Sets the color of the component buttons foreground. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Header background	Sets the color of the component header background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Header foreground	Sets the color of the component header foreground. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
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 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 weight	Sets the thickness of the chart title displayed by the component header, , selecting from the drop-down list options: 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (normal), 300 (light), 200 (extra-light) and 100 (thin).
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. The components border width can be updated by setting the values and the desired unit: Ems (em) - The em is a scalable unit. One em is equal to the current font size; Pixels (px) - Pixels 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.
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.
	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.
	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.
	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.
	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.
	Disable flip	Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.
	Horizontal flip	Flips the selected component horizontally.
	Vertical flip	Flips the selected component vertically.

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.

The Cursor details component

Category	Property	Description
Common	Name	The name of the component, visible in other Designer locations (such as Page explorer).
	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]
	Tooltip text	Optional tooltip text, that will be shown on mouseover at runtime.
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. This property is named "Role" for projects created on i4connected platform.
	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. This property is named "Permissions" for projects created on i4connected platform.
	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.
Layout	Layout mode	Sets the behavior 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	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. The Margin editor can be opened by clicking the Open button. 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 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. By clicking the Open button the view is extended to display the Opacity slider.
	Shadow color	Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.
	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 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 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.
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.
	Configuration buttons	Allows the user with the 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 Cursors button the Details button the Layout button the Save/Load button The list of configuration buttons, allows the user to change their position, by using the Move up / Move buttons. Further on, the user can individually manage the listed buttons, by setting the desired values, for the following properties: 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: = (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 signal value - Sets the signal value of the condition that will enable/disable the button. Project authorizations / 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 authorizations / 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 be 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 utilize 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: = (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 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 the property is disabled, the button will be visible, if all the other conditions are met.
	Configuration namespace	The namespace used by the chart predefined configuration, should be applied at run time. By setting this property, the respective configuration will be, by default, applied.
	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.
	Initial configuration	Sets the name of the initially loaded chart configuration.
	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 is 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
	Title text	Sets the text displayed by the component title.
Palette	Background color	Sets the color of the component background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Border color	Sets the color of the component border. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Buttons background	Sets the background color displayed by the component's buttons. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Buttons foreground	Sets the foreground color of the component's buttons. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Header background	Sets the color of the component header background. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
	Header foreground	Sets the color of the component header foreground. As the color palette is injected into this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.
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 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 weight	Sets the thickness of the chart title displayed by the component header, , selecting from the drop-down list options: 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (normal), 300 (light), 200 (extra-light) and 100 (thin).
Appearance	Details layout mode	Sets the layout mode of the series details, allowing the user to choose from the drop-down list options: Table or Card.
	Show buttons icons	Allows the user to toggle the visibility of the chart buttons icons.
	Show buttons label	Allows the user to toggle the visibility of the chart buttons labels.
	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.
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. The components border width can be updated by setting the values and the desired unit: The components border width can be updated by setting the values and the desired unit: Pixels (px) - Pixels 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.
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.
	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.
	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.
	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.
	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.
	Disable flip	Disables any flip transformation for this component. This keeps the component in the default position even when its container is flipped.
	Horizontal flip	Flips the selected component horizontally.
	Vertical flip	Flips the selected component vertically.

In this section:

i4designer Knowledge Base

Historical

Tip

Toolbox

Warning

Important

Warning

Note

Chart

Important

Note

Data Table

Important

Tip

Note

Series details

Important

Cursor details

Important

Search results