Write Service Instance Rendering and Detail Panel 

• This widget will be on the secondary/pop-up browser page. 
  • The Service List page will be the primary page, so the user can open multiple Service Instance Rendering and Detail pages.
• The search criteria fields are for display only, and they cannot be changed.
• The Detail panel is scrollable and display contents with the tag: value formt.
• Query a process instance with the matched 'serviceInstanceId' process variable.
  • get a process instande id: query bases on the process variable, 
    • GET /history/variable-instance/{variableValue}, where {variableValue} = 'serviceIntanceId' ;
  • query BPML XML based on a process instance id
    • GET /process-definition/{id}/xml
  • query the process instance detail such as process variables
    • GET /process-instance/{id}/variables
    • Display the process variables on the Service Instance Detail panel
  • query and activity instance (tree) for the process instance id
    • GET /process-instance/{id}/activity-instances
    • GET /history/activity-instance/{id}
    • The response provides child activity instance info. By using this we can find the parent and child process instnce id and definition id.
      • If the current process instance id has its parent, enable the Drill-Up button.
    • When a user clicks on a task, display the task varables
      • GET /task/{id}variables
      • When the task activity type is call activity, it enables the Drill-Down button.
  • • • • Render the process instance diagram with the retrieved XML.
          • use bpmn.io javascript library for the XML rendering and event attachments for process instance tasks.

• bpmnViewer.importXML (xmlDiagram, function(err) { if (err) \{ ... }

var canvas = bpmnViewer.get('canvas');

canvas.zoom ('fit-viewport');

var eventBus = bpmnViewer.get('eventBus');

// you may hook into any of the following events
var events = [
    'element.hover',
    'element.out',
    'element.click',
    'element.dblclick',
    'element.mousedown',
    'element.mouseup'
];

events.forEach(function(event) {

eventBus.on(event, function(e) {

log(event, 'on', e.element.id);

• The Close button is always enabled.