Controls in the BPM UI toolkit

The BPM UI toolkit contains a set of controls for designing applications that can run on multiple device types, such as mobile and desktop devices. All the coach views in the BPM UI toolkit are suitable for use on both desktop and mobile devices.

Each control consists of a coach view that points to a specific set of files:

A JavaScript file that provides the behavior of the control
Image files to represent the control on the palette and on the canvas
A preview JavaScript file that shows a preliminary view of the coach view when it is dropped on the coach editor palette

The control can also have other files such as CSS and LESS files for styling, localization files and other control specific resource files, but these additional files are optional.

Alerts control
This control creates non-intrusive alerts that do not interrupt the user.
Area Chart SDS control
The Area Chart SDS control displays data in a coach chart with the option to add drill-down trees for presenting additional data sets.
Badge control
This control displays textual or numerical content. You can programmatically set the Badge control to be clickable using the On click event.
Bar Chart SDS control
The Bar Chart SDS control displays data in a chart with the option to add drill-down trees for presenting additional data sets.
Breadcrumbs control
This control adds a breadcrumb trail to a coach, which shows the navigation path that you took to get to the current view. You can click the entries in the breadcrumb trail to access the specified views.
Button control
This control creates a button that you use to advance from one coach to another or to exit a coach in a flow such as a human service.
Caption Box control
This control is a container control that is meant to enclose one single other control.
Check Box control
This control creates a check box that enables you to choose between two mutually exclusive options. You can select the Check Box control to answer yes or clear it to answer no to a simple yes or no question.
Check Box Group control
Check Box Group is a multiple-selection control that creates a group of check boxes that enable you to select multiple items in a list of available options.
Collapsible Panel control
This control creates a section area that can contain other controls and can be expanded or collapsed to show or hide information.
Configuration control
The Configuration control is a debugging and configuration aid. It also specifies the internationalization (I18N) service that is used to internationalize controls.
Data control
This control acts as a hidden input field, for example, when you need a temporary variable for client-side logic, such as storing a previous value from a field.
Data Export control
With this control, you can export data from a table, a repeating layout, or a list of complex objects that contain properties of simple types to a spreadsheet file. The following file extensions are supported: .xlsx and .csv.
Date Time Picker control
This control is a user interface in which a user can view and specify a date and time through an entry field or a calendar widget. The control is typically used when a date is needed on a Coach.
Decimal control
This control creates a field in which a user can view or enter a number value that contains decimals. Use the configuration settings for this control to specify the format for the displayed decimal number.
Deferred Section control
The Deferred Section control can be used to improve the efficiency of a coach by enabling the lazy loading of its controls. In lazy loading, images that are outside of the viewport are not loaded until the user scrolls the page to reach them.
Device Sensor control
This control detects information about the current display, including browser, browser version, operating system, language, client (window) width, and total screen width. Use the Device Sensor control with other BPM UI toolkit controls to provide a coach that is optimized for the platform the coach is running on, such as displaying a mobile version on phones.
Donut Chart control
The Donut Chart displays data in a chart on a coach with the option to add drill down trees for presenting additional data sets.
Event Subscription control
This control listens for a call by a control event or a function and then obtains the event data that was published and performs the logic specified in the On published event event. The event is published using the bpmext.ui.publishEvent() method.
Exit Safeguard control
This control creates a confirmation message that is activated when the user closes a browser window or tab.
Geo Coder control
By using this control, you can display a user's address, based on the physical location of that user.
Geo Location control
Use the Geo Location control to display the user's location on a map instead of a static location.
Horizontal Layout control
Use this control to create a section in which layout elements are arranged side by side horizontally. When the control is bound to a list, the horizontal section repeats for each item in the list, which results in a format that is similar to a table.
Horizontal Split control
You use the Horizontal Split control to hold content inside the control horizontally (stacked next to each another). By using this control, you can split content into two or more sections.
Icon control
Using this control, you can add an icon in a coach and you can programmatically set the icon to be clickable using the On click event.
Image control
Using this control, you can add an image in a coach and you can program the image to be clickable using the On click event.
Input Group control
By using the Input Group control, you can add an icon, text, or menu to the controls that users use to provide input such as date, time, text, and so on.
Integer control
This control creates a field in which a user can view or enter a number value.
Line control
This control creates a horizontal line that you can use to separate controls or sections in a coach. The Line control is most commonly used to adjust the appearance and flow of a coach layout.
Line Chart control
The Line Chart displays data in a chart on a coach with the option to add drill down trees for presenting additional data sets.
Link control
This control creates a link to an outside web page or a link that emits a boundary event within a service when it is clicked.
Map control
Use the Map control to place a map on a coach, set a static location, or use the user's location.
Masked Text control
Use the Masked Text control to enable users to enter text within a mask when that text must comply with a mandatory format.
Modal Alert control
By using the Modal Alert control, you can create warnings, which are triggered when a specific event occurs and prompt the user to take an action.
Modal Section control
By using the Modal Section control, you can enable users to create a container that displays modally. That is, users cannot continue to work on the main window before this container is dismissed.
Multi Select control
This control allows users to select multiple items at a time from a list of items.
Multi Purpose Chart control
The Multi Purpose Chart displays data in a chart on a coach with the option to add drill down trees for presenting additional data sets. You can display either a single data series, or overlay the chart with multiple data series.
Navigation Event control
With this control, you can handle page navigation with commands instead of buttons.
Note control
This control displays read-only text, with various Header options for the label.
Notification control
This control displays textual or numerical content and includes formula and appearance options.
OpenLayers API control
The OpenLayers API control is meant as a layer between a mapping API, such as Open Source Maps, and IBM® BPM. To use the Map control with another mapping API like OSM maps, you must also drop the OpenLayersAPI control onto the coach.
Output Text control
The Output Text control displays read-only text. The Output Text control is most commonly used to display static text, such as instructions or messages to the end user.
Panel control
This control is a container that can hold any other controls, and provides a common style for the group of controls.
Panel Footer control
This control is used to add footer details to a Panel section.
Panel Header control
This control is used to add header details to a Panel section.
Password control
This control provides an input text field for users to enter a password when authentication is required. As the password is entered, placeholder characters are used to conceal the characters that are typed in by the user.
Pie Chart control
The Pie Chart displays data in a chart on a coach with the option to add drill down trees for presenting additional data sets.
Places control
Use the Places control to display locations that are defined by their coordinates, location type, and radius.
Pop-up Menu control
This control allows you to add a pop-up menu to other controls.
Progress Bar control
This control provides a visual representation of how far a user is into completing a particular operation.
QR Code control
The QR Code (abbreviated from Quick Response Code) control creates a graphical image in the form of a two-dimensional bar code which, when read by a QR scanner, directs you to a particular web site.
Radio Button control
This control creates one radio button, which you can use individually or in a group to select a single item from a set of items that are specified by a selection list.
Radio Button Group control
This control creates a set of radio buttons that can be derived from a specified selection list or provided by a selection service. From the specified selection list, only one item can be selected at a time.
Responsive Sensor control
You use the Responsive Sensor control with horizontal and vertical layouts to change the way the page displays based on the screen or window size.
Service Call control
This control invokes a service flow with Ajax access that can be triggered by an On load event handler or programmatically.
Service Data Table control
By using the Service Data Table control, similar to the Table control, you can create a repeating table. The Service Data Table control must specify a service flow with Ajax access that returns the data that will be displayed in the table. For this reason, do not bind the Service Data Table to a variable.
Signature control
This control allows users to put their signature on the screen using a touchscreen or a mouse.
Single Select control
This control allows users to select an item from a drop-down list. You can populate the list of items statically, use a business object, or use a service to retrieve the list.
Slider control
This control creates a slider with a handle that you can drag to increase or decrease a number. You can choose the number from a range of numbers, and specify the step value by which the slider increases or decreases the number when you slide the handle.
Spacer control
This control enables you to put distance between controls or sections in a coach. You can use the Spacer control to improve the appearance and page layout of a coach by modifying the default positioning of its controls.
Stack control
Similar to the Tab control, the Stack control enables you to organize other controls in tabs, except that it displays only one pane at a time.
Status Box control
This control displays a message about the status of other controls in the coach, and is commonly used in conjunction with input controls. Typically, the status box is attached to a form or input control.
Step Chart control
The Step Chart displays data in a chart on a coach with the option to add drill down trees for presenting additional data sets. The Step Chart must be populated by using a service flow with Ajax access.
Style control
By using the Style control, you can enable the use of an external CSS file to change the appearance of Coaches. The Style control is convenient to apply the same styling to multiple Coaches.
Switch control
This control allows the display of a binary value (similar to a check box) using an On or Off visual switch widget.
Tab Section control
This control enables you to organize other controls in tabs. At run time, users can switch between tabs to access the available controls.
Table control
The Table control allows you to create a table using other controls such as Text, Decimal, Output Text.
Table Layout, Table Layout Row, and Table Layout Cell controls
These controls are sections that are meant to include other controls within them so that those controls are displayed in a table-like structure.
Table Layout, Table Layout Row, and Table Layout Cell controls
These controls are sections that are meant to include other controls within them so that those controls are displayed in a table-like structure.
Table Layout, Table Layout Row, and Table Layout Cell controls
These controls are sections that are meant to include other controls within them so that those controls are displayed in a table-like structure.
Text control
This control creates a text input field that has an optional label and placeholder text.
Text Area control
This control creates a text area field that can have multiple lines of text. It can be configured to display plain text or rich text.
Text Editor control
This control creates a text editor area that provides font and paragraph formatting settings for the input text.
Text Reader control
This control creates a text box that you can expand or collapse to show or hide sections of text that are larger than a specified number of characters. The extra text is hidden until the user clicks Show More or a similar link that you can specify.
Timer control
This control creates an alert that can close a coach page automatically when an interaction, such as an Ajax interaction, times out during the execution of a coach.
Tooltip control
This control displays an information message on other controls.
Type Ahead Text control
The Type Ahead Text control auto fills text based on the selection service attached to it. This control is most commonly used to auto fill selections and allows for faster input as well as error prevention.
Variant control
The Variant control can be used to represent the following controls: Text, Masked Text, Single Select, Date, Decimal, Integer. Because the Variant control can represent multiple controls, there is no need to bind each control to their own variable.
Vertical Layout control
Use this control to create a section in which layout elements are stacked vertically, one on top of the other. When the control is bound to a list, the vertical section repeats for each item in the list, which results in a format that is similar to a table.
Video control
This control adds a video to a coach. You can use this control to improve the visual aspect of a coach by adding a relevant video.
Well control
This control is a section that allows you to place multiple controls inside a customized background.

Parent topic: Coach and Coach View reference information