IBM BPM version 8570 cumulative fix 2017.06Panel control

This control is a container that can hold any other controls, and provides a common style for the group of controls.

The Panel control is most commonly used to organize other controls that are inside it.

Tip: Typically, the Panel control is used in conjunction with the Horizontal Layout control and Vertical Layout control in the BPM UI toolkit. Their equivalent control in the deprecated Responsive Coaches toolkit is the Section control.

Configuration properties

Set or modify configuration properties for the control, such as appearance and footer properties, in the Configuration properties tab.
Screen size
A configuration property that has the Screen Sizes icon The Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor, you are setting the value for the large screen size. The other screen sizes inherit this value.
Theme definitions
Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for the Panel control are shown in the following table:

Table 1. Appearance configuration properties for the Panel control
Appearance configuration property Description Data type
Icon Specifies the notification icon name. For example: calendar, clock-o, camera, cloud-upload, bell, info, file-text.

See Font Awesome for a complete list of icons.

By default, no icon is specified.

 String
Color style Specifies the color style for the control. The colors correspond to variables in the specified theme. ColorStyle
Light color Sets the fill color to a lighter shade, and changes the text title to the color selected in Color style. Boolean
Full body color When selected, fills the body with color, instead of only the header. Boolean
Width The Screen Sizes icon Specifies the width in pixels, percent, or em units. For example: 50px or 0.4em. If only a number is specified without any unit, the number is interpreted as the number of pixels. By default, no width is specified. Integer
Body height The Screen Sizes icon Specifies the body height in pixels or em units. If only a number is specified without any unit, the number is interpreted as the number of pixels. By default, no height is specified. Integer

The footer configuration properties for the Panel control are shown in the following table:

Table 2. Footer configuration properties for the Panel control
Footer configuration property Description Data type
Footer text Allows you to add a footer to the panel and specifies the text for the footer. String

Example

In this example, the following configuration properties are set for the Panel control:

  • The appearance configuration is as follows:
    • Icon is set to rocket.
    • Color style is set to Warning.
    • Light color and Full body color are left unchecked.
    • Width is set to 50%.
    • Body height is set to 350px.
  • The footer configuration is as follows:
    • Footer is set to "The text will be in the Panel footer".

These properties and their values result in 350-pixel high and 50-percent wide yellow bordered panel containing various other controls, with a rocket icon inside a header on a yellow background, and a footer at the bottom of the panel that says The text will be in the Panel footer

Events

Set or modify the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information about how to define and code events, see User-defined events. The Panel control has the following types of event handlers:
  • On load: Activated when the page loads.
  • On icon click: Activated when the Panel Icon is clicked.

Depending on the specific event, you can use JavaScript logic to modify the effects of the control. More information on using events with controls is found in the topic Event Handling.

Methods

For detailed information on the available methods for the Panel control, see the JavaScript documentation.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.

Parent topic: IBM BPM version 8570 cumulative fix 2017.06Controls in the BPM UI toolkit