Deliver Modern UI for IBM BPM with the Coach Framework and

Bootstrap Modal Confirmation Dialog On Form Submit

Add confirmation dialog to React events by Tom Ehrlich. Jquery ui confirm dialog example Let's give edit form an id and initialize confirm dialog.
bootstrap modal confirmation dialog on form submit

Developing for UCP 14+

4 janv. 2017 Method. Description. Returns. Developing for UCP ... Display a tab in the user settings modal ... standard javascript confirm().

Configuring Siebel Open UI

Example of How Siebel Open UI Renders a View or Applet 37 For this use the jQuery-UI provided dialog() API. In this example ... modal: true
ConfigOpenUI

Developing Local Plug-ins with the vSphere Client SDK - VMware

14 mai 2020 Location of Sample Plug-in in the vSphere Client SDK 26 ... Specifies the properties of a confirmation modal dialog box.

Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP

26 sept. 2016 mysql rows with bootstrap confirm modal(dialog) with the help of bootbox ... In today's tutorial i am going to share the most useful jQuery ...
Bootstrap modal wdfrwg

Alert Box In Servlet Example Berlie-Falco

Ajax Java example jQuery ajax method download project. Jquery Example. Please let us updated by default script alert dialog box and javascript.
alert box in servlet example

Deliver Modern UI for IBM BPM with the Coach Framework and

IBM has not tested those products and cannot confirm the An example of this is a Panel for modal dialog-like behavior such as a Well containing.
sg

Developing Local Plug-ins with the vSphere Client SDK - VMware

14 mai 2020 Location of Sample Plug-in in the vSphere Client SDK 26 ... Specifies the properties of a confirmation modal dialog box.
developing local plug ins with the vsphere client sdk

Release Notes

Modal Dialog Drawers - There is a new template to render both page and region Native APEX components that use jQuery UI will continue to function ...
oracle apex release notes

USER GUIDE 6.2

<p:dialog widgetVar="status" modal="true" closable="false">. Please Wait. </p:dialog> Effect component is based on the jQuery UI effects library.
primefaces user guide

216827

aérodynamique et mécanique du vol de jean-pierre duvivier

aérodynamique exponentielle

aérodynamique f1

aérodynamique f1 2022

aérodynamique l'avionnaire

aerodynamique mecanique du vol

aérodynamique traduction francais

aérodynamique voiture

aérodynamique voiture definition

aérodynamique voiture f1

Deliver Modern UI for IBM BPM with the Coach Framework and

Redbooks

Front cover

Deliver Modern UI for IBM BPM

with the Coach Framework and Other Approaches

Rackley Boren

Eric Ducos

Ge Gao

Thalia Hooker

Matthew Oatts

Paul Pacholski

Dennis Parrott

Claudio Tagliabue

International Technical Support Organization

Deliver Modern UI for IBM BPM with the Coach

Framework and Other Approaches

October 2016

SG24-8355-00

Note to U.S. Government Users Restricted Rights -- Use, duplication or disclosure restricted by GSA ADP Schedule

Contract with IBM Corp.

First Edition (October 2016)

This edition applies to Version 8, Release 5, Modification 7 of IBM Business Process Manager.

Note: Before using this information and the product it supports, read the information in "Notices" on

Notices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix

Trademarks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .x

IBM Redbooks promotions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii

Authors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii

Now you can become a published author, too! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii

Comments welcome. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii

Stay connected to IBM Redbooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii

Chapter 1. Delivering modern UI for IBM BPM using the Coach Framework and other

approaches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1 User interactions with business processes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.2 Coaches: Custom user interfaces for business processes . . . . . . . . . . . . . . . . . . . . . . . 3

1.3 Coach views: Custom user interface components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.3.1 Controls: Atomic coach views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.3.2 Reusable coach elements: Composite coach views. . . . . . . . . . . . . . . . . . . . . . . . 4

1.3.3 Dynamic coach view interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.4 Human services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.4.1 Task completion coaches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.4.2 Dashboards. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.4.3 Client-side human services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.5 Using coaches outside IBM BPM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.5.1 Launching coaches using a URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.5.2 Coaches within JSR 286 portlets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.6 How coaches can benefit your organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.6.1 Seamless integration of UIs and process logic. . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.6.2 Tailored UI components for your business . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Chapter 2. Creating user interfaces with coaches. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.1 Getting started with client-side human services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.1.1 Creating a simple process flow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.1.2 Creating a client-side human service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.1.3 Running a client-side human service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.2 Building a simple coach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.2.1 The coach editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2.2.2 What you see is what you get (WYSIWYG) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.2.3 Using variables to add controls to a coach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2.2.4 Moving and deleting controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

2.3 Configuring controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

2.3.1 Setting the control binding variable. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

2.3.2 Using pseudo variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

2.3.3 Setting control configuration options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

2.3.4 Defining control visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

2.3.5 Changing the positions of controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

2.4 Control toolkits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

2.5 Working with documents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

iv Deliver Modern UI for IBM BPM with the Coach Framework and Other Approaches

2.5.1 Document List control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

2.5.2 Document Viewer control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

2.5.3 Document Explorer control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

2.6 Creating a reusable group of controls (using a composite coach view) . . . . . . . . . . . . 35

2.7 Adding validation to a coach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

2.7.1 Required visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

2.7.2 Control configuration options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

2.7.3 Data Change event handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

2.7.4 Client-side script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

2.7.5 Server-side service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

2.7.6 When to use each validation technique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

2.8 Deriving data from other fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

2.9 Making a coach responsive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

2.9.1 Multiple form factors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

2.9.2 Controls' responsive properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

2.9.3 Testing a responsive UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

2.9.4 Responsive design considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

2.10 Designing a coach using the grid layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

2.10.1 The Grid and Content views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

2.10.2 Grid templates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

2.10.3 Grid cell properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

2.10.4 Adding content to the grid. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

2.10.5 Using sections with a grid layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

2.10.6 Using a grid layout within a coach view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

2.10.7 Grid view visual tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

2.10.8 Hiding grid cells. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

2.10.9 Reusing a grid layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

2.11 Using nested client-side human services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

2.12 Styling coaches using themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

2.12.1 Defining a custom theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

2.12.2 The Graphical Theme Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

2.12.3 The Source Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

2.12.4 Fine-grained and broad-brush styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

2.12.5 Style configuration options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

2.12.6 Applying a theme at run time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

2.12.7 Styling IBM Process Portal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

2.13 Displaying coaches in different languages (using localization). . . . . . . . . . . . . . . . . . 67

2.13.1 Defining a localization resource . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

2.13.2 Localizing user interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

2.14 Performance considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

2.14.1 Consider the expected browser version when designing coaches . . . . . . . . . . . 70

2.14.2 Avoid building large coaches with too many controls . . . . . . . . . . . . . . . . . . . . . 70

2.14.3 Minimize the number of server-side calls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

2.14.4 Use client-side human services instead of heritage human services . . . . . . . . . 71

2.14.5 Minimize the size of business objects in the UI. . . . . . . . . . . . . . . . . . . . . . . . . . 71

2.14.6 Judiciously use the Table control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

2.14.7 Pick an appropriate delay time for auto-complete fields . . . . . . . . . . . . . . . . . . . 72

2.15 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Chapter 3. Building controls using coach views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

3.1 Overview of a coach view structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

3.2 Developing coach view basic functions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

3.2.1 Defining and accessing data in the coach view . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Contents v3.2.2 Constructing the view of a coach view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

3.2.3 Programming the coach view event handler to control behavior . . . . . . . . . . . . . 88

3.2.4 Test coach view in a human service. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

3.3 Developing advanced functions of a coach view . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

3.3.1 Communicating with backend data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

3.3.2 Additional view layout attributes of the coach view. . . . . . . . . . . . . . . . . . . . . . . 117

3.3.3 Better support for the coach author in design time . . . . . . . . . . . . . . . . . . . . . . . 126

3.3.4 Developing coach views with existing UI libraries. . . . . . . . . . . . . . . . . . . . . . . . 137

3.4 Patterns of coach view development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

3.4.1 Configuration option with drop-down selection . . . . . . . . . . . . . . . . . . . . . . . . . . 138

3.4.2 Use LESS for theme participation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

3.4.3 Loading curtain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

3.4.4 Publishing and subscribing an event through a controller coach view . . . . . . . . 145

3.5 Performance considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

3.5.1 Ensuring the browser cache works. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

3.5.2 Using Prototype to reduce the memory footprint. . . . . . . . . . . . . . . . . . . . . . . . . 146

3.5.3 Using lazy loading. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

3.5.4 Reducing service calls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

3.5.5 Balancing UI design simplicity and usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

3.5.6 Do not mix controls written with different JavaScript libraries. . . . . . . . . . . . . . . 149

3.5.7 Avoiding unnecessary change-events processing . . . . . . . . . . . . . . . . . . . . . . . 149

3.5.8 Using custom Dojo build layer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

3.5.9 Handling editable and read-only modes differently. . . . . . . . . . . . . . . . . . . . . . . 149

3.6 Checklist for developing a custom coach view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

3.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Chapter 4. SPARK UI Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

4.1.1 Understanding the value of the SPARK UI Toolkits . . . . . . . . . . . . . . . . . . . . . . 154

4.1.2 Developer experience. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

4.1.3 Underlying patterns and principles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

4.1.4 Modern, lightweight, consistent across BPM versions . . . . . . . . . . . . . . . . . . . . 156

4.2 Understanding the IBM and Salient Process partnership . . . . . . . . . . . . . . . . . . . . . . 156

4.3 Basic BPM UI concepts with SPARK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

4.3.1 Controls and configuration properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

4.3.2 Methods, events, and addressing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

4.3.3 Optional data binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

4.3.4 Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

4.4 UI layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

4.4.1 Horizontal and vertical layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

4.4.2 Tabbing or stacking UI content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

4.4.3 Displaying modal content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

4.4.4 Wells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

4.5 Calling AJAX services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

4.5.1 Service Call control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

4.6 Responsiveness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

4.6.1 Classic responsiveness. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202