System Data Toolkit

The System Data Toolkit is a toolkit supplied by default with an IBPM installation.
The artifacts
contained within are assured to be present in all IBPM environments. This toolkit
is automatically
associated with all Process Applications. Importantly, since these services are
provided with the
product, they are fully supported by IBM.
IBM Supplied Business Process Definitions
Business Process Definitions are BPDs that are included in the System Data Toolkit.
Send SLA Violation Email
IBM Supplied General System Services
General System Services are services that are supplied with the System Data
Toolkit. They can be
referenced anywhere that a General System Service is needed.
Default BPD Event
Default System Service
Extract XML Validation Results
IBM Supplied Historical Analysis Scenarios
IBM Supplied Human Services
Human Services are services that are supplied with the System Data Toolkit that can
be used in
solutions anywhere a Human Service is needed.
Default Human Service
When an activity is added to a BPD, it is initially associated with a Human Service
called Default
Human Service found in the System Data Toolkit. The details of this task look as
follows:
When shown to the user, it looks like:
Page 857
The Coach shows some of the primary details of the Task/Activity that is currently
running.
lsw Conditional Activity Selection Coach
The purpose of this Human Service is to present the end user with a tree structured
interface that
describes which activities can be skipped and which must be executed. In IBPM,
activities can be
flagged as conditional which means that they need not execute. This Human Service
interrogates
the process definition and determines the list of activities which are flagged as
conditional. For
each of these activities a check box marker is show beside the name of the
activity. The user can
then select which activities to execute and which to skip.
For example, look at the following BPD:
Here we see three conditional activities. The first Activity in the BPD as a whole
is an invocation
of the lsw Conditional Activity Selection Coach Human Service. The visual
appearance of this will
look as follows:
Page 858
The Templates allow us to save selections of which activities are selected and
which aren't so that
we can re-use those templates in the future.
Inputs
Name Data Type Suggested value
bpdGUID String tw.system.currentProcess.guid
conditionalActivities List of ConditionalActivity
tw.system.currentProcess.conditionalActivities
selectedConditionalActivities List of String
tw.system.currentProcessInstance.selectedConditionalA
ctivities
templateID String (default)
isReadOnly Boolean (default)
Outputs
Name Data Type Suggested value
selectedConditionalActivities List of String
tw.system.currentProcessInstance.selectedConditionalA
ctivities
templateID String (None)
See also:
• Conditional Activities
Fire Default BPD Event
IBM Supplied Integration Services
Call SPA BAPI-RFC
Call WebService via SOAP
Email Get System Default Properties
Email Send Teamworks Email
Read E-mail via IMAP
Read E-mail via POP
Read from HTTP
Page 859
Read Text File
This service reads text from a named file. The parameters are:
Parameter Description
filePath The full path to the file who's contents are to be read and returnd.
fileContents The data returned from reading the file.
See also:
• Write Text File
Send E-mail via SMTP
This service is described in detail in this book at the following section: eMail.
SLA Send Alert Email
SQL*
This is a set of database interaction services which can be used to retrieve,
insert, update or delete
data from a database. For usage, see Database Integration.
Transform XML Document using XSL Document
Transform XML Document using XSL File
Transform XML file using XSL file
Update ALL SLA Statuses
This service has no input or output parameters.
Update SLA Status
Validate XML File
Validate XML from URL
Validate XML String
Write Text File
This service writes data to a file on the local file system on which Process Server
is running. The
file can either be overwritten or appended to. The parameters are:
Parameter Description
Page 860
filePath The full path to the text file that will be created or appended. Take care
to use forward slashes on
windows.
fileContents The data that is to be written into the file.
appendToFile A value of true means that the file is appended. A value of false
means that the file is created or
replaced.
success A boolean indicator saying whether the file IO succeeded or failed.
See also:
• Read Text File
IBM Supplied KPIs
IBM Supplied Layouts
Report Filter – Simple Number Replacement
Report Filter – Time Grouping Range
Report Filter – Hidden User Filter
IBM Supplied Participant Groups
IBM Supplied Server Files
Integration.jar
This is the implementation file for much of the toolkits functions written in Java.
IBM Supplied Tracking Groups
IBM Supplied Undercover Agents
IBM Supplied User Attribute Definitions
Alert on Assign and Run
Image
Locale
Primary Role
Task Email Address
Task Notification
IBM Supplied Variable Types
Page 861
Cookbook Scenarios
In this section of the book we will illustrate some cookbook scenarios. These are
not meant to be
full applications but rather to illustrate how a technique or concept can be
achieved.
Scenario - Asynchronously starting one process from another
In this scenario we wish to have one process asynchronously start another process.
Consider a
process called "Process A". During its execution, we determine that we wish to
start an instance of
"Process B" but have "Process A" continue in parallel.
We will use the concept of a UCA to achieve this.
Process B looks as follows:
The interesting part of the process is that it is started by a "Start Message
Event" step. This means
that event has to arrive from an external source in order for the process to begin.
The configuration of this Step has as name a UCA which we called "My UCA".
Now let us look at the details of "Process A".
This contains an activity that is implemented as a General System Service.
The primary step in this service is an Invoke UCA step. This step names "My UCA" as
the UCA
instance to be invoked.
Page 862
An alternative to this technique is to use the JavaScript API.
Scenario – Making a process extensible by others
A customer (lets call them XYZ Corp) of IBPM wanted to build business processes
that they sell to
their own customers and they wanted to allow their customers to make minor
customizations. They
faced two problems. The first was that they didn't want the end customers to break
the integrity of
the business processes they were selling. The second problem was that the original
processes were
to be updated over time with new revisions and they didn't want to "obliterate" the
customizations
made by the end customers if the BPDs were replaced with new copies.
One way to achieve this task is to have the core processes make calls to nested
BPDs. These nested
BPDs become "exit points" in the core process. If an end customer wants to
customize the core
process, they would customize the sub-processes invoked by the core BPDs. If these
sub-BPDs are
kept in a separate toolkit from the core Process Application then a replace of the
Process
Application with a new version will result in the original Toolkits BPDs being
called and that is
where the customizations would take place. This solves both problems. The core
processes
become effectively read-only and the sub-processes called by the core become
documented "exit
points" in the core process. If the core processes are changed and the calls to the
exit points left as
they were then the sub processes will still be called at the correct times. When
the new Process
Application version is installed, as long as the Toolkit containing the sub
processes is not itself
replaced, the core process will continue to call the sub processes as they were
before.
Scenario – Starting a process from an external browser
In previous releases of IBPM, there used to be a concept of favorites when it comes
to starting
processes. A process could be defined as a favorite and then started from a
favorite list in Process
Portal. This concept is now all but gone from the product but part of the
technology still remains.
In Process Portal there is a list of processes that can be started. This list is
the set of processes that
have had their "Expose to start" entry defined in the BPD editor in the Overview
section:
Page 863
The access to this list of startable processes within the Process Portal is from
the New button.
When one right click on an entry in this list, the URL link location (where the web
link would take
you) is available to be copied:
See:
If the result of this link location is pasted into notepad, an entry similar to the
following will be
found:
javascript:doFavorite(407);
Note the number if parenthesis. Let us call this the "favorite id".
If a web browser now visits:
http://server:port/teamworks/process.lsw?
zObject=Favorite&zActivity=Execute&zPost=1&zFavId=favoriteId
Where:
• server – hostname or IP address of the IBPM server
• port – Port number on which IBPM is listening
Page 864
• favoriteId – the numeric Favorite ID found by the recipe above
An instance of the process will be started and the first coach (if configured) will
be displayed.
It is not known if this recipe is formally defined as part of the architecture of
IBPM. No reference
to this technique has been found in the product manuals and may not be supported
today or work in
the future.
Page 865
Blueworks Live
Blueworks Live is a process discovery and modeling tool that lives on the web. It
is a Software As
A Service (SaaS) package. This means that users don't install anything specific on
their desktops,
instead they navigate through a Web Browser to the Blueworks Live web site and the
functions run
inside the browser.
The home web page for Blueworks Live is:
https://www.blueworkslive.com/sLogin.html?redir=%2Fscr%2Fhome
You must have an account there in order to use it.
On a historical note, Blueworks Live used to be called Blueprint
The home page provides a login screen against which you login.
After logging in, you will be taken into the primary tool itself:
Page 866
The high level purpose of Blueworks Live is to allow staff members to capture their
existing
processes and potential changes to those processes. Where IBPM is concerned with
capturing
processes with the intent of final execution, Blueworks Live focuses on the
discussion and
discovery aspects of process based solutions.
Creating a Space
Within Blueworks Live, a Space is a related set of artifacts associated with a
particular process or
business goal. From the home page of your Blueworks Live account, you can create a
new space:
Page 867
Creating a Process
A process can be created within a space.
In the dialog, select a name for the process to be created in the project and then
select the space into
which the process will be added. An option allows us to create a new space if a
suitable one does
not already exist:
Page 868
There is a proverb/saying that says "Unless you know where your destination is, you
will never get
there". This is especially true when building BPM based solutions. Whether you are
implementing
a Business Process for the first time or revising a currently existing process, you
will want to be
able to capture and discuss all the steps in that process before committing to
implementation.
Blueworks live, at its simplest level, provides a drawing canvas in which two
different but related
styles of process diagram can be drawn. The first is called a "Discovery Map".
Discovery Map
A Discovery Map contains a set of "Milestones" that are reached during the
execution of a process.
Capturing these milestones is the highest level in beginning to build out a
process. There will
probably be (on average) six to ten milestones in the diagram. More than that
probably means that
the process has been drilled down too low to start with.
The milestones are deliberately light in any kind of refinement. After capturing
the top level
milestones, we can then look further to think about major activities that need to
be accomplished to
achieve those goals. We can then add these activities beneath each milestone.
Page 869
There is no right or wrong answer for this. The Discovery Map is put together by
conducting team
and individual interviews. At this stage, the map is still extremely high level but
as we can see,
things are starting to take shape.
Each of the activities in the map can be supplied with additional attributes. How
much or how little
time you spend on these attributes is up to you. Remember, this diagram is not
prescriptive, it is a
powerful aid to help you discuss and capture the process.
Right clicking on an activity brings up its context menu. From here, we can select
the Details
option.
The Details option brings up a dialog into which information (or details) about
that activity step can
be entered.
Page 870
It contains five tabs called Details, Problems, Documentation, Attachments and
Comments.
In the Details tab, we can enter various items about this step in the process.
These include:
Participant This is one of the core attributes of a step. It defines the role of
the person who is responsible
or eligible to perform this task. Later on we will see that the Participant value
entered here
becomes translated to a Swim Lane in a BPMN diagram.
Business Owner(s) One or more entries that describe the Business Owner of this
step. This could be a role or
department and should probably not be someone's name. Ask yourself the question
"Who cares
about how well this step performs"?
Expert(s) One or more entries that name experts who know about this step. These may
be folks who
perform this task today.
System(s) If this step interacts with any IT systems, this is where this
interaction can be documented. One
ore more entries may be supplied.
Cycle Time This is an estimate of the duration this step will take.
Cost This is the cost of executing this step.
Supplier(s)
Inputs
Outputs
Customer(s)
Risk
Value Add
In the Problems Tab, we can view and enter the problems that are to be discussed
and solved:
Page 871
In the documentation tab we can add documentation on this step or milestone.
In the Attachments tab we can view and add attachments associated with this step or
milestone.
Page 872
The comments tab allows others to add comments to this step or milestone.
Within the Details pull-down, we can change the color coding of an activity.
Changing the colors
of activities has no semantic effect but can be used to quickly visualize different
types of activities.
For example, activities colored red could be expense generating while activities
colored green could
be used to indicate revenue generating.
Page 873
We can flag activities as being followed which allows us to track changes to them
in a special
fashion. Activities flagged as followed have a star added to their visualization.
The followed activities then show up in the Following category under the followed
Activities tab:
Page 874
The Process Diagram
The Process Diagram is the partner to the Discovery Map. The Process Diagram shows
a BPMN
style diagram of the operation of the process.
When a Process Diagram is created from a Discovery Map the milestones in the
discovery map
Page 875
become the milestones in the process and the activities in the Discovery Map become
the activities
in the Process Diagram. The swim lanes in the Process Diagram are taken from the
Participants
associated with the activities. Moving an activity from one swim lane to another
changes that
activities Participant attribute.
Clicking on the wire link between activities produces a pop-up menu from which
additional
elements can be added:
Clicking on an activity produces a details menu from which attributes can be
changed. Many of
these attributes are as previously described in the Discovery Map attributes.
One particularly interesting attribute is the Show in Map attribute. By default,
this attribute has a
value of true meaning that the activity will also be seen in the Discovery Map. If
changed to false,
the activity will not be shown in the Discovery Map. This is particularly useful if
the activity
represents a technical aspect of the process as opposed to a business value step.
Working with Sub processes
Selecting an activity and clicking Convert to Sub-process allows us to define that
an activity is
actually composed of a sequence of activities.
Page 876
The sub process can then be embellished with additional decisions and activities.
The [-] icon at the bottom of the diagram allows the sub process to be collapsed
back to its original
container:
Notice that the container activity now has a [+] symbol indicating that it is a sub
process that
contains additional steps.
This sub process is currently not reusable. It is a sequence of steps contained
solely within the
containing process. A whole new process can be created from the sub process that
can be reused in
other processes. This creates a linked process.
Editing mode vs Viewing mode
The Blueworks Live screen has two modes of view. Editing mode where the Discovery
Map and
Process Diagram can be changed and viewing Mode where the Discovery Map and Process
Diagram are viewed with associated details.
Here is an image of a Discovery Map in viewing mode. Notice that there is an area
on the right in
which the selected activity or milestone's details are displayed. The Edit button
can be pressed to
place the tool into editing mode.
Page 877
Sharing the solution
Both Discovery Maps and Process Diagrams can be printed by pressing the Print
Button.
A dialog appears allowing the page size to be selected. At the conclusion a Create
PDF button can
be clicked which will render the image as a new PDF document.
A Microsoft Power Point presentation can also be generated by clicking the
PowerPoint button.
A dialog appears asking where the Power Point should be saved.
Creating a Process from a Template Library
Page 878
Blueprint provides a set of process templates that can be used as starting points
for your own
processes. Selecting the Template Library link shows us a list of categorized
process templates that
can be selected.
When a process template has been found which looks like a suitable candidate for
forming the basis
of your own process, a copy of the process can be imported into your own project.
Hovering the mouse over a process brings up a caption area in which a summary of
the process can
be found.
Clicking on the process picture brings up its preview/details. Both the Discovery
Map and the
Process Diagram can be viewed before importing.
Page 879
When changes are made to a process or project, these changes are recorded in the
News Feed.
Think of this as a list of all changes that can be scanned like the headlines of a
newspaper.
Clicking on the News Feed link shows a summary of the changes made over the last
period of time.
These changes can be filtered by date, user who made the change, process in which
the change was
Page 880
made or project.
Automating a Process
From within the space where you want to created your automated process, click on
the Automate a
Process button:
TBD Describe the different templates
Page 881
Accessing processes from Blueworks in Process Designer
Processes captured and modeled in Blueworks can be directly imported into Process
Designer. On
the main Library area, there is an entry called BLUEWORKS LIVE PROCESSES. Clicking
the
plus button allows us to subscribe to a Blueworks process.
Page 882
The first time this is navigated, you must enter account information to allow you
access to the
Blueworks server.
Once connection with Blueworks has been established, the account for the userid is
allowed to be
selected. It is possible a single userid may have multiple accounts:
Page 883
a list of the projects and processes associated with the account are displayed.
From this list, one or
more projects can be selected for subscription.
A confirmation summary window is shown in which you can review the projects that
are about to
be subscribed to.
Page 884
After a subscription has been made, you will now find a new set of artifacts in
your Process
Application that have come from the Blueworks maintained process.
'
_________________________________________________
Third Party UI Toolkits
As the Coach technology of IBM BPM improved, business partners of IBM stepped in to
supply
Page 885
additional toolkits that can be used to build custom user interfaces. Some of these
toolkits are free
while others are fee based. In this part of our discussion, we will examine some of
the free toolkits
available.
BP3 – Brazos
BP3 make a toolkit called "Brazos" which at the time of writing is at v2.0. The
Brazos toolkit can
be found on the Internet here:
http://www.bp-3.com/brazosoverview/
Once downloaded and installed, the toolkit can be found in the Toolkits section:
To design a Coach which uses the BP3 Brazos UI, we need to add the toolkit as a
dependency:
Label positioning
A number of the Coach Views have labels associated with them. For example the Input
String.
The label for this Coach View can be positioned either to the left of the text
input field or above the
text input field:
Left:
Above:
The choice of position of the label is governed by the "Responsive Column" that
acts as the
container for the field. The Responsive Column has a property called "For Label
Alignment" which
can have a value of:
• Left of Input Controls – The label appears left of the input control
• Above Input Controls – The label appears above the input control
If the labels are shown to the left of the input fields then all fields in the same
column will have
their labels made to be the same width so that alignment happens:
The width of the label can be forced to a specific value with the Responsive Column
property called
"Form Label Width (px)".
See also:
Page 886
• Responsive Column
• Responsive Row
Brazos Coach Views
Let us now start to break-down the architecture and the controls provided.
Brazos Template
The Brazos Template provides a container for other Brazos controls. When added to
the canvas, it
looks as follows:
Think of the template as a container for other Coach Views. The container also
provides a
necessary environment for many of the other Brazos controls.
By default, the template shows a header which contains three primary components:
• Project Name – The name of the overall application/solution
• Activity Name – The name of the current task/activity
• Activity Description – The description of the current task/activity
In addition, an area at the bottom of the template called the "footer" allows us to
provide some
footer text.
Here we see an example template as seen by the end user:
The various sections are highlighted.
Should we not wish to show any headers or footers, we can change the "Template
Display Style"
property to "None" and the template will have no visual appearance.
Within the template there are two content boxes into which other Coach Views may be
placed. The
upper one is the content box for the optional "Instance Details" area which the
lower of the two is
the content box for the primary Coach content and is normally where additional
controls will be
Page 887
placed.
The configuration properties for this control are shown below:
• Template Display Style
• Full Width Display – By default, the template provides some "guttering" along the
sides of the display. Selecting this option removes "most" of the guttering and the
screen
now uses more of the display width.
• Display Details
• Details Title
• Project Name
• Activity Name
• Activity Description
• Footer Text
By default, the footer is placed at the end of the content which may be higher up
than we want. A
recipe for forcing the footer to be at the bottom is:
.Brazos_Template > .container {
margin-bottom:60px;
}
.bp3-footer {
position:fixed;
bottom:0;
}
Button
This Coach View presents a styled button. When clicked, it causes a boundary event
to be fired.
When placed on the canvas, it looks as follows:
The label for the button is taken from the label property of the Coach View. The
configuration
options for the Button are shown below:
Page 888
• Allow multiple clicks
• Align – The align option defines where the button appears in its area. It has the
following
options:
◦ Left
◦ Center
◦ Right
◦ Full Width
• Display Style – How the button should display itself. It has the following
options:
◦ Default -
◦ Primary -
◦ Info -
◦ Success -
◦ Warning -
◦ Danger -
◦ Inverse -
• Button Contents – What the button should contain
◦ Label Only – Just the label
◦ Icon Only – Just an icon
◦ Icon and Label – Both an icon and a label
• Icon – If an icon us allowed in the label, this property describes which icon to
use. See
Icons for how to specify the icon to use.
• Table Behavior
Page 889
Cards
Check Box
From the palette, the Check Box control looks as follows:
When added to the canvas, it appears as:
• Type – The type of selection to be used.
◦ Single Select – Radio Buttons (Bind String OR
NameValuePair) – With this option, the selections are shown beside radio buttons.
Page 890
Only one item may be selected.
◦ Multi Selected – Checkboxes (Bind List of String OR List of
NameValuePair) – With this option, the selections are shown beside check boxes.
Multiple items may be selected.
◦ Boolean – Two Radio Buttons (Bind Boolean) – With this option, only
two radio buttons are shown. One being the true value and one being the false
value.
◦ Boolean – One Checkbox (Bind Boolean) – With this option, a single
check box is shown. When clicked, it will have a value of true, else false.
• Display Options Inline – By default, the options are shown one above the other.
Clicking
this checkbox causes the options to be display horizontally.
• Invoke On Change Boundary Event – If selected, then a change to the selection
will cause a
server side boundary trigger to occur.
Combo Box
From the palette, the Combo Box looks as follows:
When added to the canvas, it looks like:
It has a wide variety of configuration options shown in the following:
Page 891
• selectionType – The selection type to be used.
◦ Single Select (Bind String or NameValuePair) – With this option, a
pull-down allows us to select a single option.
◦ Multiple Select (Bind List of String or List of
NameValuePair) – With this option, a pull-down allows us to select one or more
options from a list.
• Selection List – A list of name/value pairs used as the values of the combo box.
Note
that this MUST be name/value pairs and not a list of strings.
• Additional Default Option
• Selection Service
• Input Test
• Invoke Boundary Event
Data Table
The Data Table is a Coach View that is specifically designed to show data within a
table. That data
can be sourced dynamically if needed.
When a Data Table is added to the Coach it provides a Content Box into which
multiple columns
may be added. When we add a Coach View into the Content Box, we need to bind it to
the property
of a Business Object that will be used as a template for the list of Business
Objects returned from
the Ajax lookup. An example will make this clearer. Imagine that we have a Business
Object of
type "XYZ" which has fields "a", "b" and "c". Now imagine that the data we wish to
show in our
table is a list of XYZ. If we add a column to the table, we need to bind that
column to a property of
a template instance of "XYZ".
From the palette, the Data Table looks as follows:
Page 892
When added to the canvas, it looks like:
• Selection Service – A BPM AJAX service that when called, will return the data to
be shown in the table.
The AJAX selection service has the following input parameters:
Page 893
• inputText (String) – The value of the "Input Text" field found on the
configuration
properties for the instance of the Data Table Coach View within the canvas.
• iDisplayStart (Integer) – When pagination is being used, this will be the first
record
that is to be returned.
• iDisplayLength (Integer) – When pagination is being used, this will be the number
of
records to display on a page.
• iSearchValue (String) – The global search field (What is this?)
• iColumnToSort (String) – The name of the column on which to sort.
• isortDirection (String) – The direction of the sort. The values are either "desc"
for
descending or "asc" for ascending.
• iAllVisibleColumns (List of String) – The list of visible columns.
• filterObject (ANY) – If a filter object is supplied in the "Filter Object"
configuration settings, then it is passed to this argument.
The AJAX selection service has the following output parameters:
• results (ANY) – The results to show within the table.
• iTotalRecords (Integer) – The total number of records that might possibly be
available.
• iTotalDisplayRecords (Integer) – The number of records that are to be displayed
after filtering has been applied. This will (of course) be less than or equal to
the
iTotalRecords value.
• Input Text – Input data to the AJAX service that returns the data.
• ProcessAllCallsServerSide – Should the data be pre-loaded or lazy loaded? If
this option is checked then lazy-loading will be performed.
• Enable Sorting – Is column sorting permitted?
• Pagination Type – How should one see the data within the table?
◦ Page – Data is shown one page at a time.
◦ Scroll – Data is presented as we scroll.
◦ None – All data is presented.
• Pagination Position
• Table height (only when scroll is active) – When the Pagination Type
is "Scroll", how tall is the table?
• Rows Per Page – When the Pagination Type is "Page", how many rows per page are
shown?
• Show Display Rows Per Page – Can we change the number of rows per page at
Page 894
runtime?
• Change Display Rows Per Page
• Selection Type – What kind (if any) of row selection is being utilized? Options
are:
◦ No Selection – The table provides no selection.
◦ Single Selection – The table provides single row selection. Selecting a new row
un-selects previously selected row. With single selection, the first column in the
table is
used to show radio buttons indicating which row has been selected.
◦ Multiple Selection – The table allows multiple rows to be selected. The first
column in the table is used to show check boxes indicating which rows have been
selected.
• Selection Field ID – The string name of the field within the business object that
will
be used as a unique selector for the selected item. Note that this is a different
technique than
that used for column identification.
• Selection List – A list variable that holds the selections made. The data type of
the
list should be the same data type of data returned from the Ajax call.
• Enable Select All/Deselect All
• Enable Global Filter
• Filter Object – The filter object is a Business Object that will be passed to the
Ajax
service as an input parameter. It is assumed that the Ajax service will somehow use
this
object to determine which items to return.
• Hidden Columns – The list of columns that will be hidden. The columns to be
hidden
are their ordinal numbers starting at 0 and comma separated. For example "0,2" will
hide
the 1st and 3rd columns.
• Enable Keyboard Navigation
Date Time Picker
From the palette, the Date Time Picker looks as follows:
When added to the canvas it looks like:
The configuration options for this control look like:
Page 895
• Placeholder Text – This is an optional text string which will be shown in the
background of an otherwise empty date time picker control. In other UI
environments, this
is called a prompt.
• Control Type – This option defines what is expected to be entered
◦ Date Time Picker – Allow the user to select both a date and a time
◦ Date Picker – Allow the user to only select a date
◦ Time Picker – Allow the user to only select a time
• Format – The format for the date/time. This can be composed of the following
codes:
◦ d
◦ dd – Two digit day
◦ M
◦ MM – Two digit month
◦ yy – Two digit year
◦ yyyy – Four digit year
◦ HH
◦ hh
◦ mm
Page 896
◦ ss
◦ PP
• Use Start Date – Specify a lower bound for the date selection. Dates prior to the
start
date will not be allowed to be entered.
• Start Date – The start date if the "Use Start Date" option is enabled.
• Use End Date – Specify an upper bound for the date selection. Dates subsequent to
the
end sate will not be allowed to be entered.
• End Date – The end date if the "Use End Date" option is enabled.
• Hour Format – The format for hours:
◦ 24 Hour Format
◦ 12 Hour Format
• Disable Pick Seconds – If selected, seconds are not to be specified.
Doc Attach CMIS
When added to the canvas it looks like:
The configuration options for this control look like:
Page 897
Dynamic Buttons
The Dynamic Buttons Coach View provides a series of buttons in three distinct
styles.
From the palette, the Dynamic Buttons looks as follows:
When added to the canvas it looks like:
The configuration options for this control look like:
• Style – This property controls how the buttons appear
◦ Buttons – In this mode, the values appear as concatenated buttons:
Page 898
◦ Wizard – In this mode, the values appear as a set of wizard steps:
◦ Pagination – In this mode, the values appear as a pagination set:
• Alignment – This option defines the alignment of the buttons within the button
area.
◦ Left – The buttons are on the left
◦ Center – The buttons are centered
◦ Right – The buttons are on the right
◦ Full Width – The buttons consume the full width
• Display Style – The visual style (coloring) of the buttons
◦ Default -
◦ Primary -
◦ Info -
◦ Success -
◦ Warning -
◦ Danger -
◦ Inverse -
Input Decimal
From the palette, the Input Decimal looks as follows:
When added to the canvas it looks like:
The configuration options for this control look like:
Page 899
• Placeholder Text – A string which is shown in the background of the control when
no
content has yet been entered. In other UI technologies this is commonly called a
prompt.
• Prepend Type – What should be shown in the prepend area if a value is provided.
◦ Text
◦ Icon
• Prepend Value – The value to show in the prepend area.
• Prepend Accessible Text
• Places After Decimal – How many places should be shown after the decimal point.
This is a pull down with a variety of different values.
• Display Commas – Should commas be shown within the value.
• Invoke on Change Boundary Event
Input Integer
From the palette, the Input Integer looks as follows:
When added to the canvas it looks like:
The configuration options for this control look like:
Page 900
• Placeholder Text – A string which is shown within the input field when it has no
other content. This can be considered a prompt.
• Prepend Type – What should be shown as the prepend value.
◦ Text
◦ Icon
• Prepend Value
• Prepend Accessible Text
• Display Commas – Should commas be displayed within the text
• invokeBoundaryEvent
Input String
From the palette, the Input String looks as follows:
When added to the canvas it looks like:
The configuration options for this control look like:
Page 901
• Placeholder Text – A string which will be shown in the background area of the
text if
it contains no other text.
• Prepend Type – The type of prefix symbol
◦ Text
◦ Icon
• Prepend Value – The value of the prefix symbol
• Prepend Accessible Text
• Typeahed Enabled
• Selection Service
• Strict
• Mask Enabled
• Mask Format
• Binding Should Include Mask Characters
• Invoke On Change Boundary Event – When the text changes, invoke a boundary
trigger. The text is considered change when the content has been changed by a user
and
Page 902
focus is lost from the control.
• Invoke on Enter key press Boundary Event
Modal
The Modal Coach View provides a dialog area. It presents a button which, when
pressed, will show
a dialog. To the left of the button is the label associated with the button. The
label to the left of the
button is taken from the architected label of the Coach View.
From the palette, the Modal looks as follows:
When added to the canvas it looks like:
The configuration options for this control look like:
Page 903
• Invoke Button Size – The size (in span units) of the button which when clicked,
will
launch the dialog.
• Alignment – How the button should be aligned.
◦ Left
◦ Right
◦ Center
◦ Full Width
• Invoke Button Style – How the button should be visually styled.
◦ Default -
◦ Primary -
◦ Info -
Page 904
◦ Success -
◦ Warning -
◦ Danger -
◦ Inverse -
• Invoke Button Content Type – What the button will contain.
◦ Text – The button content will be a text string.
◦ Icon – The button content will be an icon.
• Invoke Button Content – The content of the button. This will either be text if
the
content type is text or it will be the name of an icon if the content type is
flagged as being an
icon.
• Invoke Button Prepend Icon – The icon to use as the suffix for the button. By
default, no icon is shown, however if the name of an icon is supplied, it will be
shown to the
left of the button label. The list of names of allowable icons can be found at
Icons. If an
icon is defined to be used then that icon will also appear on the title of the
dialog when the
dialog is shown. An example of a button with the icon "icon-search" is:
• Modal Width – The width of the modal dialog in pixels. If one is using a table
that
contains a pager, make sure to test the dialog,
• Modal Title – The title of the dialog.
• Done Button Label – The label for the "Done" button. The default is simply "Done"
and looks as follows:
• Trigger Boundary on Modal Done – Should a boundary trigger occur when the
modal dialog is hidden? This is off by default. Take care with this option. Even
though it
is off by default, even when off it still allows a wire to be mapped to the Modal
Coach
View. This can cause confusion when the trigger is off and the user clicks the Done
button
as nothing (but the hiding of the dialog) appears to happen. This is of course the
correct
semantics but can result in confusion and debugging if not considered.
• Display Error on Boundary Event Return
• Show Cancel Button – Should a cancel button be shown?
• Cancel Button Label – What is the label for the cancel button? This will only be
applicable if the cancel button is being shown.
• DOM Name
Page 905
• Hide Trigger
See also:
• Icons
Output Text
From the palette, the Output Text looks as follows:
When added to the canvas it looks like:
The configuration options for this control look like:
• Truncate Up To
• html
• Format Function Name
Responsive Column
The Responsive Column Coach View provides a container for other Coach Views. The
width of
the container (the column width) is defined in units of 1/12 of the available width
of its parent. For
example, if we want a column to be 50% of the width of the screen, we might say it
has a span
value of 6 (width = 6/12 = ½ = 50%).
From the palette, the Responsive Column looks as follows:
When added to the canvas it looks like:
The configuration options for this control look like:
Page 906
• Span – The number of "span units" that this column consumes. There are 12 span
units in
100% of the parent's width. A value of "Default" will consume the remaining width.
• For Label Alignment – How should the "For" label of an input field appear.
◦ Left of Input Controls – Labels will appear to the left of the input controls
◦ Above Input Controls – Labels will appear above the input controls
• Form Label Width (px) – The width of the "For" labels in pixels.
Responsive Row
The notion of the Responsive Row is that it provides a row into which content may
be placed.
Commonly, the content will itself be encased in Responsive Columns. What this means
is that if
the width of the row is "deemed" to be too small, the row can re-flow itself. Quite
what the
algorithm in play actually may be is not yet known. This Coach View presents no
actual visual
interpretation by itself.
From the palette, the Responsive Row looks as follows:
When added to the canvas it looks like:
The configuration options for this control look like:
Section
From the palette, the Section looks as follows:
When added to the canvas it looks like:
Page 907
The configuration options for this control look like:
• Span
• Collapsible
• Initially Collapsed
• For Label Alignment
• From Label Width (px)
Table
From the palette, the Table looks as follows:
When added to the canvas it looks like:
The configuration options for this control look like:
• Allow Row Addition with Button
• Allow Auto Table Row Addition
• Add Row Label
• Invoke Boundary Event when Row Added/Removed
Tabs
From the palette, the Tabs looks as follows:
Page 908
When added to the canvas it looks like:
The configuration options for this control look like:
• Tab Layout Configuration
• Span
• Right Align Last Tab
• Selected Tab
• Invoke Boundary Event on Tab Change
Text Area
From the palette, the Text Area looks as follows:
When added to the canvas it looks like:
The configuration options for this control look like:
• Rows
• Placeholder Text
Page 909
• Rich Text
Icons
There are a number of icons that can be used within the toolkit that come from
Font-Awesome.
There is also a cheat sheet available:
http://fortawesome.github.io/Font-Awesome/3.2.1/cheatsheet/
Below is a list of the current known symbolics for those icons.
Page 910
Page 911
Page 912
Styling the look and feel
The look and feel of the Brazos toolkit can be changed. Using the CSS tooling found
in the
samples, a live color picker can be used to generated style sheets.
Some of the more important styles are:
Selector Style Description
.jumbotron .headerBack fill Header area background bars
.jumbotron .HeaderIE8 background-color Header area background color
.jumbotron #pageProjectNameH4 color Project name in header color
.accordion-heading-bp3 .accordionheading-
bp3-expanded
background-color Section header background color
Page 913
.btn-default background-color Background color for default button
.btn-default border-color Border color for default button
.btn-footer background-color Footer background color
.btn-default:hover background-color Hover background color for default button
.btn-default:hover border-color Hover border color for default button
A recommended way to apply the CSS to your Coaches is to create a new Coach View
called
"Custom Brazos CSS". In that Coach view within the "Inline CSS" section, place the
desired CSS
stylings. Once completed, we can inject this Coach View in any Coach that wishes to
have these
stylings applied. That makes the stylings reusable and kept in a single place.
Brazos Portal
The Brazos Portal is an alternative to the IBM BPM Process Portal written and
distributed by BP3.
Installing the Brazos Portal
The correct and proper instructions for installing the Brazos Portal can be found
with the
distribution of that product. What follows is what I did at a particular release
(1.2.2).
1. Unzip the distribution into its own folder.
2. Create the necessary tables within the BPMDB database for Brazos Portal
operation. The
DDL needed for this can be found with the distribution. In my instance I use DB2 as
my
database. To achieve this, I opened a DB2 DOS window and ran:
db2 connect to BPMDB
db2 -vstf brazos_portal_db2.ddl
db2 connect reset
3. Create a security alias called BrazosPortal using the userid that will be used
to connect to the
database.
4. sd
Page 914
Page 915
5. Install the JavaEE App
Page 916
Page 917
6. Change the security settings
Page 918
7. Start the application
8. w
Using the Brazos Portal
When we connect to the portal, we are presented with an attractive login screen: