Process Path Visualizer Properties

WiP

The Process Path Visualizer is a presentation object that queries QPR ProcessDesigner and QPR EnterpriseArchitect data from QPR Suite Web Service and visualizes the relations between elements as boxes and arrows between the boxes. The visualization is on the model level, i.e. instances of elements are ignored.

The relations that are shown are:

• Connector. There are two different behaviors depending on whether the QPR Suite Web Service you are using supports the "flowroute" attribute or not:
  1. "Flowroute" attribute supported: if a connector comes from or goes to a different diagram, all diagrams in the connector's path through the process hierarchy are shown as targets for the connector relation.
  2. "Flowroute" attribute not supported: Ii a connector comes from or goes to a different diagram, the connector is shown only between the from and to elements.
• Custom attribute relation
• System relations, i.e.: attachedobjects, attachedtoobject, flows, from, fromprocesslevel, informationitems, mappeddestinationinterface, mappedsourceinterface, modelobjects, notes, organizationunit, owner, persons, processsteps, resources, to, toprocesslevel

Presentation Tab

On the Presentation tab, you can define the visual properties of the elements and relations shown on the diagram.

It's possible to define different settings for different types of element, so that e.g. elements of an "Activity" element type and elements of a "Risk" element type are shown in different colors. The settings is a JSON string in the following format. The main object section contains default settings for the selected (in the path) and the unselected (not in the path) elements and relations, and element type specific settings.

The graphical settings for individual elements are:

1. If element type specific settings exist, use those
2. If default settings exist, use those
3. Otherwise, use hard coded system settings

{
  "selected": <<element>>,
  "unselected": <<element>>,
  "relation": <<relation>>,
  "elementTypes": {
    "<element type name>" : {
      "selected": <<element>>,
      "unselected": <<element>>,
    }
  }
}

element: {
  "fill": css color string, or <<brush>>,
  "stroke": null, css color string, or <<brush>>,
  "hover": css color string, or <<brush>>,
  "strokeWidth": number
}

brush:
{
  "gradient": <"Linear" or "Radial">,
  "stops": {
    "0.0": css color string,
    "0.3": css color string,
    "1.0": css color string
  },
  "start": <<spot>>, // "start" and "stop" are used for "Linear" gradient brushes only
  "end": <<spot>> // If not present, opposite of "start" is used
}

spot: <"Top", "Bottom", "Left", "Right", "TopLeft", "TopRight", "BottomLeft", or "BottomRight">

relation: {
  "fill": css color string, or <<brush>>,
  "stroke": null, css color, or <<brush>>,
  "strokeWidth": number,
  "fromArrow": <<arrow>>,
  "toArrow": <<arrow>>
}

Example Settings

{
  "selected": {
    "fill": "#A0A0A0",
    "stroke": "#FF0000",
    "strokeWidth": 2,
    "hover": {
      "gradient": "Linear",
      "stops": {
        "0.0": "#FF0000",
        "0.3": "#FFFFFF",
        "0.5": "#00FF00",
        "0.7": "#FFFFFF",
        "1.0": "#0000FF"
      },
      "start": "Top",
      "end": "Bottom"
    }
  },
  "unselected": {
    "fill": {
      "gradient": "Linear",
      "stops": {
        "0.0": "#FF0000",
        "0.3": "#FFFFFF",
        "0.5": "#00FF00",
        "0.7": "#FFFFFF",
        "1.0": "#0000FF"
      },
      "start": "Left",
      "end": "Right"
    },
    "stroke": "#00FF00",
    "strokeWidth": 5,
    "hover": {
      "gradient": "Radial",
      "stops": {
        "0.0": "#FF0000",
        "0.3": "#FFFFFF",
        "0.5": "#00FF00",
        "0.7": "#FFFFFF",
        "1.0": "#0000FF"
      }
    }
  },
  "relation": {
    "stroke": "#A07030",
    "strokeWidth": 2,
    "fromArrow": "triplefeathers",
    "toArrow": "opentriangle"
  },
  "elementTypes": {
    "Risk": {
      "selected": {
        "fill": "#808080",
        "hover": "#FFFFFF",
        "stroke": "black",
        "strokeWidth": 1
      },
      "unselected": {
        "fill": "red",
        "hover": "rgb(255, 128, 128)",
        "stroke": "#000000",
        "strokeWidth": 1
      }
    },
    "Core Process": {
      "selected": {
        "fill": "#D0D0D0",
        "stroke": "black",
        "strokeWidth": 1
      },
      "unselected": {
        "fill": "green",
        "stroke": "rgb(128, 128, 128)",
        "strokeWidth": 3
      }
    }
  }
}

Defining the Initial Path Element

The initial path element is defined by selecting a value for the sys:eapdElement context variable. Note that you may need to define the sys:eapdModel and sys:eapdElementType context variable values before you can define a value for the sys:eapdElement context variable.

After the sys:eapdElement context variable value is defined, the selected element is set as the initial path element, and its relations and related elements are shown on the diagram. Changing the value of sys:eapdElement context variable again will cause the diagram to be cleared and the new initial path element and its relations being drawn on the diagram.

Interaction with Boxes and Arrows

MO93162470 Clicking an element that is not in the path will add it to the path MO98345298 The relation visualizer will show all related elements of the elements in the selected path MO1491353723 When an element is added to the selected path, the element and all new related elements are set as selected MO95569137 Control-selecting elements will toggle the selection

MO92609881 An element and its related elements can be selected by alt-clicking the element MO97271424 Area selection can be used to select multiple elements MO91996093 An element can be removed from the path by shift-control clicking it

MO97365486 Elements can be moved by dragging them MO181991945 Related elements can be hidden and/or displayed by clicking a path element MO92211658 Shift-selecting elements will add them to current selection MO96802574 The diagram can be moved by dragging it MO91022041 The diagram can be zoomed with mouse wheel MO97525757 Information about the selected path elements, and the layout of the diagram is stored to a context variable

- Diagram shows either selected element types/relations (include mode) or excludes selected element types/relations (exclude mode) (it not able to go beyond the excluded relations) - Element types can be hidden, meaning that the all the hidden element relations are connected to each other (usecase: hide connector objects) - When user changes these selections, diagram is updated - Different GoJS layout options are available (see PAPO) - Object id of a selected can be bound to a context variable - List of "expanded" objects can be set in the configuration - Boxes can be moved in the diagram - Relation names can be mapped to other names