i4designer Knowledgebase

Security

Abstract

Check out this article and learn more details about the i4SCADA security-specific components and how to set them up, for your projects.

The Security category provides the list of components that allow the user to control access to the project visualization.

Tip

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

User actions list
Abstract

Check out this article in order to learn more details about the i4designer User actions list component and its properties.

The User actions list component is a simple output control that displays the list of actions performed by the i4SCADA system users.

UserActionsList_component.jpg

The User actions list component

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID_user_infor.jpg

Tooltip text

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

Tooltip_text_user_info.jpg

Security

System authorization

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 (,).

System_authorization.jpg

Project authorization

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 (,).

Project_authorization.jpg

Security access behavior

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

Security_access_behavior.jpg

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_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

Shadow_color.jpg

Shadow offset X

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

Shadow_offset_X.jpg

Shadow offset Y

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

Shadow_offset_Y.jpg

Shadow size

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

Shadow_size.jpg

Configuration

Auto update

By enabling the Auto-refresh toggle button, the list will be refreshed automatically at certain predefined time intervals.

Auto_update.jpg

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.

Configuration_namespace.jpg

DateTime format

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

DateTime_format.jpg

Time Range

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    year.jpg
  • Date range:

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

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

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

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

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

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

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

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

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

      Past_date_range.jpg

Title text

Sets the text displayed as title in the component's header.

Title_text.jpg

Update rate

Sets the update rate (expressed in milliseconds). The update rate (expressed in milliseconds).

This property will be taken into consideration only if the Auto Refresh property is set to True.

Update_reate.jpg

Appearance

Page size

Sets the number of visible user actions on a single page. By default, the value of this field is set to 5, but the number can be increased or decreased, by manually typing in the new value or by using the up / down arrows.

Page_size.jpg

Show footer

Allows the user to enable or disable the display of the User Actions List footer.

Show_footer.jpg

Show header

Allows the user to enable or disable the display of the User Actions List header.

Show_headers.jpg

Show index column

Allows the user to enable or disable the display of the index column.

Show_index_column.jpg

Palette

Background color

Sets the background color of the component. The user can either manually type in the HEX color code or use the color picker tool.

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.

Background_color.jpg

Border color

Sets the color of the component border. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons background

Sets the background color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons foreground

Sets the foreground color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header background

Sets the background color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header foreground

Sets the foreground color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Typography

Header font family

Sets the font family of the textual information displayed by the component header, selecting from web-safe fonts available in the drop-down list.

Header_font_family.jpg

Header font size

Sets the font size of the textual information displayed by the component header, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Header_font_size.jpg

Header font weight

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

Header_font_weight.jpg

Style

Border width

Sets the width of the component's container. The value is specified in pixels.

Border_width.jpg

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

The Border width editor can be opened by clicking the Open button.

Border_width_editor.jpg

The components border width can be updated by setting the desired value and selecting the unit:

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

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

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

Transform

Angle

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

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

Angle.jpg

Height

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

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

Control_height.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg

Width

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

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

Control_width.jpg
Users
Abstract

Check out this article and learn more details about the i4SCADA Users component and what settings can be configured.

The Users component allows the possibility to view and manage i4SCADA users, define user default settings and password policies.

Users_comp.jpg

The Users component

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID_user_infor.jpg

Tooltip text

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

Tooltip_text_user_info.jpg

Security

Project authorization

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 (,).

Project_authorization.jpg

Security access behavior

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

Security_access_behavior.jpg

System authorization

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 (,).

System_authorization.jpg

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_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

Shadow_color.jpg

Shadow offset X

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

Shadow_offset_X.jpg

Shadow offset Y

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

Shadow_offset_Y.jpg

Shadow size

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

Shadow_size.jpg

Configuration

Title text

Sets the text displayed by the component's header. By default, the title text is "Users".

Title_text.jpg

Appearance

Page size

Sets the number of visible user actions on a single page. By default, the value of this field is set to 5, but the number can be increased or decreased, by manually typing in the new value or by using the up / down arrows.

Page_size.jpg

Show header

Allows the user to enable or disable the display of the User Actions List header.

Show_headers.jpg

Show index column

Allows the user to enable or disable the display of the index column.

Show_index_column.jpg

Palette

Background color

Sets the background color of the component. The user can either manually type in the HEX color code or use the color picker tool.

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.

Background_color.jpg

Border color

Sets the color of the component border. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons background

Sets the background color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons foreground

Sets the foreground color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header background

Sets the background color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header foreground

Sets the foreground color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Typography

Header font family

Sets the font family of the textual information displayed by the component header, selecting from web-safe fonts available in the drop-down list.

Header_font_family.jpg

Header font size

Sets the font size of the textual information displayed by the component header, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Header_font_size.jpg

Header font-weight

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

Header_font_weight.jpg

Style

Border width

Sets the width of the component's container. The value is specified in pixels.

Border_width.jpg

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

The Border width editor can be opened by clicking the Open button.

Border_width_editor.jpg

The components border width can be updated by setting the desired value and selecting the unit:

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

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

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

Transform

Angle

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

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

Angle.jpg

Height

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

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

Control_height.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg

Width

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

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

Control_width.jpg
User Manager
Abstract

Check out this article and learn more details about the i4SCADA User Manager component and what settings can be configured.

The User Manager component allows the possibility to view and manage i4SCADA users, define user default settings and password policies. Additionally, this component provides the possibility to switch between the User's management panels, using the drop-down list of the container header.

User_manager_comp.jpg

The User Manager component

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID_user_infor.jpg

Tooltip text

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

Tooltip_text_user_info.jpg

Security

Project authorization

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 (,).

Project_authorization.jpg

Security access behavior

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

Security_access_behavior.jpg

System authorization

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 (,).

System_authorization.jpg

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_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

Shadow_color.jpg

Shadow offset X

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

Shadow_offset_X.jpg

Shadow offset Y

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

Shadow_offset_Y.jpg

Shadow size

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

Shadow_size.jpg

Appearance

Page size

Sets the number of visible user actions on a single page. By default, the value of this field is set to 5, but the number can be increased or decreased, by manually typing in the new value or by using the up / down arrows.

Page_size.jpg

Show container header

Allows the user to enable or disable the display of the component container header. The component container header stores the list of User manager-specific panels, hence allowing the user to access other panels from this view.

Show_container_header.jpg

Show header

Allows the user to enable or disable the display of the User Actions List header.

Show_headers.jpg

Show index column

Allows the user to enable or disable the display of the index column.

Show_index_column.jpg

Configuration

Title text

Sets the text displayed by the component's header. By default, the title text is "Users".

Title_text.jpg

Palette

Background color

Sets the background color of the component. The user can either manually type in the HEX color code or use the color picker tool.

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.

Background_color.jpg

Border color

Sets the color of the component border. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons background

Sets the background color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons foreground

Sets the foreground color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header background

Sets the background color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header foreground

Sets the foreground color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Typography

Header font family

Sets the font family of the textual information displayed by the component header, selecting from web-safe fonts available in the drop-down list.

Header_font_family.jpg

Header font size

Sets the font size of the textual information displayed by the component header, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Header_font_size.jpg

Header font-weight

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

Header_font_weight.jpg

Style

Border width

Sets the width of the component's container. The value is specified in pixels.

Border_width.jpg

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

The Border width editor can be opened by clicking the Open button.

Border_width_editor.jpg

The components border width can be updated by setting the desired value and selecting the unit:

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

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

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

Transform

Angle

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

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

Angle.jpg

Height

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

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

Control_height.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg

Width

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

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

Control_width.jpg
Project authorization
Abstract

Check out this article and learn more details about the i4SCADA Project authorization component and what settings can be configured.

The Project authorization component allows the possibility to view and manage i4SCADA Project authorizations.

Project_authorization_comp.jpg

The Project authorization component

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID_user_infor.jpg

Tooltip text

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

Tooltip_text_user_info.jpg

Security

Project authorization

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 (,).

Project_authorization.jpg

Security access behavior

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

Security_access_behavior.jpg

System authorization

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 (,).

System_authorization.jpg

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_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

Shadow_color.jpg

Shadow offset X

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

Shadow_offset_X.jpg

Shadow offset Y

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

Shadow_offset_Y.jpg

Shadow size

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

Shadow_size.jpg

Configuration

Title text

Sets the text displayed by the component's header. By default, the title text is "Project Authorizations".

PrjAuth_Title_text.jpg

Appearance

Page size

Sets the number of visible user actions on a single page. By default, the value of this field is set to 5, but the number can be increased or decreased, by manually typing in the new value or by using the up / down arrows.

Page_size.jpg

Show header

Allows the user to enable or disable the display of the User Actions List header.

Show_headers.jpg

Show index column

Allows the user to enable or disable the display of the index column.

Show_index_column.jpg

Palette

Background color

Sets the background color of the component. The user can either manually type in the HEX color code or use the color picker tool.

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.

Background_color.jpg

Border color

Sets the color of the component border. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons background

Sets the background color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons foreground

Sets the foreground color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header background

Sets the background color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header foreground

Sets the foreground color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Typography

Header font family

Sets the font family of the textual information displayed by the component header, selecting from web-safe fonts available in the drop-down list.

Header_font_family.jpg

Header font size

Sets the font size of the textual information displayed by the component header, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Header_font_size.jpg

Header font-weight

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

Header_font_weight.jpg

Style

Border width

Sets the width of the component's container. The value is specified in pixels.

Border_width.jpg

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

The Border width editor can be opened by clicking the Open button.

Border_width_editor.jpg

The components border width can be updated by setting the desired value and selecting the unit:

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

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

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

Transform

Angle

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

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

Angle.jpg

Height

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

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

Control_height.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg

Width

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

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

Control_width.jpg
Authorization groups
Abstract

Check out this article and learn more details about the i4SCADA Authorization groups component and what settings can be configured.

The Authorization groups component allows the possibility to view and manage i4SCADA Authorization groups.

AuthGr_comp.jpg

The Authorization groups component

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID_user_infor.jpg

Tooltip text

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

Tooltip_text_user_info.jpg

Security

Project authorization

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 (,).

Project_authorization.jpg

Security access behavior

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

Security_access_behavior.jpg

System authorization

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 (,).

System_authorization.jpg

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_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

Shadow_color.jpg

Shadow offset X

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

Shadow_offset_X.jpg

Shadow offset Y

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

Shadow_offset_Y.jpg

Shadow size

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

Shadow_size.jpg

Configuration

Title text

Sets the text displayed by the component's header. By default, the title text is "Users".

AuthGr_Title_text.jpg

Appearance

Page size

Sets the number of visible user actions on a single page. By default, the value of this field is set to 5, but the number can be increased or decreased, by manually typing in the new value or by using the up / down arrows.

Page_size.jpg

Show header

Allows the user to enable or disable the display of the User Actions List header.

Show_headers.jpg

Show index column

Allows the user to enable or disable the display of the index column.

Show_index_column.jpg

Palette

Background color

Sets the background color of the component. The user can either manually type in the HEX color code or use the color picker tool.

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.

Background_color.jpg

Border color

Sets the color of the component border. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons background

Sets the background color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons foreground

Sets the foreground color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header background

Sets the background color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header foreground

Sets the foreground color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Typography

Header font family

Sets the font family of the textual information displayed by the component header, selecting from web-safe fonts available in the drop-down list.

Header_font_family.jpg

Header font size

Sets the font size of the textual information displayed by the component header, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Header_font_size.jpg

Header font-weight

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

Header_font_weight.jpg

Style

Border width

Sets the width of the component's container. The value is specified in pixels.

Border_width.jpg

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

The Border width editor can be opened by clicking the Open button.

Border_width_editor.jpg

The components border width can be updated by setting the desired value and selecting the unit:

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

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

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

Transform

Angle

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

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

Angle.jpg

Height

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

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

Control_height.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg

Width

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

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

Control_width.jpg
Access groups
Abstract

Check out this article and learn more details about the i4SCADA Access groups component and what settings can be configured.

The Access groups component allows the possibility to view and manage i4SCADA Access groups.

Access_groups.jpg

The Access groups component

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID_user_infor.jpg

Tooltip text

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

Tooltip_text_user_info.jpg

Security

Project authorization

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 (,).

Project_authorization.jpg

Security access behavior

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

Security_access_behavior.jpg

System authorization

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 (,).

System_authorization.jpg

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_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

Shadow_color.jpg

Shadow offset X

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

Shadow_offset_X.jpg

Shadow offset Y

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

Shadow_offset_Y.jpg

Shadow size

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

Shadow_size.jpg

Configuration

Title text

Sets the text displayed by the component's header. By default, the title text is "Project Authorizations".

AccessGr_title_text.jpg

Appearance

Page size

Sets the number of visible user actions on a single page. By default, the value of this field is set to 5, but the number can be increased or decreased, by manually typing in the new value or by using the up / down arrows.

Page_size.jpg

Show header

Allows the user to enable or disable the display of the User Actions List header.

Show_headers.jpg

Show index column

Allows the user to enable or disable the display of the index column.

Show_index_column.jpg

Palette

Background color

Sets the background color of the component. The user can either manually type in the HEX color code or use the color picker tool.

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.

Background_color.jpg

Border color

Sets the color of the component border. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons background

Sets the background color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons foreground

Sets the foreground color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header background

Sets the background color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header foreground

Sets the foreground color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Typography

Header font family

Sets the font family of the textual information displayed by the component header, selecting from web-safe fonts available in the drop-down list.

Header_font_family.jpg

Header font size

Sets the font size of the textual information displayed by the component header, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Header_font_size.jpg

Header font-weight

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

Header_font_weight.jpg

Style

Border width

Sets the width of the component's container. The value is specified in pixels.

Border_width.jpg

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

The Border width editor can be opened by clicking the Open button.

Border_width_editor.jpg

The components border width can be updated by setting the desired value and selecting the unit:

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

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

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

Transform

Angle

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

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

Angle.jpg

Height

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

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

Control_height.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg

Width

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

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

Control_width.jpg
Access authorizations
Abstract

Check out this article and learn more details about the i4SCADA Access authorizations component and what settings can be configured.

The Access authorization component allows the possibility to view and manage i4SCADA Access authorizations.

Access_authorizations.jpg

The Access authorizations component

Category

Property

Description

Common

Name

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

Name.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID_user_infor.jpg

Tooltip text

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

Tooltip_text_user_info.jpg

Security

Project authorization

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 (,).

Project_authorization.jpg

Security access behavior

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

Security_access_behavior.jpg

System authorization

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 (,).

System_authorization.jpg

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_mode.jpg

Margin

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

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

Margin_small.jpg

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

Margin_large.jpg

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

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

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

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

Effects

Opacity

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

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

Opacity.jpg

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

Opacity_slider.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

Shadow_color.jpg

Shadow offset X

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

Shadow_offset_X.jpg

Shadow offset Y

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

Shadow_offset_Y.jpg

Shadow size

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

Shadow_size.jpg

Configuration

Title text

Sets the text displayed by the component's header. By default, the title text is "Project Authorizations".

Access_Auth_title_text.jpg

Appearance

Page size

Sets the number of visible user actions on a single page. By default, the value of this field is set to 5, but the number can be increased or decreased, by manually typing in the new value or by using the up / down arrows.

Page_size.jpg

Show header

Allows the user to enable or disable the display of the User Actions List header.

Show_headers.jpg

Show index column

Allows the user to enable or disable the display of the index column.

Show_index_column.jpg

Palette

Background color

Sets the background color of the component. The user can either manually type in the HEX color code or use the color picker tool.

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.

Background_color.jpg

Border color

Sets the color of the component border. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons background

Sets the background color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Buttons foreground

Sets the foreground color of the component buttons. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header background

Sets the background color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Header foreground

Sets the foreground color of the component header. The user can either manually type in the HEX color code or use the color picker tool.

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.jpg

Typography

Header font family

Sets the font family of the textual information displayed by the component header, selecting from web-safe fonts available in the drop-down list.

Header_font_family.jpg

Header font size

Sets the font size of the textual information displayed by the component header, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Header_font_size.jpg

Header font-weight

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

Header_font_weight.jpg

Style

Border width

Sets the width of the component's container. The value is specified in pixels.

Border_width.jpg

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

The Border width editor can be opened by clicking the Open button.

Border_width_editor.jpg

The components border width can be updated by setting the desired value and selecting the unit:

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

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

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

Transform

Angle

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

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

Angle.jpg

Height

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

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

Control_height.jpg

Left

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

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

Left.jpg

Top

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

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

Top.jpg

Width

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

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

Control_width.jpg