I imagine that the Custom HTML control that was part of the original Teamworks product was a begrudging addition to provide a last-resort safety net to accomodate user requirements and that the designers back then would wince at the technical knowledge that’s now required to build user interfaces in the latest evolution of the product.

I, on the other hand, started out my working life misusing the Custom HTML control to try and create the type of rich and intuitive interfaces that inhabit the technological mainstream nowadays. Notwithstanding the inevitable technical teething problems, Client Side Human Services are (in my opinion) the Way Forward. It would be nice though, if IBM could provide some kind of assurance that IBM BPM v9.x will not introduce another entirely new UI paradigm...

If you work with IBM BPM and you haven’t looked at Client Side Human Services then you need to go and watch this video:

Neil Kolan is like a Stephen Fry of the IBM BPM world and I think that IBM would do well to empower more (of his style of) evangelism of their platforms. The video is 53:19 long and although it may seem a little slow at times I wouldn’t remove any of the content. It will give you a solid foundation to start building Client Side Human Services (and hopefully highlight any areas where you need to learn more).

In an effort to add something to the video above I thought I would replicate Neil’s example using AngularJS instead of JQueryUI...

To create the Angular-based Dialog Custom Control...

1. Create a new Coach View called angular Dialog

2. In Overview check Supports a Label

3. Create a Web File using the latest Angular javascript (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js)

4. Create a Web File called angularDialog.js with the following contents:

5. Add both scripts (as Script Tag in HTML) in order to Included Scripts in the Behaviour tab of your Coach View

6. Add the following CSS to the Inline CSS in the Behaviour tab of your Coach View:

7. Add the following Javascript to the Load Event Handler in the Behaviour tab of your Coach View:

8. Add the following Javascript to the Change Event Handler in the Behaviour tab of your Coach View:

9. Create a Boolean Business Variable called visible (just as you did with the jQuery Custom Coach View)

10. Create a similar Layout to the jQuery Custom Coach View using the following markup (spread over two Custom HTML controls with a Content Box in the middle):

11. Embed the Custom Coach View in a Coach in your Human Service

I tried to replicate the design of Neil’s jQuery control (i.e. using a Content Box sandwiched between to Custom HTML controls) but this isn’t a natural fit with the way that either UI Bootstrap or Angular Material work (they either use inline content or external URLs, not existing DOM nodes). This is a real shame because both of those frameworks are very cool. I hope to write another blog when I figure out the best practices and how these rich UI frameworks can be better leveraged.

I believe that v8.5.7 provides better support and integration for all things Angular. I have been playing around with v8.5.5 (which can be a little quirky in the Case Designer web-based IDE).