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 Process Path Visualizer shows the following relations:

• 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

Note that the Process Path Visualizer doesn't show separate instances of the model elements.

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

The elements shown on the diagram are interacted with in the following way:

• Left-clicking an element that is not in the path will add it to the path with its relations and related elements shown. The element will also be selected.
• Left-clicking an element that is in the path will hide the related elements and the relations.
• Shift + Control + left-clicking an element that is in the path will remove the element from the path.
• Shift + left-clicking an element will add the element to the current selection.
• Control + left-clicking elements will toggle the selection of the element.
• Alt + left-clicking an element will select the element and its related elements.
• Holding down the left mouse button and then dragging on an area that doesn't contain an element will enable the area selection that can be used to select multiple elements.
• Pressing the left mouse button on an element and then dragging will move the selected element(s).
• Pressing the left mouse button on an empty area and then dragging will move the entire diagram.
• Mouse wheel scrolling will zoom the diagram

Information about the selected path elements, and the layout of the diagram is stored in the session context in the context variable named pathVisualizerData. You can bookmark the view to store the diagram state for later use. Another option is to copy the value of the pathVisualizerData context variable from the session context, store the value somewhere, and when later using the view, paste the value into the pathVisualizerData context variable in the session context.

- 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