IBM Case Manager v5.3.1's New Markup Widget - A New Super Hero Emerges?

Body

If you are like most people, the minute you find yourself with some extra space, you start looking for things to fill it up with.

This is a situation you may find yourself in as you start playing with the new layout feature in IBM Case Manager 5.3.1. As mentioned in a previous post, the new layout feature, with its flexible tab, column and title container widgets, lets you make better use of your ICM solution's screen real estate. The question then becomes "what can add now that I have the room?"

Custom page widgets are an obvious answer since they provide the best way of creating reusable components that deliver the exact capabilities needed by your solutions. The only catch is that they require a bit of development elbow grease to create. This is fine for feature rich widgets, but what if you just need a bit of text or graphics on your page? Although ICM's Website Widget has been used for that for a long time, it does require a separately managed web page to point at.

To address this, ICM 5.3.1 introduces a new Markup Widget. BOOM!

This widget gets added to your pages in the usual way and is then configured with, you guessed it, HTML markup, allowing it to display whatever your creativity can come up with. Just that alone would make this a pretty great new feature, but we didn't stop there.

The Markup Widget also supports an inbound widget wiring event that lets you push in the markup on the fly. Using this approach, you can catch outbound events from other widgets, generate up the markup dynamically in a Script Adapter Widget and then wire that into the Markup Widget for display. KA POW!

But like any great Super Hero, what you see on the surface often hides something infinitely more powerful. Wouldn't it be cool if not only could the Markup Widget display something interactive on the page, but interacting with it could also trigger events to other page widgets? Here's an example of just that!

Let's say we are building an ICM solution that allows our Super Heroes to use cases to track new Villains that try to disturb the peace. On our case search page, we want to provide a really fast way to enter a Villain name and find their cases in the Case List.

Add the Markup Widget to your Cases page and enter the following:

  <div>Hello, #{username}.</div><br>  <div>  Quick Villain Search:<br>  <input type="text" name="villain">  <input type="button" onclick="    var self = this;    /* This is the normal way you create a search payload that you can send to the Case List widget */  var getSearchPayload = function (solution,villain) {      var params = {};      payload = null;      params.ObjectStore = solution.getTargetOS().id;      var criterion1 = new ecm.model.SearchCriterion({'id': 'CmAcmCaseIdentifier', 'selectedOperator':            'STARTSWITH', 'dataType': 'xs:string', 'defaultValue' : '%', 'value': '%', 'values': ['%']});      var criterion2 = new ecm.model.SearchCriterion({'id': solution.getPrefix()+'_Villain', 'name' : 'Villain',            'selectedOperator': 'STARTSWITH', 'dataType': 'xs:string', 'defaultValue' : villain , 'value': villain , 'values': [villain ]});      params.criterions = [criterion1,criterion2];      params.CaseType = ''; /* How can this be all case types in the solution? Answer: Use empty string*/      params.solution = solution;      var searchPayload = new icm.util.SearchPayload();      searchPayload.setModel(params);      searchPayload.getSearchPayload(dojo.hitch(self, function(thePayload) {          payload = thePayload;      }));      return payload;  };    /* This is the trick to locate the ID of the Markup Widget object */  var getMarkupWidgetId = function (myNode) {      var parentNode = myNode.parentNode;      while (parentNode != null) {          if (parentNode.id && parentNode.id.indexOf('icm_pgwidget_markup') == 0)              return parentNode.id;          else              parentNode = parentNode.parentNode;      }      return null;  };    require(['dijit/registry'], function(registry) {      /* Get the name of the Villain we are searching for */      var villain = document.getElementsByName('villain')[0].value;  

  ​    /* Locate our page widget object so we can call methods on it */

      var markupWidget = registry.byId(getMarkupWidgetId(self));  

  ​    /* Call the widgets broadcast event to pass the payload to the Case List */

      markupWidget.onBroadcastEvent('icm.SearchCases', getSearchPayload(markupWidget.solution, villain));  

  ​    /* Just for fun, hide the Case Information widget the same way the standard Search Widget does */

      markupWidget.onBroadcastEvent('icm.CollapseRegion', 'trailing');  });  "  value="Submit">  </div>

Now you too can fulfill your childhood dreams and be a super hero to your IBM Case Manager users by providing them with the attractive, informative, and interactive case pages they deserve in a fraction of the time (tights optional). YEAH!