i4designer Knowledgebase

Panel

Abstract

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

The i4designer Panel component is a simple configurable content container, providing the user with possibility to insert a header and a footer area.

Panel.jpg

The Panel component

Category

Property

Description

Configuration

Name

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

Name.jpg

Layout mode

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

Layout_mode.jpg

Header title

Sets the text of the header title.

Header_title.jpg

Image

Allows selection of the file / image source. By clicking the Upload image button, the user can either drop files in the designated area or click to upload the image from the local machine.

Upload_image.jpg

After selecting the desired image, the user can either click the Apply button to preserve the changes or the close window button to discard it.

Keep_ofr_discard_image.jpg

Object ID

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

Example: Setpoint [OID]

Object_ID.jpg

Tooltip text

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

Tooltip_text.jpg

Security

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.

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. If the property is left empty, the component will be visible to all users.

Project_authorization.jpg

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.

Security_access_behavior.jpg

Navigation

Is external

Allows possibility to set the link target to external if property is set to True.

Is_external.jpg

Navigation parameters

Allows possibility to add additional items for writing multiple signals, by clicking the Add new item button.

Add_item.jpg

In order to see the list of items the user can click on the Expand array list button.

Signal_write_items.jpg

Further more, the following actions are available for each item:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Remove item remove_state.jpg

Write item# Parameter name

Sets the name of the signal that will be represented or manipulated by the component.

Signa_write_item_name.jpg

Write item# Value

Sets the signal value that will be considered, at run-time, by the component.

Value.jpg

Page link

The Url to an internal or external page or file, opened when clicking the Link button.

Page_link.jpg

Palette

Footer background

Sets the color of the panel footer. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the deafult css class.

Footer_background.jpg

Footer border color

Sets the color of the footer top border. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the deafult css class.

Footer_border_color.jpg

Header border color

Sets the color of the panel header bottom border. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the deafult css class.

Header_border_color.jpg

Header foreground

Sets the color of the panel header text. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the deafult css class.

Header_foreground.jpg

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. Applying this property will overwrite the deafult css class.

Background_color.jpg

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 deafult css class.

Icon_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. Applying this property will overwrite the deafult css class.

Border_color.jpg

Header background

Sets the background color of the panel header. The user can either manually type in the HEX color code or use the color picker tool. Applying this property will overwrite the deafult css class.

Header_background.jpg

Appearance

Display shadow

Enables possibility to add a panel shadow by setting property to True.

Display_shadow.jpg

Header style

Sets the style of the header, providing the user with a set of predefined options: Flat or Glossy.

Header_style.jpg

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.

Border_width.jpg

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

Typography

Header font size

Sets the header font size, 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 header font weight, 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

Header text align

Sets the panel header text alignment selecting from the drop-down list options: left, right or center.

Header_text_align.jpg

Font family

Sets the font family of the component, by selecting from the drop-down list options:

Font_family.jpg

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.

Icon_class.jpg

Layout

Footer height

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

Footer_height.jpg

Header height

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

Header_height.jpg

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.

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

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

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