Navigation
Here are the i4designer Navigation components for your new project created on the i4SCADA platform.
The components under this category ensure further navigation options allowing the user to navigate to other locations in and outside the i4designer project.
Link button
Check out this article in order to learn more details about the i4designer Link button component and the properties provided by it.
The Link button component offers the basic functionality of a hyperlink button.
The Link button 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 | 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. If the property is left empty, the component will be visible to all users.  |
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. If the property is left empty, the component will be visible to all users.  | |
Security access behavior | Sets the behavior of the element when the logged in user doesn't belong to the project authorization indicated by the projectAuthorization property. In this case, the element can be either disabled or hidden.  | |
Layout | Column end | Sets the number of the column where the component ends, measured 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.  |
Column start | Sets the number of the column where the component starts, measured 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. | |
Layout mode | Sets the behaviour of the component related to the page placement. The user can select the component layout from the options available in the drop-down list: Default, Dock top, Dock bottom, Dock left, Dock right, Stretched, Pin top left, Pin top center, Pin top right, Pin right middle, Pin bottom right, Pin bottom center, Pin bottom left, Pin left middle and Pin center.  | |
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:
| |
Row end | Sets the number of the row where the component ends. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.  | |
Row start | Sets the number of the row where the components starts to stretch. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.  | |
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.  | |
Navigation | Is internal link | Allows possibility to set the link target to internal if property is set to True.  |
Navigation parameters | Allows possibility to add additional items for writing multiple signals, by clicking the Add new item button.  In order to see the list of items the user can click on the Expand array list button.  Further more, the following actions are available for each item:
| |
Write item# Parameter name | Sets the name of the signal that will be represented or manipulated by the component.  | |
Write item# Value | Sets the signal value that will be considered, at run-time, by the component.  | |
Link | The Url to an internal or external page or file, opened when clicking the Link button.  | |
Palette | Background color | Sets the background color of the button. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.  |
Foreground | Sets the foreground color of the button. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.  | |
Hover background | Sets the background color when hovering 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 to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.  | |
Hover border color | Sets the border color when hovering 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 to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.  | |
Hover foreground | Sets the foreground color when hovering 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 to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.  | |
Icon color | Sets the color of the icon. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class.  | |
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 to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.  | |
Focus background | Sets the background color of the component focus. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class.  | |
Focus border color | Sets the border color of the component focus. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class.  | |
Focus foreground | Sets the foreground color of the component focus. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class.  | |
Active background | Sets the background color of the component when in active mode. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class.  | |
Active border color | Sets the border color of the component when in active mode. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class.  | |
Active foreground | Sets the foreground color of the component when in active mode. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class.  | |
Appearance | Class name | Sets the CSS class of the button, selecting from the drop-down list items: btn-primary, btn-warning, btn-success and btn-danger.  |
Padding | Sets the pixels for the component padding, hence defining the space between the components contents and its border. The padding value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.  | |
Configuration | Current page button style | Sets the style of the current link button, selecting from the drop-down list options: primary, warning, success and danger.  |
Button text | Sets the text displayed by the button.  | |
Typography | Font size | Sets the size of the component font, using the up and down arrows to increase and decrease, or by manually typing the desired value.  |
Font weight | Sets the weight of the component font, 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).  | |
Font family | Sets the font family of the component font, selecting from web-safe fonts available in the drop-down list.  | |
Style | Border radius | Sets the curvature of the border corners expressed in pixels or percentage. The border radius value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows. This field supports the standard CSS notation.  |
Border width | 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.  | |
Text alignment | Sets the alignment of the text of the component surface, selecting from the drop-down list options: left, right and center (default).  | |
Icon | Icon class | Sets the CSS class for the icon of the component. The icon can be selected from a large amount of icons accessible by clicking the Open panel to see the icon list button. The list of icons allows the user to toggle between actual icons and icon names. A simple filtering mechanism is also provided to support the user to easily pin-point the desired icon.  |
Transform | 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.  |
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.  | |
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.  | |
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.  |
Open dialog button
Check out this article in order to learn more details about the i4designer Open dialog button component and the properties provided by it.
The Open dialog button component offers the basic functionality of a hyperlink button.
The Open dialog button 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 | 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. If the property is left empty, the component will be visible to all users. |
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. If the property is left empty, the component will be visible to all users. | |
Security access behavior | Sets the behavior of the element when the logged in user doesn't belong to the project authorization indicated by the projectAuthorization property. In this case, the element can be either disabled or hidden. | |
Layout | Column end | Sets the number of the column where the component ends, measured 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. |
Column start | Sets the number of the column where the component starts, measured 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. | |
Layout mode | Sets the behaviour of the component related to the page placement. The user can select the component layout from the options available in the drop-down list: Default, Dock top, Dock bottom, Dock left, Dock right, Stretched, Pin top left, Pin top center, Pin top right, Pin right middle, Pin bottom right, Pin bottom center, Pin bottom left, Pin left middle and Pin center. | |
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:
| |
Row end | Sets the number of the row where the component ends. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows. | |
Row start | Sets the number of the row where the components starts to stretch. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows. | |
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. | |
Navigation | Is external | Allows possibility to set the link target to external if property is set to True.  |
Page parameters | Allows possibility to add additional items for writing multiple signals, by clicking the Add new item button.  In order to see the list of items the user can click on the Expand array list button. Further more, the following actions are available for each item:
| |
Write item# Parameter name | Sets the name of the signal that will be represented or manipulated by the component.  | |
Write item# Value | Sets the signal value that will be considered, at run-time, by the component.  | |
Page url | The Url to an internal or external page or file, opened when clicking the Link button.  | |
Configuration | Dialog title | Sets the text displayed on the dialog header.  |
Button text | Sets the text displayed by the button.  | |
Appearance | CSS Class | Sets the CSS class of the button component, selecting from the drop-down list items.  |
Dialog height | Sets the height of the dialog measured in pixels.  | |
Dialog width | Sets the width of the dialog measured in pixels.  | |
Flat | Removes additional visual elements or flattens from the component.  | |
Padding | Sets the pixels for the component padding, hence defining the space between the components contents and its border. The padding value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows.  | |
Icon | Icon class | Sets the CSS class for the icon of the component. The icon can be selected from a large amount of icons accessible by clicking the Open panel to see the icon list button. The list of icons allows the user to toggle between actual icons and icon names. A simple filtering mechanism is also provided to support the user to easily pin-point the desired icon. |
Palette | Header background | Sets the header background color of the button. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.  |
Header foreground | Sets the header foreground color of the button. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.  | |
Background color | Sets the background color of the button. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten. | |
Foreground | Sets the foreground color of the button. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten. | |
Icon color | Sets the color of the icon. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the default css class. | |
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 to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten. | |
Style | Border radius | Sets the curvature of the border corners expressed in pixels or percentage. The border radius value can be either manually typed in the designated field or increased / decreased by clicking the up and down arrows. This field supports the standard CSS notation. |
Border width | 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. | |
Typography | Font size | Sets the size of the component font, using the up and down arrows to increase and decrease, or by manually typing the desired value. |
Text alignment | Sets the alignment of the text of the component surface, selecting from the drop-down list options: left, right and center (default).  | |
Font weight | Sets the weight of the component font, 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). | |
Font family | Sets the font family of the component font, selecting from web-safe fonts available in the drop-down list. | |
Transform | 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. |
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. | |
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. | |
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. |