IBM BPM, V8.0.1, All platforms > Create processes in IBM Process Designer > Create user interfaces for business processes

Stock controls

Stock controls are Coach Views that are included with IBM BPM . They are in the Coaches (SYSC) toolkit.

For each stock control, the business object binding table lists the business object that the stock control uses for its data. The configuration options table lists the configuration properties that are available on the Configuration page when you drop an instance of the stock control onto a Coach View layout. The definition configuration column contains the corresponding configuration options as they are defined in the Variables page of the stock control. You cannot edit the definition of a stock control, but you can edit instances of a stock control by setting their configuration properties.

For each stock control instance, the configuration properties are optional. If you want to override the default value, you can provide a specific value or you assign a variable. As a convenience, you can also choose to expose the configuration property to any Coach View or Coach in a human service that contains your Coach View. Exposing the configuration property creates a configuration option in the current Coach View with matching binding, saving you from having to create the configuration option and bind it.

The data binding is also optional. However, if you define a binding for an instance, it must match the type in the stock control definition. If the type of the business object does not match the type of the data binding defined for the Coach View, you receive a warning.

Stock controls have the mobile ready tag. This tag indicates that they will work when viewed in the Safari browser on the Apple iPad (iOS V5 or higher).


Button

This stock control creates a button instance that can broadcast a boundary event when a user clicks it.

Button business object binding
Binding Description
Boolean Records whether the user clicks the button instance.

Button configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
Allow Multiple Clicks Select this option if the user can repeat the button action, such as adding something for each click. Do not select this option if the event is to occur only once, such as a bill payment confirmation. allowMultipleClicks(Boolean) False (not selected)


Checkbox

This stock control creates a selection instance that a user can set to true or false. The selection can be a check box, a set of two radio buttons, or slider.

Checkbox business object binding
Binding Description
Boolean Records the state of the instance, such as selected or not selected if the selection instance is a check box

Checkbox configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
Show As Select whether the selection instance is a check box, a set of two radio buttons, or a slider. showAs(ShowAsSelection) Checkbox
True Label Set the text for the “true” choice. The default text is “Yes”. trueLabel(String) Yes
False Label Set the text for the “false” choice. The default text is “No”. falseLabel(String) No


Date Time Picker

This stock control creates an input text field and a calendar to select dates and times for a web form. The picker supports localized calendars, blackout dates, and different presentation options.

Date Time Picker business object binding
Binding Description
Date Contains the initial date and time to display and where this date and time are stored

Date Time Picker configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
Show Calendar Select how to display the calendar for the picker:

  • On Click shows the calendar only when the user clicks the text field or clicks the icon next to the text field.

  • Inline shows the calendar inline and hides the input text field.
  • Never shows the input text field and hides the calendar

showCalendar(ShowClalendarSelection) On Click
Calendar Type Select the type of calendar:

  • Gregorian
  • Hebrew
  • Islamic

calendarType(CalendarType) Gregorian
Include Time Picker Select whether to add a time picker to the date time picker. includeTimePicker(Boolean) False (not selected)
Date Format Set the format used to display and parse text that is entered into the text field, such as MM/DD/YYYY or DD/MM/YYYY. This configuration option supports the same formats as the Java SimpleDateFormat. dateFormat(String) YYYY-MM-DD HH:MM:SS
Blackout Dates Set one or more dates that the user cannot select. blackoutDates(Date) (List) (empty list)


Decimal

This stock control creates a field in which a user can view or enter a number. The number can contain decimals.

Decimal business object binding
Binding Description
Decimal Contains the number that this stock control displays. The Decimal can be empty and the Decimal control saves the number that the user enters into it.

Decimal configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
Currency If the field is being used for a monetary value, select the ISO 4217 currency. By setting the currency, the Decimal control uses the appropriate symbol and formatting for that currency. The default is Other. currencyCode(String) Other
Other Currency If you set Currency to Other, leave this field empty for non-monetary value or specify the ISO 4217 three letter currency code to set formatting and symbol.    
Currency Symbol Override the currency symbol set by the Currency or Other Currency properties with the specified symbol. The default is to not override the symbol.   (empty)
Hide Thousands Separators Select this option to hide the delimiter characters used to separate thousands.

For example, select this option to display ten thousand as 10000 instead of 10 000 or 10,000.

hideThousandSeparators(Boolean) False (not selected)
Decimal Places Set the maximum number of places beyond the decimal character. The default is 2 places (0.00). A 0 value means no places (0). A negative value means that there is no restriction set on the number of places.

Restriction: See IEEE 754 for information about the maximum number of decimal places.

decimalPlaces(Integer) 2
Minimum Value Set minimum value that the Decimal control can contain. By default, there is no restriction set on the minimum value. minimumValue(Decimal) (empty)
Maximum Value Set the maximum value that the Decimal control can contain. By default, there is no restriction set on the maximum value. maximumValue(Decimal) (empty)
Step Size Set the number the value increases or decreases when the user presses the up or down arrow keys or uses the spin control.

If you set a value, the field contains the spin control.

stepSize(Decimal) (empty)


Horizontal Section

This stock control creates an area in which layout elements are arranged side by side horizontally. If the layout element is a Coach View that is bound to a list, the section repeats for each item in the list.

If you add too many elements into a horizontal section, the excess elements overrun the border of the section or the section header does not expand to be as wide as the section contents. The excess elements do not wrap.

You can avoid the overrun by doing one or more of the following actions:

You can make the section header expand properly by setting a specific width to the horizontal section using HTML Attributes.

Tip: Ensure that somewhere in the DOM parent hierarchy of the horizontal section that there is an explicit value for the width.

Horizontal Section business object binding
Binding Description
ANY (List) Contains a list of items

Horizontal Section configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
Show Border Select this option to add a visible border to the section at run time. border(Boolean) False (not selected)
Square Border Corners Select this option to make the corners of the visible border square. By default, the corners are rounded. borderRadius(Boolean) False (not selected)
Align Right Select this option to align the content of the section to the right. By default, the content is aligned to the left. alignRight(Boolean) False (not selected)


Image

This stock control creates an area that contains an image. The source of the image is a web file or a URL.

Image business object binding
Binding Description
URL Contains the URL of the image displayed by the control. When the image is a web file, the URL binding is the relative path to retrieve the file from the server. If you bind to a variable, the variable must contain a URL that is resolvable on the server.

Tip: While you can use absolute URLs, relative URLs are better because they can avoid triggering security warnings.

Image configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
Alternate Text Enter a description of the image to make it accessible for users and technologies that cannot see the image. alternateText(String) (empty)
Height Set the number of pixels to reserve for the height of the image. The image scales to fit this size if necessary. height(Integer) (empty)
Width Set the number of pixels to reserve for the width of the image. The image scales to fit this size if necessary. width(Integer) (empty)
Caption Enter text to display with the image. caption(String) (empty)
Caption Vertical Position Set whether the caption is above or below the image. captionVerticalPosition(String) Above
Caption Horizontal Position Set whether the caption aligns to the left side of the image, to the right side of the image, or is centered. captionHorizontalPosition(String) Left


Integer

This stock control creates a field in which a user can view or enter a number. The number cannot contain decimals.

Integer business object binding
Binding Description
Integer Contains the number that this stock control displays. The Integer can be empty and the Integer control saves the number that the user enters into it.

Integer configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
Hide Thousands Separators Select this option to hide the delimiter characters used to separate thousands.

For example, select this option to display ten thousand as 10000 instead of 10 000 or 10,000.

hideThousandSeparators(Boolean) False (not selected)
Minimum Value Set minimum value that the Integer control can contain. By default, there is no minimum value. minimumValue(Integer) (empty)
Maximum Value Set the maximum value that the Integer control can contain. By default, there is no maximum value. maximumValue(Integer) (empty)
Step Size Set the number the value increases or decreases when the user presses the up or down arrow keys or uses the spin control.

If you set a value, the field contains the spin control.

stepSize(Integer) (empty)


Output Text

This stock control displays read-only text in a field. You can use this control for labels or other on-screen text.

Output Text business object binding
Binding Description
String Contains the text that users can see in this stock control


Radio Buttons

This stock control creates a group of radio buttons from which the user can select one. The radio buttons in the group derive from the list provided by the selection service or the specified selection list or a union of both lists.

Radio Buttons business object binding
Binding Description
ANY Sets the initial selection and then contains subsequent selections

Radio Buttons configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
Selection Service Identifies the service that is called using Ajax to dynamically return a list of options to display as radio buttons. You can use the selection service input text option to identify the specific list that the service returns. selectionService(Service)

  • Input: text(String)
  • Output: results( ANY)(List)

Default Selection Service
Selection List Identifies the list that contains options to show as radio buttons. listType(SelectionType) (empty)
Selection Service Input Text Provides the text to send to the selection service as input.

For example, if the selection service contains named lists, enter the name of the list that you want.

selectionServiceInputText(String) (empty)
Display Name Property For data objects in selection lists that are not String or NameValuePair types, specify which property to use as their display names. The default value is name.

For example, if you have a business object with parameters called field1 and field2, and you want to use field2 as the display name, enter field2 or set this property to a variable that contains "field2" as a string.

displayNameProperty(String) name
Disable Sorting Specifies whether to display the radio buttons sorted alphabetically by label or by the order in which they appear in the list. disableSort(Boolean) False (not selected)
Layout Specifies whether the radio buttons stack vertically or align horizontally orientation(RadioButtonsOrientation) Vertical


Select

This stock control creates a selection user interface from which a user can select one or many items.

Select business object binding
Binding Description
ANY (List) Contains the list of selection options (and currently selected values) if a data binding is specified. The data binding also overrides the list that the selection service configuration option provides. If a data binding is not specified, the selection service configuration option must be identified to provide the list.

Select configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
List Type Sets whether a user can select a single item or multiple items listType(SelectionType) Single Selection
Selected Item When the list type is single selection, this configuration option can be set to a default value. The Select control displays the corresponding value by default. selectedItem( ANY) (empty)
Selected Items When the list type is multiple selection, this configuration option can be set to a default value. The Select control displays the corresponding value in the list by default. selectedItems( ANY)(List) (empty)
Selection Service Identifies the service that is called using Ajax calls to dynamically return a list of items to display in the stock control. You can use the selection service input text option to identify the specific list that the service returns. selectionService(Service)

  • Input: text(String)
  • Output: results( ANY)(List)

Default Selection Service
Selection Service Input Text Provides the text to send to the selection service as input.

For example, if the selection service contains named lists, enter the name of the list that you want.

selectionServiceInputText(String) (empty)
Display Name Property

For data objects in selection lists that are not String or NameValuePair types, specify which property to use as their display names. The default value is name.

For example, if you have a business object with parameters called field1 and field2, and you want to use field2 as the display name, enter field2 here or set this property to a variable that contains "field2" as a string.

displayNameProperty(String) name
Value Property Specifies the property of the data object to use as the display value when the data in the list is not a String or a NameValuePair valueProperty(String) Value
Disable Sorting Specifies whether to display the selection items sorted alphabetically by label or by the order in which they appear in the list. disableSort(Boolean) False (not selected)

Restriction: If you set the list type to multiple items, the Safari browser displays a maximum of five items. The Safari browser does not indicate that there are additional items if there are more than five items. However, Safari users can see the additional items by scrolling.


Table

This stock control creates a table in which you can drop content. Each element that you add to the table results in a column. Users see the label for the element as the heading for that column instead of seeing the label on the element itself.

Tip: The default width of a table is 700px. If you use a CSS style to set the width of the table using a percent (%) value, ensure that somewhere in the DOM parent hierarchy of the tab there is an explicit value for the width.

Table business object binding
Binding Description
ANY (List) Contains a list of business objects of any type

Table configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
Selection Type Select whether the user can select rows in the table:

  • Single Selection the user can select only a single row
  • Multiple Selection the user can select one or more rows
  • No Selection the user cannot select any rows

selectionType(TableSelectionType) Single Selection
Disable Click-to-Edit Select this option if you want the entire table to be editable without requiring the user to click individual cells to edit them.

Important: When this setting is false (the default), the Coach Views contained within the table use the visibility settings of the table. That is, the Coach Views in a given cell are READONLY until the user clicks in the cell. The Coach Views are then EDITABLE until the user clicks anywhere outside of the cell. The Coach Views revert to being READONLY. When this setting is true, these Coach Views use their own visibility settings, which might or might not be EDITABLE.

disableClickToEdit(Boolean) False (not selected)
Set Editable Columns Set this option to specify which columns are editable without requiring the user to click individual cells to edit them. Use a comma-separated list to specify the columns.

For example, 1,3 makes the first and third columns directly editable.

disableClickToEditColumns(String) (empty)
Show Add Button Select this option if you want the table to include a button that a user can click to add a row to the table. showAdd(Boolean) False (not selected)
Show Delete Button Select this option if you want the table to include a button in each row that a user can click to delete that row. showDelete(Boolean) False (not selected)
Add Button Hover Text Provide the hover text for the Add button. addButtonText(String) Add
Delete Button Hover Text Provide the hover text for the Delete button. deleteButtonText(String) Delete
Disable Sorting Select this option if you want to prevent the user from sorting the table. disableSorting(Boolean) False (not selected)
Enable Pagination Select this option if you want the table to use multiple pages when the number of rows exceeds the value in the Number of Rows Per Page configuration option. disablePagination(Boolean) False (not selected)
Number of Rows Per Page Set the maximum number of rows that users can see in the table. If you enable pagination, users can use the page controls to see additional rows in other pages. rowsPerPage(Integer) 10
Initial Width Set the initial width of the table. Include the unit type such as 250px. initialWidth(String) 700px
Column Widths Set the widths of each column using a comma-separated list of integers. columnWidths(String) (Evenly sized)
Column Width Unit Set the measuring unit for the value in the Column Widths configuration option using .css units (% in cm mm em ex pt pc px).

For example, you can set the column width to 150px or 25% or 100em.

columnWidthUnit(String) %
Hide Columns Set this option to hide specific columns. Use a comma-separated list to specify the columns.

For example, 1,3 hides the first and third columns.

hideColumns(String) (empty)


Tabs

This stock control creates a tab and an area into which you can drop content. Each element that you add results in a new tab and content area. Users see the label for the element as the heading on the tab instead of seeing the label on the element itself in the content area.

Tip: The default width of a tab control is 700px.

If you change the width of the tab to use a percent (%) value, ensure that somewhere in the DOM parent hierarchy of the tab there is an explicit value for the width.


Text

This stock control displays editable text in a field.

Text business object binding
Binding Description
String Contains the text that this stock control displays. The String can be empty and the Text control saves the text that the user enters into it.

Text configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
Enable Autocompletion Sets whether the field displays suggestions based on what the user types. Specify an autocompletion service if you enable autocompletion. autocompletionEnabled(Boolean) False (not selected)
Autocompletion Service Identifies the service that provides type-ahead content assistance. IBM BPM provides the default autocompletion service to show the API for this service.

You must provide your own service implementation.

autocompletionService(Service)

  • Input: text(String)
  • Output: results(String)(List)

Default Autocomplete Service
Autocompletion Delay Sets the number of milliseconds to wait following the last keystroke before sending the input text to the autocompletion service autocompletionDelay(Integer) 1000
Validation Sets the JavaScript regular expression used to validate what the user entered in the field. Enter the pattern portion of the JavaScript regular expression as a string.

For example, use\d* to validate against zero or more digits.

If you set this field to a string variable instead, surround the content in the variable with quotation marks and use escape characters where necessary.

For example, use"\\d*" to validate against zero or more digits.

validationRegEx(String) (empty)


Text Area

This stock control displays multiple lines of editable text in a field.

Text business object binding
Binding Description
String Contains the text that this stock control displays. The String can be empty and the Text Area control saves the text that the user enters into it.

Text configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
Text Area Type Sets whether the text area has plain or rich text. toolbarStyle(TextAreaType) Plain

Restriction: In some browsers, users might not be able to use the cut, copy, or paste buttons in the text area toolbar because of security restrictions. If users cannot use these buttons, the browser displays a message describing how to cut, copy, or paste using the keyboard. See http://dojotoolkit.org/reference-guide/1.7/dijit/Editor.html.


Vertical Section

This stock control creates an area in which layout elements are stacked vertically. If the layout element is a Coach View bound to a list, the section repeats for each item in the list.

Vertical Section business object binding
Binding Description
ANY(List) Contains a list of items

Vertical Section configuration properties
Instance Configuration Label Description Definition Configuration Option Default value
Show Border Select this option to add a visible border to the section at run time. border(Boolean) False (not selected)
Square Border Corners Select this option to make the corners of the visible border square. By default, the corners are rounded. borderRadius(Boolean) False (not selected)

Create user interfaces for business processes


Related concepts:
Advanced items for Coach Views
Example: creating a tabbed Coach


Related tasks:
Developing reusable Coach Views


Related reference:
Stock content controls


Related information:
Building Coaches