IBM BPM has progressed through many iterations over the many years of its existence. From the original Lombardi Teamworks, through IBM WebSphere Lombardi Edition, through to todays IBM BPM offerings. Throughout that time, changes have been made relating to how a developer creates screen definitions (coaches). The single largest change occurred with the arrival of the Coach View technology. Coach Views provided a "composable" set of building blocks that could be used to construct the screens. The Coach Views provided by IBM included simple text inputs, checkboxes, tables and a few others. The secret sauce of the Coach View technology was that customers and other vendors could build their own Coach Views which then became additional components in the palette of available building blocks used to construct the screens. Over the years, IBM steadfastly held to the belief that the simple set of Coach Views provided with the product were sufficient and that there were enough additional Coach Views in the public domain and from third party vendors that IBM need not invest additional effort producing richer of more numerous instances.
Of the multiple vendors producing Coach View sets, one stood out. That was the SPARK UI set from Salient Process. IBM examined the available Coach View sets from a variety of vendors and chose SPARK UI for acuisition. After purchase and a period of harmonizing the SPARK UI set with IBM's core look and feel, the release of 8.6.0 saw the arrival of a Coach View set that IBM calls BPM UI. To all intents and purposes, this is the SPARK UI set of Coach Views now exclusively owned by IBM and distributed with the base BPM product. The super rich and numerous Coach Views now available with BPM that were previously known as SPARK UI, are the core of the remainder of this chapter.
Each SPARK UI Coach View will have its own configuration section. Some aspects of the configuration will be specific to the type of Coach View while others will be common. The configuration features are broken into categories:
FormulaBehavior
The BPM UI Coach View set
Configuration
AppearancePerformanceResponsiveEvents
Within a Coach, controls can be considered to exist in a hierarchical structure just like a file system tree. The top of the page is called the root and every other control is either a child of root or a child of some other control which will eventually be able to be traceable back up to the root.
Every control can be classed as either a container or an element. A container is distinct from an element as the container may have child controls while an element may not. An addressing scheme is available which allows us to locate any individual control in the tree. If an address starts with "/" then we are considering our navigation from the root downwards. If the address does not start with a "/" then we are working contextually relative to some reference control. Since each control is a child of some other control (except for the root) then we can think of the notion of a parent of a control. If we are navigating relative to a control, we can reference its parent with the string "..". A convenience is that a control that shares the same parent (i.e. a sibling control) can be reference with just the name of the control. To access a specific control using an absolute path, we can use the function:
page.ui.get(<address>)
For example:
page.ui.get("/Text1")
will return the control called "Text1" that is an immediate child of theroot.
To determine the path name of a view, we can use view.ui.getAbsoluteName() .
The Events category defines event types that the Coach View publishes upon when something interesting happens such as a user interaction. When an event fires, JavaScript code that is associated with the event entry is called. This JavaScript can be inline or can be a function call to a JavaScript function that is within scope. Let us look at an example. Imagine we have a button
The Control tree
Events
Coach View that looks as follows on the screen:
Image not found or type unknown
In the Events of that Coach View, we can define the following:
Image not found or type unknown
Notice that we have coded "On Click". This says that the code will be executed when the button is clicked. This code is inline code.
We can also code up a JavaScript function in a Custom HTML Coach View that might be:
And then in the "On Click" handler we can define:
buttonClicked(me);
as the code to be executed.
To use the value of a control we can use:
${<name>}.getValue()
This is so commonly performed that a short hand is available of the form:
@ {Name}
<script>
function buttonClicked(cv) {
alert("Button clicked\!");
}
</script>
Formulas
When scripting views, we can refer to a view by its identity. We have a couple of techniques for referencing the view:
page.ui.get({name})
${name}
me
When an event is called, there is a context in which that event executes. It includes the following variables:
me - The control that issued the event.view - The parent of the control that issued the event.
The layout containers are:
WellPanelCollapsible PanelTab SectionStackModal SectionHorizontalVerticalTable Layout/Row/CellHorizontal Split
Scripting
Layout
Icons
Icons are available in the SPARK UI and are based upon the "fontawesome.io" set that can be found here.
Image not found or type unknown
The Alerts control is responsible for showing alerts. To show an alert, a method called appendAlert() must be called on the alert control instance. The signature of the appendAlert() is:
appendAlert(title, text, style, timeout, id, data)
See also:
ArticleJS Doc
ChartsMaking REST Calls from a CoachThe ControlsAlerts
See also:
ArticleJS Doc
Image not found or type unknown
The badge can have three shapes:
Badge
Image not found or type unknown
Label
Image not found or type unknown
Tag
Image not found or type unknown
See also:
ArticleJS Doc
Area Chart
Badge
Bar Chart
See also:
ArticleJS DocYou Tube: Bar Chart
Image not found or type unknown
At runtime, we would normally call "appendItem()" to add a new level to the bread crumb trail.
A default view looks as follows:
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
The button is a classic UI component that presents a visualization of a button that can be pressed. It can be styled, colored and sized. It can also include an icon. The eventing mechanism allows arbitrary logic to be invoked when it is clicked.
Here are some examples:
Breadcrumbs
Button
Image not found or type unknown
Default
Image not found or type unknown
Rounded
Image not found or type unknown
Flat
Image not found or type unknown
Default with icon
See also:
ArticleJS Doc
Image not found or type unknown
The caption box encloses a single additional SPARK UI control and adds a specialized label around it. The position and style of the label can be highly customized.
See also:
ArticleJS Doc
Caption Box
Check Box
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
The isChecked() method returns true or false depending on whether or not the check box is checked.
See also:
ArticleJS Doc
Image not found or type unknown
The Collapsible Panel is a container which can be collapsed down to a single entry and re-opened again. A group of collapsible panels can be defined that are linked together. When one is opened, all the others close ensuring there is only one open at a time.
Image not found or type unknown
Checkbox Group
Collapsible Panel
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
This control provides SPARK UI diagnostics/debugging capabilities.
See also:
ArticleJS Doc
Image not found or type unknown
The Data control provides a binding between BPM data (teamworks data) and SPARK UI data. It is a non-visual control and hence is used exclusively in JavaScript most commonly in event handling. The control should be bound to a human service variable. The control exposes setData() and getData() to set and get the value of the variable.
See also:
Article
Configuration
Data
JS Doc
Image not found or type unknown
The Data Export control allows one to export data as an Excel spreadsheet or as a CSV document.
See also:
ArticleJS Doc
Image not found or type unknown
Pick a date (not a time nor a date and time).
See also:
ArticleJS Doc
Image not found or type unknown
Data Export
Date Picker
Decimal
See also:
ArticleJS Doc
Image not found or type unknown
It takes time for a set of Coach Views to load into a Coach. We may wish them not to be loaded immediately but instead deferred to a point in the future.
See also:
ArticleJS Doc
Image not found or type unknown
Determine nature of the device (browser, platform etc) that the Coach is running upon and be able to use that information to control the appearance of the Coach.
See also:
ArticleJS Doc
Deferred Section
Device Sensor
Image not found or type unknown
See also:
ArticleJS Doc
See also:
Article
Image not found or type unknown
See also:
ArticleJS Doc
Donut Chart
Dual List
Event Subscription
Exit Safeguard
Prompt the user for a confirmation before closing the Human Service browser window/tab.
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Geo Coder
Geo Location
Image not found or type unknown
See also:
ArticleJS DocYou Tube: Horizontal and Vertical sections
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
The icon can be one of the font-awesome icons.
See also:
Horizontal Layout
Horizontal Split
Icon
ArticleJS DocYou Tube: Tooltip, Icon and NoteFontawesome
Image not found or type unknown
See also:
ArticleJS DocYou Tube: Well section and Image control
Image not found or type unknown
See also:
ArticleJS DocYou Tube: Input Group Control
Image
Input Group
Integer
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Line
Line Chart
Link
Image not found or type unknown
See also:
ArticleJS DocHow to use the link control with web files
Image not found or type unknown
See also:
ArticleJS DocYou Tube: Goole API and Map
Image not found or type unknown
This control provides an input field which controls the input format of the input field. The primary data entered that has been entered into the field can be retrieved through "getMaskedText()". See also:
ArticleJS Doc
Map
Masked Text
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
The modal section provides a dialog box that can contain other controls. A Coach user can't interact with controls not in the dialog box until the dialog is disposed. This is what is known as "modal" interactions.
When working with the Modal Section in Web PD it has the following appearance:
Image not found or type unknown
Notice that there doesn't appear to be anywhere to drop its contained Coach Views. If we click on the control within Web PD, we will find that it expands:
Image not found or type unknown
Now we can place content within it. Clicking again on the "red X" at the top left, will once again collapse it.
Modal Alert
Modal Section
We should set the visibility of the Modal Section to "None" otherwise it will be visible when the page is initially loaded … and this isn't what one would normally want. However, we seem to have a new problem. If we set the "Visibility" of the control to be "None", it disappears in the PD editor. This feels like a PD bug. To work around this, instead of explicitly setting the visibility to none, we can specify a script rule that returns "NONE".
Image not found or type unknown
A good candidate for a child of the Modal Section is a Panel. By using a Panel we get a header and content areas that looks very much like a dialog. If we set the icon of the Panel to be "close" then we get a pleasing close button:
Image not found or type unknown
On the Panel control, we can catch a click on the close button via an event which we can then use to hide the dialog:
Image not found or type unknown
Another useful addition is to place a Panel Footer in the panel and in the panel footer we can place a button. This provides an almost identical look and feel to what users expect from a dialog box. Placing a button in a footer makes it appear on the left of the dialog and if we want it on the right, add a horizontal layout that is tight and right justified and place the button within that.
See also:
ArticleJS Doc
Multi Purpose Chart
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
The Item List property in the Items section defines a list from which the items will be chosen. To determine when an item selection has changed, we can use the "On Change" event. We can retrieve a list of selected items using the "getSelectedItems()" method.
Here is an example of usage.
Image not found or type unknown
The data for the select comes from name/value pairs where the name is shown as the label in the list and the value is the corresponding value. The data can come from either static description, a service call or a configuration option.
See also:
ArticleJS Doc
Multi Select
Navigation Event
Image not found or type unknown
The Navigation Event is a non-visible component used to perform a boundary event transition. Once we have a reference to the control in JavaScript, we can invoke the fire() method on it to cause the corresponding boundary condition transition. An alternative to fire() is confirmAndFire() which displays a simple dialog box which asks for confirmation.
See also:
ArticleJS Doc
Image not found or type unknown
Display a visible "note" to the Coach user.
See also:
ArticleJS DocYou Tube: Tooltip, Icon and Note
Image not found or type unknown
See also:
Note
Notification
ArticleJS Doc
Image not found or type unknown
This control provides an output text field.
See also:
ArticleJS Doc
Image not found or type unknown
The Panel is a container control that provides a header and a content area. The header can also have an icon which appears on the right. A click on the icon can be captured through an event.
See also:
ArticleJS DocPanel FooterPanel Header
Output Text
Panel
Panel Footer
Image not found or type unknown
The Panel Footer control is to be used a child inside a Panel control. It must not be used elsewhere. Using this control we can insert arbitrary content at the bottom section of the panel.
See also:
ArticleJS DocPanelPanel Header
Image not found or type unknown
See also:
ArticleJS DocPanel Footer
Image not found or type unknown
See also:
Article
Panel Header
Password
JS DocYou Tube: Password
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
Create a popup menu on another control.
Pie Chart
Places
Popup Menu
A menu item is composed of a set of properties:
Command - (command (String))Item Type - (itemType (MenuItemType))Icon - (icon (String))Item Text - (itemText (String))Badge shape - (badgeShape (MenuBadgeShape))Badge color - (badgeColor (TooltipColorStyle))Badge text - (badgeText (String))
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
Article
Progress Bar
QR Code
JS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
It is not uncommon to want to have a radio button be part of a group of radio buttons such that when one is selected, any others in the group become unselected.
Here is an example:
Image not found or type unknown
The data for the group comes from name/value pairs where the name is shown as the label of the radio button and the value is the corresponding value. The data can come from either static description, a service call or a configuration option.
See also:
ArticleJS Doc
Radio Button
Radio Button Group
Image not found or type unknown
See also:
ArticleJS DocYou Tube: Responsive Sensor
Image not found or type unknown
We use this view to define a BPM hosted service that can be invoked from the Human Service. An instance of this view has an "execute()" method that, when invoked, will result in the execution of the corresponding bound service. Parameters can be passed as input. For example:
${MyService}.execute(data)
The signature of the target service must have:
Input:
data (ANY)
Output:
results (ANY)error (AjaxError)
Within Web PD, when we create a new service, what is created is an External Service and not an AJAX service. This seems to work but results in a not authorized when called. We can fix that by
Responsive Sensor
Service Call
visiting the Overview tab of the service and changing its exposed configuration:
Image not found or type unknown
In the callback, we can use the getResult() method to retrieve the returned data.
In the callback we can code @functionName to invoke a function in our code.
See also:
ArticleJS DocUsing the Service Call
Image not found or type unknown
Very similar to the Table control, this control calls a back-end service that, when it returns, will use the data returned from it to populate the table.
We can call refresh(true) to cause the service to be called and populated.
See also:
ArticleJS Doc
Service Data Table
Signature
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Single Select
Slider
Spacer
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Attach a status box to another control.
Image not found or type unknown
See also:
ArticleJS Doc
Stack
Status Box
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
We can ask the switch whether it is "on" or "off" using the "isChecked()" method. If the switch is on, the return is true otherwise if the switch is off, the return is false.
See also:
Step Chart
Style
Switch
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
The columns property of the table is an array of TableColumn.
We can obtain the selected record using getSelectedRecord().
Imagine we have a button in a row in the table. When the button is clicked, we want to do something related to the row that contained the button. How can we determine which row the button was in that was clicked?
When the button is clicked, we know the identity of that button. It can be found in the me variable. We can then ask the table to return the row that contains the button using:
table.getRow(me)
Once we know the row, we can get the data using getData().
Imagine we have obtained (or calculated) a new set of data to be shown in the table. How do we visualize that data?
Tab Section
Table
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
Table Layout Cell
Table Layout Row
Text
In the event handling:
On Change provides environmental data as the variables "newText" and"oldText".
On Input provides environmental data as the variables "current" and "potential". The potential is the complete new text.
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Text Area
Text Editor
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
The tooltip provides a container. Coach Views placed in the container will then have the tooltip shown associated with them because they are contained within the container.
See also:
Text Reader
Timer
Tooltip
ArticleJS DocYou Tube: Tooltip, Icon and Note
Image not found or type unknown
See also:
ArticleJS DocYou Tube: Type Ahead Text
Image not found or type unknown
This control is able to stand in for other controls including Text, Masked Text, Single Select, Date, Decimal and Integer.
See also:
ArticleJS Doc
Type Ahead Text
Variant
Vertical Layout
Image not found or type unknown
See also:
ArticleJS DocYou Tube: Horizontal and Vertical sections
Image not found or type unknown
See also:
ArticleJS Doc
Image not found or type unknown
See also:
ArticleJS DocYou Tube: Well section and Image control
Video
Well
See also:
Creating your own control
To be a developer of SPARK UI one must understand the architecture.
The first thing to realize is that there is no code in the common event/callback functions known as load(), change(), unload() etc. Instead, the code is kept in a single JavaScript file which explicitly defines the functions required by CoachNG. There are several reasons for this. First it keeps the source integrated and together and hence easier to edit and work upon. It also allows us to run JavaScript minifiers and obfuscators over the code. In addition, having a single JavaScript source file causes it to be browser cached and is faster. If this wasn't enough, we will also find that when performing Chrome debugging, we can quickly get to our code through the underlying file.
For example, the CoachNG onLoad() function would be defined in the control as:
this.constructor.prototype.load
The source file that contains these functions is called "BPMExt-Control-<name>.js".
The SPARK UI controls adhere to naming conventions. Specifically:
BPMExt-Control-<name>.js - The source of the JavaScript that constitutes the control.BPMExt-Control-<name>.css - CSS needed for this specific control.BPMExt-Control-<name>-Palette.pngBPMExt-Control-<name>-Preview.pngBPMExt-Control-<name>-Preview.jsBPMExt-Control-<name>-Preview.html
The typical included scripts are:
New Controls
Internals
BPMExt-Core.js (BPMExt-Core.zip)BPMExt-Control-<name>.jsBPMExt-Control-<name>.cssspark-fonts.cssspark.cssloader.js
The AMD dependencies are:
com.salientprocess.bpm.views/bpmext bpmextcom.ibm.bpm.coach.utils/utilities utilitiesdojo/dom-class domClassdojo/dom-attr domAttrdojo/dom-construct domConstruct
A Coach view is initialized with a piece of inline JavaScript coded as follows:
bpmext_control_Init<Name>.call(this, utilities, bpmext, domClass, domAttr, domConstruct, fastclick)
This causes the function called "bpmext_control_Init<Name>" to be invoked with the local "this" in the function being executed being the Coach View itself. This is a common JavaScript technique. This function is defined in the corresponding BPMExt-Control-<name>.js.
The structure of a Coach View is:
Create and populate the this._instanceCreate and populate the this.constructor.prototype._protoCreate and populate the exposed functions at this.constructor.prototypeCreate a load function at this.constructor.prototype.loadCreate a view function at this.constructor.prototype.viewCreate a change function at this.constructor.prototype.changeCreate a change function at this.constructor.prototype.validateCreate a change function at this.constructor.prototype.collaborationCreate a change function at this.constructor.prototype.unload
The load function must call bpmext.ui.loadView(this) if the control is a view or it should call bpmext.ui.loadContainer(this) if the control is a container.
The unload function must call bpmext.ui.unloadView(this).
When we execute the loadView() call, a set of pre-defined functions are implicitly added to our
view including:
addClass()getData()hide()isBound()isEnabled()isValid()isVisible()propagateUpValueChange()recalculate()setData()setEnabled()setValid()setVisible()show()triggerFormulaUpdates()
We have adopted a convention that each control will have a property called "_instance" that is an object that will hold our private instance state. One of the primary reasons for this is so that we don't pollute the interface of our control with unexpected or non-public data.
If we have no bound object, we can create a substitute one with a call to bpmext.ui.substituteObject().
If we have no bound configuration option, we can create a substitute one with a call to bpmext.ui.substituteConfigOption().
For example:
The "_instance" view property
The substitute object
The substitute config options
bpmext.ui.substituteConfigOption(this, "color", "black");
To register an event handler, we can call bpmext.ui.registerEventHandlingFunction().
For example:
bpmext.ui.registerEventHandlingFunction(this, "onclickEvent");
The name of the event must be a configuration option of type string. Looking at the previous example, we would need a configuration option called "onclickEvent". What this will hold at design time is a fragment of JavaScript code which will be evaluated when the event is fired.
The way we fire an event is to call bpmext.ui.executeEventHandlingFunction(this, "onclickEvent").
To register for formula handling, we can call bpmext.ui.setupFormulaTriggeredUpdates().
The signature of this function is
bpmext.ui.setupFromulaTriggeredUpdates(view, updateFn, resultFn)
The updateFn function is invoked when the value of the formula associated with the control needs to be updated.
The resultFn is a function that is invoked that must return a value. This value is what is returned when we use the scripting shortcut "@{<name>}". The semantics of this is to return the current value of the control as it can be used in other formulaic expressions.
When the value of our control changes we need to inform other controls that formulas in use that refer to our value need to be updated. We do this through a call to "bpmext.ui.broadcastExpressionTrigger()".
Questions:
It appears that the formula is obtained from a configuration option called "expression". Is that
Event handling
Formula handling
correct?
The source should contain JsDoc markup for automatic generation of documentation.
Each public method should have a JsDoc comment of the following format:
/*** @instance* @memberof* @method* @desc* @returns*/
See also:
JsDoc
addEventSubscription(eventName, callback, view, persistent)alert(topic)eventSubscriptionExists(eventName, view)executeEventHandlingFunction(view, eventName)forEachViewSibling(view, callback)getChildContainers(view, deep)getChildViews(view, deep)getCoachNGViewPath(view)getContainer(viewPath, fromView)getContainerPath(view)getEffectiveVisibility(view)getEventHandlingFunction(view, eventName)getFunction(functionName, fromView)getFunctionContext(functionName, fromView)getInvalidViews(view)
Documentation generation
bpmext.ui
getNearestValidationContainer()getOption(view, optionName, defaultValue)getRequiredViews(onlyEmpty, fromView)getValidationContainers()getView(viewPath, fromView)getViewData(viewPath, fromView)getViewPath(getViewPath)getViewValidationErrors()isViewExplicitlyLoaded(view)loadContainer(view)loadView(view)makeUniqueId(prefix)(prefix)popValidationContainer()publishEvent(eventName, payload, persistent)pushValidationContainer()registerEventHandlingFunction(view, eventName)removeEventSubscription(eventName, view)removeViewValidationError()setupFormulaTrigeredUpdates()setViewData(data, viewPath, fromView)setViewEnabled(enabled, required)substituteConfigOption(view, propertyName, defVal)substituteObject(view, type, propertyName, defVal)unloadContainer(view)unloadView(view)updateViewValidationState()
addEventSubscription(eventName, callback, view, persistent) Add an event subscription to a view
alert(topic) Broadcasts an alert withe the parameters specified
eventSubscriptionExists(eventName, view) Determine if a view is subscribing to an event.
executeEventHandlingFunction(view, eventName) Executes an event handling function.
forEachViewSibling(view, callback) Convenience iterator function.
getChildContainers(view, deep) Will return a list of all child container views of the specified view
getChildViews(view, deep) Will return a list of all child views of the specified view
getCoachNGViewPath(view)
getContainer(viewPath, fromView) Retrieves the view corresponding to the path specified
addEventSubscription(eventName, callback, view, persistent) Add an event subscription to a view
getContainerPath(view) Returns the absolute path of the view/section
getEffectiveVisibility(view) returns the actual visibility of a view.
getEventHandlingFunction(view, eventName) Retrieve an event handling function.
getFunction(functionName, fromView)
getFunctionContext(functionName, fromView)
getInvalidViews(view)
getNearestValidationContainer() Gets the top view on the validation stack
getOption(view, optionName, defaultValue) Retrieves the configuration option value
getRequiredViews(onlyEmpty, fromView)
getValidationContainers() Returns the validation container stack
getView(viewPath, fromView) Retrieves the view corresponding to the path specified
getViewData(viewPath, fromView) Retrieves the bound data for the view corresponding to the path specified.
getViewPath(getViewPath) Returns the absolute path of the view
getViewValidationErrors() Returns the validation errors for the specified view
isViewExplicitlyLoaded(view) Returns an indication of whether or not this view has been explicitly loaded
loadContainer(view)
loadView(view)
makeUniqueId(prefix) Returns a unique ID to be used on the currently-displayed page.
popValidationContainer() Pop the specified view from the validation container stack
publishEvent(eventName, payload, persistent) Publish an event.
pushValidationContainer() Push the specified view into the validation container stack
registerEventHandlingFunction(view, eventName) Register an event handling function.
removeEventSubscription(eventName, view) Removes the specified event from the list of subscribed events for the specified view
removeViewValidationError() Removes the error on the specified id in the specified view
setupFormulaTrigeredUpdates() Registers formula triggers for the specified view
addEventSubscription(eventName, callback, view, persistent) Add an event subscription to a view
setViewData(data, viewPath, fromView) Sets the bound data for the view corresponding to the path specified
setViewEnabled(enabled, required) Enable/disable this view/control
substituteConfigOption(view, propertyName, defVal)
substituteObject(view, type, propertyName, defVal)
unloadContainer(view) Deregisters a section Coach View (but not a regular view) from the view tree.
unloadView(view) Deregisters a Coach View (but not a section) from the view tree.
updateViewValidationState() Gets the top view on the validation stack
View navigation is about finding or traversing views.
forEachViewSibling(view, callback)getChildContainers(view, deep)getChildViews(view, deep) - Get an array of child views (not containers). If the deep value is true, we will return recursively otherwise just the immediate children are returned.getView(viewPath, fromView)getViewPath(getViewPath)<view>.context.viewid
See also:
Control AddressingThe Control tree
These methods are added to each view under the "ui" namespace.
View Navigation
bpmext.ui.View.*
addEventSubscription(eventName, callback)get(path, index)getAncestor(name, literal)getCount(viewPath)getIndex()getAbsoluteName() - Return a string representation that can be used to address the view.getOption(optionName, defVal)getParent(literal) - Return the single view that is the parent of the called view. If literal is true then we will return the CoachNG parent, otherwise we return the first non-decorative parent. This may also return undefined if there is no parent.getSibling(name)invoke(functionName, args …)getChild(name, index)isSubscribingToEvent(eventName)publishEvent(eventName, payload)removeEventSubscription(eventName)
Here is the recipe for creating a new custom Coach View that matches the pattern followed by SPARK UI.
Imagine our new Coach View is going to be called "Xyz".
Create a JavaScript source file called "Xyz.js". Use the following as a template:
Creating a new custom Coach View
myControl_xyz = function (bpmext)
{
// Store any instance specific data within this object. Data stored in here will // be
assured to be private and unique to this instance of the coach view and // not visible to
others.
this._instance = {
};
if (!this.constructor.prototype._proto)
{
this.constructor.prototype._proto =
{
_handleVisibility : function (view)
{
var visibility = bpmext.ui.getEffectiveVisibility(view);
view.context.setDisplay(visibility != "NONE");
view.context.setVisibility(visibility != "HIDDEN");
},
_myFunction : function(view) { //internal function // My code goes
here.
}
};
this.constructor.prototype.myFunction = function () { //publicly available
method calls internal function
this._proto._myFunction(this);
}
this.constructor.prototype.getType = function ()
{
return "xyz.1";
}
this.constructor.prototype.load = function ()
{
try
{
var opts = this.context.options;
//default configuration values
if(!opts.myConfig) bpmext.ui.substituteConfigOption(this, "myConfig",
<defaultValue>);
var mdt = opts._metadata;
bpmext.ui.loadView(this);
}
catch (e)
{
}
};
this.constructor.prototype.view = function ()
{
try
{
this._proto._handleVisibility(this);
}
catch (e)
{
}
};
this.constructor.prototype.change = function (event)
{
try
{
if (event.type == "config")
{
switch (event.property)
{
case "_metadata.visibility":
{
this._proto._handleVisibility(this);
break;
}
}
}
}
catch (e)
{
}
};
this.constructor.prototype.validate = function (event) {
};
this.constructor.prototype.collaboration = function (event) {
};
Next, add this file to your toolkit as a managed Web file. Now we can create the Coach View. In the Included Scripts section, add a reference to the newly added Web file.
Image not found or type unknown
In the AMD dependendencies, add:
com.salientprocess.bpm.views/bpmext -> bpmext
In the "Inline Javascript" add:
myControl_xyz.call(this, bpmext);
Home page for SPARK UISPARK UI Controls
While DOM programming is a general programming discipline in its own right, we will cover here some of the notes I have found useful when working in this area.
this.constructor.prototype.unload = function ()
{
bpmext.ui.unloadView(this);
};
}
}
SPARK UI References
DOM Programming
var newElement = document.createElement("<tagName>");
element1.appendChild(element2);
var node = element.querySelector("<CSS Selector>");
var nodeList = element.querySelectorAll("<CSS Selector>");
var parent = element.parentNode;var parent = element.patentElement;
The return is null if we have no parent.
Creating a new element.
Adding an element to the DOM Tree
Finding the first matching node
Finding all the matching nodes
Get the parent of a node
Adding text to a node
We can create a text node using <element>.createTextNode("<text>") and then add that node as a child of our parent node.
var newTextNode = document.createTextNode("Hello!");parent.appendChild(newTextNode);
Another setter for text is to assign to the textContent property. For example:
parent.textContent = "Hello!";
Yet another option is innerText.
SPARK UI Cheat SheetRevision #7 Created 4 years ago by AdminUpdated 4 years ago by Neil Kolban
Top Related