QPR BusinessManagementSystem

From QPR ProcessAnalyzer Wiki
Jump to: navigation, search

QPR BusinessManagementSystem is a QPR UI Application that supports management of operational development, operations and digitalization. QPR BusinessManagementSystem is a modern, responsive HTML5 application that provides visibility to your organization through concise and visually appealing views.

Features

Implemented QPR BusinessManagementSystem features in the latest (2019.5.0) release:

  • "X-ray" views showing selected elements through model structures: e.g. show all concepts utilized in all processes under "Customer"-area;
  • Configuration views for easier configuration of QPR BusinessManagementSystem.
  • Several UX enhancements
  • The release numbering scheme was aligned with QPR ProcessAnalyzer release numbering; latest release is now 2019.5 while the previous was 2019.2.

Implemented QPR BusinessManagementSystem features in 2019.2.0 release:

  • BusinessManagementSystem configurator view
  • Element sorting based on attribute values
  • Legend and filtering improvements
  • Process details modal view
  • Search elements through drilldown hierarchies

Implemented QPR BusinessManagementSystem features in 2019.1.0 release:

  • Navigation and exploration of QPR ProcessDesigner/EnterpriseArchitect/Metrics models;
  • Configurable visualizations for model elements through flexible templates;
  • Flexible responsiveness (through Bootstrap);
  • Configurable behaviour for model element cards: open document search, show information items etc.
  • Dynamic legends and interactive filters.

Forthcoming features (tentative):

  • Risk management views
  • Different visualizations for analysis of operating models and model structures: e.g. end-to-end process and integration views;

Demo

QPR BusinessManagementSystem demo

For End Users

Preface

QPR BusinessManagementSystem gives to the end users the possibility to explore and investigate their organization and operating models from different points of view. By drilling down into process or capabilities for example, the end users may study the different levels in the hierarchy, gather information on the elements, and discover documentation and other valuable information related to the elements.

QPR BusinessManagementSystem has a flexible configuration model and because of that utilizing QPR BusinessManagementSystem in various areas of business is efficient. All settings for usage of QPR BusinessManagementSystem in versatile business environments may be done by reconfiguration of the system.

The rest of this section explains the basic principles of usage the system for end users.

Usage

The view of QPR BusinessManagementSystem is subdivided into several sections: the header section, the breadcrumb path section, the legend section, the main view section and the additional details section. This part of the document will proceed through all the sections and describe the features of each one.

Pic sections.png

The Header Section

The dropdown menu and the title of the drill down view situates on the left side of the header section.

The dropdown menu opens with click on the icon and contains all the views available for drilling down.

The purpose of the dropdown menu is to select the view for drilling down.

Next to dropdown menu icon situates the title of the drilled down view.

The title will change on different view selection.


Four action buttons situates on the right side of the header section. The buttons with their purposes are listed below.

  • The click on the mode switch button switches the view between hierarchical and expanded modes
  • The click on the help button opens the new window of QPR Knowledge Base
  • The click on the user button displays the name of the current user and ropens the dropdown menu with options to change user password and to signout from the system
  • The click on the settings button displays the QPR UI version number and open dropdown menu with options to open links to QPR main page or QPR community page and show or hide the header with development toolbar

The Breadcrumb Path Section

The breadcrumb path section situates under the header section.

The breadcrumb path section contains information on current position in drilldown hierarchy.

The names of hierachical upper levels are chained in breadcrumb with / -separator.

The names of levels in breadcrumb path are links and user may go directly to any upper level in hierarchy by clicking the link.

Pic headersection.png

The Legend Section

The legend sections situates under the breadcrumb path section.

The legend section is optional and any drilldown view may be configured not to contain the legend section.

The legend section content is based on categorization criteria in the drilldown view configuration.

All items and subitems in drilldown view are classified on the base of categorization criteria.

Categorisation information is then presented in the legend section with use of different colors.

Usually categorization criteria is type -attribute but any attribute(s) may be selected for categirization criteria in configuration.

Multiple attributes may be selected for categorization criteria.

When multiple attributes is selected for categorization criteria, filtering is possible also by individual attribute values selecting appropriate attribute values from dropdown boxes as it is presented in the following picture where both status and datatype -attributes are set for categorization criteria.


Pic legend.png


Only visibly applicable colors are presented in legend.

The information of common amount of currently visible items and subitems is concatenated with legend item title.

The single click on the item in the legend section will hide and show corresponding items and subitems in the main view section.

When items and subitems in the main view are hidden, the color of the legend item becomes dimmer.

The single click on the leftmost item in the legend section hides and shows all items and subitems in the main view section.

The Main View Section

The main view section situates under the legend section.

The main view section displays items of the current hierarchical level in correspondance with selections in the legend section.

Two different modes of presentation may be applied in the main view section - the hierarchical mode and the expanded mode.

The subitems inside of the items are presented in expanded mode but not in hierarchical mode.

These presentation modes may be applied either to all the items of the view with click on mode change icon in the header section or only to selected item(s) with click on mode switch icon in the item card.

When the legend section is in use then the items and subitems are colored in accordance with coloring information in the legend section.

Pic processcard.png

The Item Card

The information on the items in the main view section is presented on the item cards. The item is colored in accordance with its categorizing color. The item card may contain (depending of its configuration)

  • the title of the item
  • the tooltip with the description of the item
  • information on common amount of subitems
  • the link to expand subitems (if the item has subitems)
  • the action button to drill down (if the item has subitems)
  • the action button to open the additional details pane
  • the action button to open links to external documents
  • the action button to open links of information items
  • the action button to move to another QPR UI view

The Additional Details Section

The additional details section situates at the bottom of the screen.

Pic detailsdiv.png

This section contains additional information on the selected item in accordance with the drilldown view configuration.

This section may be hidden. It does not appear on the drilldown view initial loading and may be opened only with the action button on process card.

The additional details section may be closed either by the repeated click on the action button or with click on "X" -sign in the upper right part of the pane

The additional details section may be configured to appear in modal mode also

Pic detailsmodal.png

Action Buttons For Additional Functionalities

Some action buttons presented on the right side of view action bar provide additional functionalities related to BMS, such as

  • X-ray view for showing underlying items of selected elements
  • Text search for elements through drilldown hierarchies
  • Element sorting based on available attributes
  • Business Management System configurator

Pic actionbuttons.png


Current section will explain the above mentioned functionalities.

X-ray View

The X-ray view enables the user to see in a one concise view all the underlying items that are located under selected elements. This capability can be utilized e.g. for discovering all capabilities within a certain hierarchical capability area, or for communicating all processes within selected business functions.

The X-ray view is enabled by clicking on the X-ray view button on the toolbar. Click of the button opens a sidebar that contains the X-ray view tool.

X-rayview.png

Clicking on a item on the X-ray view pane will open a modal view that shows the locations of the clicked element, as shown in the figure below. If the item has a drilldown link configured to it, clicking on the link will nagivate to the corresponding place in the drilldown hierarchy.

X-rayview2.png

Text Search For Elements Through Drilldown Hierarchies

Text search box appears with click on the text search button

Pic searchtextbox.png


Text search looks for the inputed text from all text attributes in every element of hierarchy. Search results will be presented in the modal window.

Pic textsearchresult.png

If found element is presented in different views in hierarchy then the paths for all these views will be listed.

Every drilldown path in the list presents the link to the drilldwown view.

By click on the link the appropriate drilldown view will be opened.

When text is found from other attribute than element name (for example - from "description" -attribute) then the attribute name will be displayed after element name in parenthesis

Element Sorting Based On Available Attributes

This functionality gives to the user the possibility to arrange elements presented in the drilldown view in accordnace with user defined ordering settings. The following popup window appears with click on the button.

Pic orderingfields.png

From this window user may select attributes and ordering directions to sort elements in drilldown view

Business Management System Configurator

With BMS configurator user may configure drilldown path and some additional settings of drilldown view. Then the configuration may be copied to the clipboard in JSON format.

The process of BMS configuration is iterative.

BMS configurator opens in the modal window

At first step the user should select the model.

Pic configurator model.png


After model selection (and confirming the selection with click on "CONTINUE" -button), user may set some additional information such as view title, header for top components, categorization criteria, ordering fields' Default value for categorization criteria is type. Default values for ordering fields are name and type.

Pic configurator upperpart.png


Then user have to select either initial element of hierarchy by inputting its id or symbol or initial element type from the dropdown list of element types. Multiple element types may be used simultaneously.


Pic configurator byidorsymbol.png


After that with click on the "Continue" -button user will proceed to the next configuration stage where relation and/or custom attribute types may be selected. Additional attributes 'recursion count / recursive / keeporiginals' may be set for relation.

Pic configurator selectrelation.png


Configuration window may become very long because of many configuring parameters and separate parts of configuration window may be hidden or shown again with click on their headers.

Currently configured drilldown path will be displayed in the header part of the configuration window.

Pic configurator pathinheader.png

On the following iterations the selected custom attributes may be set for categorization criteria and/or ordering fields by checking boxes in upper part of configuration window.

Normally available relations appears in dropdown list and available custom attribute types appears as list of checkboxes.

There are two special cases of element types. They are "Element" and "Process step" element types . Relation and custom attribute types for them need to be inputed into the text boxes as it is presented on the picture. Custom attribute types for them will not appear in the lists of available categorization criteria and ordering fields

Proceeding with the relation selection by clicking "Continue" -button user moves to the next level of configuration where user may select element type(s), relation and custom attribute(s) for the following level(s) in drilldown view hierarchy.


Pic configurator inputrelation.png

In "Templates" -section of configuration window user may modify rendering templates for item/subitem and structure with settings and templates for additional details in JSON format. Default values for templates will be fetched from context session variables. By click on "Set template" -button the template changes will be attached to configurator object.

Pic configurator templates.png

After configuration has been done, it will be applied by clicking on "Apply" -button. Configuration may be reset by clicking on "Reset" -button and discarded by clicking on "Discard" -button. By clicking on "Copy" -button configuration will be copied to the clipboard in JSON format

Pic configurator buttons.png


JSON Format For Drilldown View Configuration

With click on the "Copy" -button the configuration will be placed to clipboard in JSON format. Then the copied configuration may be pasted into any text editor and used for setting context variables.

This configuration structure includes the following attributes as key-value -pairs

  • selectedModel (the id number of the selected model)
  • drillDownPath (see Configuring Drill Down Paths )
  • HEADER_TOP_COMPONENTS (the title for the top level elements in the breadcrumb title)
  • categorizationCriteria (see The Legend Section. Multiple values separate with spaces)
  • orderingFields(see Element Sorting Based On Available Attributes. Multiple values separate with spaces)
  • viewtitle (The title of drilldown exploration view which is visible to the users)
  • jsrenderTemplateForItem (see Download Example Configuration Files and Configure BusinessManagementSystem )
  • jsrenderTemplateForSubitem (see Download Example Configuration Files and Configure BusinessManagementSystem )
  • detailsDivProperties (see Download Example Configuration Files and Configure BusinessManagementSystem )

The skeleton of JSON structure for drilldown view configuration is presented below

[
	{
		"key": "selectedModel",
		"value": "..."
	},
	{
		"key": "drillDownPath",
		"value": "..."
	},
	{
		"key": "HEADER_TOP_COMPONENTS",
		"value": "..."
	},
	{
		"key": "categorizationCriteria",
		"value": "..."
	},
	{
		"key": "orderingFields",
		"value": "..."
	},
	{
		"key": "viewtitle",
		"value": "..."
	},
	{
		"key": "jsrenderTemplateForItem",
		"value": "..."
	},
	{
		"key": "jsrenderTemplateForSubitem",
		"value": "..."
	},
	{
		"key": "detailsDivProperties",
		"value": "..."
	}
]

For Developers

Install Deployment Package

  1. Download the deployment package (link on the right) and extract its contents to a temporary folder.
  2. Go to QPR UI folders view: http(s)s://SERVERNAME/ui/#/folders/ (replace SERVERNAME with the hostname of your QPR UI server).
  3. In QPR UI folders view, delete or rename possible previous versions of the QPR BusinessManagementSystem folders.
  4. Create a folder for the new QPR BusinessManagementSystem deployment and give it a name such as QPR BMS.
  5. Go to your new folder.
  6. Import the QPR BusinessManagementSystem view to the QPR UI folder from your temporary folder.
  7. Open the QPR BusinessManagementSystem view (Home view) using the following link: http(s)://SERVERNAME/ui/#/dashboard?sys:dashboardIdentifier=/QPR%20BMS/BMSHome (replace SERVERNAME with the hostname of your QPR UI server).

Download Example Configuration Files

QPR BusinessManagementSystem has a flexible configuration mechanism that allows the application to be used in varying contexts and with different enterprise architecture models, for example. To give developers a place to start, the most important configuration artefacts are available as a configuration file package. The files that are in JSON and HTML formats can be edited using standard editors such as Notepad or Atom. After editing the files, the contents can be copy-pasted to the QPR BusinessManagementSystem context variables as described in here.

The configuration artefacts are developed over the standard Dentorex EA and Metrics models that come with the QPR Suite.

The QPR BusinessManagementSystem configuration file package contains the following configuration artefacts:

  • detailsconfig.json Provides an example configuration for the additional details panel described in the end-user documentation. Details configurations are defined per element type.
    • Apply it for detailsDivProperties context variable.
  • drilldownviews.json Provides an example configuration for the demonstration drilldown views.
    • Apply it for drillDownViews context variable.
  • itemtemplate.html An example configuration for element item cards with embedded SVG-icons for different buttons (Open document search; Show information items; Drill down etc.);
    • Apply it for jsrenderTemplateForItem context variable.
  • itemtemplate_fa.html An example configuration for element item cards with icons based on FontAwesome;
    • Apply it for jsrenderTemplateForItem context variable.
  • subitemtemplate.html An example configuration for subitems that are visible in expanded items.
    • Apply it for jsrenderTemplateForSubitem context variable.
  • xraytemplate.html An example configuration for X-ray view.
    • Apply it for jsrenderTemplateForXray context variable.

Configure BusinessManagementSystem

Business Management System needs for some variables to be found from its context. This document contains the list of the context variables with descriptions and examples.

The activeView -context variable must be presented for view open. The content of this variable does not play significant role currently and may be empty. It is resreved to be used in the future. In the future this variable will define the starting mode of view. Currently the new view will be opened in hierarchical mode always.

The HEADER_TOP_COMPONENTS -context variable contains the name of the top level of hierarchy in breadcrumb-path title. The example of possible value is Home


The categorizationCriteria -context variable contains the criteria for categorization. Items will be catrgorized on the base of criteria. Criteria may consist of single value or multiple values separated with space. Categorization criteria will be presented in different colors in the legend part of the view and items may be hidden and displayed based on the categorization criteria. If categorizationCriteria -context variable contains empty value, then legenda part will not appear on the screen. The examples of possible values are ""(empty value), "type", "datatype status"

The detailsDivProperties -context variable contains the configuring settings for rendering the div-tag to display additional information at the bottom of the screen. The configuration settings are presented in JSON-mode. They include 'Detials Div' -rendering template named "jsrender" and a collection of WS-queries to fetch the additional information from QPR Suite. Every query in json-structure contains the field "title" and standard fields of WS-query: "query", "attributes", "sortby", "criteria", "options". To get access to information returned by queries in jsrender-template queries should be ordering numbered starting from 0: query0, query1, query2 and so on. In jsrender - template the structure
{{for query2}}{{:name}}{{:description}}{{/for}}
will print all fetched values for the fields "name" and "description" for the second query. The titles for queries may be gotten in jsrender-template with variable "sectionTitle" + query number. So, the title of first query may be accessed with "{{:sectionTitle0}}" -variable. In query-field "%id%"- character sequence will be replaced by id-number of the component and "%symbol%"- character sequence will be replaced by symbol of component The example of the json-structure for configuration is presented below.
{
	"jsrendertemplate": "<div id=\"detailsFrame\" class=\"detailsFrame row\"><div id=\"detailsCommonTitle\" class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\"><h3 align=\"center\">{{if name}}{{:name}}{{/if}} <span title=\"Close\" style=\"cursor:pointer; float:right;\"{{jsrTagOnclickDetailspaneClose /}}>X</span></h3></div>{{if query0}}<div id=\"detailsSection0\" class=\"detailsSection col-xs-12 col-sm-6 col-md-4 col-lg-3\"><h5 align=\"center\">{{:sectionTitle0}}</h5>{{for query0}}{{if owner}}<h6 align=\"left\">Owner: {{:owner}}</h6>{{/if}}{{if status}}<h6 align=\"left\">Status: {{:status}}</h6>{{/if}}{{if reviewer}}<h6 align=\"left\">Reviewer: {{:reviewer}}</h6>{{/if}}{{if reviewed}}<h6 align=\"left\">Reviewed: {{:reviewed}}</h6>{{/if}}{{if description}}<h6 align=\"left\">Description: {{:description}}</h6>{{/if}}{{/for}}</div>{{/if}}{{if query1}}<div id=\"detailsSection1\" class=\"detailsSection col-xs-12 col-sm-6 col-md-4 col-lg-3\"><h5 align=\"center\">{{:sectionTitle1}}</h5>{{for query1}}<h6 align=\"left\">{{:name}}: {{:description}}</h6>{{/for}}</div>{{/if}}{{if query2}}<div id=\"detailsSection2\" class=\"detailsSection col-xs-12 col-sm-6 col-md-4 col-lg-3\"><h5 align=\"center\">{{:sectionTitle2}}</h5>{{for query2}}<h6 align=\"left\">{{:name}}: {{:description}}</h6>{{/for}}</div>{{/if}}</div>",
	"queries": [
		{
			"title": "Properties",
			"query": "[%id%]",
			"attributes": "name,symbol,id,description,AuthoringandReviewAttributes.Lastreviewdate.stringvalue (as=\"reviewed\"), AuthoringandReviewAttributes.Owner.value (as=\"owner\"),AuthoringandReviewAttributes.Reviewer.value (as=\"reviewer\"), AuthoringandReviewAttributes.ReviewStatus.value (as=\"status\")",
			"sortby": "name",
			"criteria": "",
			"options": ""
		},
		{
			"title": "Applications",
			"query": "[%id%].subobjects.Filter(include=\"ApplicationComponent\")",
			"attributes": "name,fullid,description",
			"sortby": "name",
			"criteria": "",
			"options": ""
		},
		{
			"title": "Data",
			"query": "[%id%].subobjects.Filter(include=\"ConceptualDataEntity\")",
			"attributes": "name,fullid,description",
			"sortby": "name",
			"criteria": "",
			"options": ""
		}
	]
}

The drillDownPath -context variable contains the drilling down configuration. All items of presented hierarchy will be fetched from QPR Suite based on this context variable. Structure of this context variable is described in "Configuring Drill Down Paths" -part The examples of The drillDownPath -context variable possible values are presented below

[BusinessFunction]{description}/relationends.aggregationfrom/[BusinessProcessArea]{description}/subobjects/[Element]
[BusinessProcessArea]{description}/relationends.aggregationfrom/[BusinessProcess]{description}/childobjects(recursive=1, recursionlevel=-1,keeporiginals=1)/[ProcessStep]{description}
[CapabilityArea]{description, typename(as=\"datatype\")}/relationends.aggregationfrom/[CapabilityArea|ConceptualDataEntity]{description, typedata.stringvalue(as=\"datatype\")}/relationends.aggregationfrom/[Element]{description, typedata.stringvalue(as=\"datatype\")}" 
[CapabilityArea]{description, typename(as=\"datatype\")}/relationends.aggregationfrom/[CapabilityArea|ConceptualDataEntity]{description, typedata.stringvalue(as=\"datatype\"), AuthoringandReviewAttributes.ReviewStatus.value(as=\"status\")}/relationends.aggregationfrom/[Element]{description, typedata.stringvalue(as=\"datatype\"), AuthoringandReviewAttributes.ReviewStatus.value(as=\"status\")}
[ApplicationService]/relationends.realizationfrom/[ApplicationFunction]/relationends.assignmentfrom/[ApplicationComponent]

The drillDownViews -context variable contains settings in json format for multiple drilldown views accessible in the application. The json structure contains settings of every view as separate object. The object contains label, icon and variables -properties. Label and icon are to be shown in the dropdown menu of application for selection the drilldown view to be presented. The icon name may be selected from font awesome icons 5. For the list of available icons look at https://www.w3schools.com/icons/icons_reference.asp. Variables -property contains an array of objects to be set as session context variables. The variable -objects contain pairs "key-value". The meanings of them is described in this document. The example of the drillDownViews -context variable is presented below.

Most notably, the variables section contains typically following declarations:

  • categorizationCriteria: defines which element attributes (one or more) are considered as categorizing properties. Categorization criteria of typename for example categorizes the elements based on the type of the modelling element;
  • drillDownPath: defines the drilldown path as described above;
  • selectedModel: declares which model is utilized for the view, defined as a MEA identifier;
  • viewTitle: a user-friendly name for the view that is shown in the toolbar when the view is opened;
  • xrayFields: defines the categorization criteria applicable for the X-ray view. A comma-separated string of attribute names.
[{
  "label": "ProcessExplorer",
  "icon": "compare",
  "viewIdentifier": "BMSHome",
  "variables": [{
    "key": "drillDownPath",
    "value": "[CoreProcess]{description,flowcharturl}/subprocesscontents/[ProcessStep|Element]{description}/subprocesscontents(recursive=1, recursionlevel=-1,keeporiginals=1)/[ProcessStep]{description}"
  }, {
    "key": "selectedModel",
    "value": "PG.1541563169"
  }, {
    "key": "HEADER_TOP_COMPONENTS",
    "value": "Core processes"
  }, {
    "key": "categorizationCriteria",
    "value": "type"
  }, {
    "key": "viewtitle",
    "value": "ProcessExplorer"
  }, {
    "key": "xrayFields",
    "value": "typename"
  }]
}, {
  "label": "RiskExplorer",
  "icon": "compare",
  "viewIdentifier": "BMSHome",
  "variables": [{
    "key": "drillDownPath",
    "value": "[Risk]{description}/controlsforrisk/[Control]{description}/activityforcontrol/[Activity]{description}"
  }, {
    "key": "selectedModel",
    "value": "PG.1541563169"
  }, {
    "key": "HEADER_TOP_COMPONENTS",
    "value": "Risks"
  }, {
    "key": "categorizationCriteria",
    "value": "type"
  }, {
    "key": "viewtitle",
    "value": "RiskExplorer"
  }, {
    "key": "xrayFields",
    "value": "typename"
  }]
},{
  "label": "ScorecardExplorer",
  "icon": "compare",
  "viewIdentifier": "BMSHome",
  "variables": [{
    "key": "drillDownPath",
    "value": "[Scorecard]{description}/measures/[Measure]{description, rangecolor, rangename, periodname, periodlevelname, unit, portalurl}"
  }, {
    "key": "selectedModel",
    "value": "SC.1938773693"
  }, {
    "key": "HEADER_TOP_COMPONENTS",
    "value": "Scorecards"
  }, {
    "key": "categorizationCriteria",
    "value": "rangename"
  }, {
    "key": "viewtitle",
    "value": "ScorecardExplorer"
  }, {
    "key": "xrayFields",
    "value": "typename"
  }]
}]
  

The jsrenderTemplateForItem contains jsrender-template for presentation of single item in drilling down hierarchy. For understanding of jsrender-template structure access the JSRender documentation at https://www.jsviews.com. jsrender-template may include custom tags. The specification on jsrender custom tags look from "jsrender-custom-tags-in-process-explorer-specification.txt" -document. The example of the jsrender template for item is presented below.

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 {{:cssClass}} masonry-column" onmouseenter="$(this).find('.cardcontrols').fadeTo(400, 1.0);" onmouseleave="$(this).find('.cardcontrols').fadeTo(100, 0.1);">
	<div class="panel" id="{{:symbol}}" style="background: rgba(255,255,255,1); border: 0px solid #cccccc; box-shadow: -webkit-box-shadow: 3px 3px 6px 1px rgba(0,0,0,0.16); -moz-box-shadow: 3px 3px 6px 1px rgba(0,0,0,0.16); box-shadow: 3px 3px 6px 1px rgba(0,0,0,0.16);">
		<div class="panel-heading" style="min-height: 2em; text-align: center; color: black!important; background: {{:categoryColor}}!important; padding: 2px;">
			<h3 class="panel-title" style="line-height: 1.1em; font-size: 12px; font-family: Segoe UI; font-weight: 600; vertical-align: middle">{{:type}}</h3>
		</div>
		<div class="panel-body {{:clickable}}" style="padding: 0px; overflow-y: hidden;">
			<div style="text-align: center; padding-top: 1em; height: 3.5em; font-size: 14px; font-weight: 600; line-height: 1.1em; border-bottom: 1px solid #cccccc;">{{:name}}</div> {{if clickable}} <div style="text-align: center; min-height: 45px; height: auto; font-size: 12px; font-weight: 600;"> {{if activeView!="exploded"}} <span title="Expand elements" {{jsrTagOnclickExpand /}} >Elements <span class="badge" style="padding: 2px 7px; font-size: 10px; background-color: #cccccc">{{:itemCount}}</span>
				</span>
				<br/>
				<span id="triangle_{{:symbol}}" style="width: 0; height: 0; border-style: solid; border-width: 8px 8px 0 8px; border-color: #007bff transparent transparent transparent"> </span> {{/if}} <div class="expandable" style="display: none; margin: 0px; padding: 0px; width: 100%;"/>
			</div> {{else}} <div style="text-align: center; height: 45px; font-size: 12px; font-weight: 600;"> {{:description}} </div> {{/if}} </div>
		<div class="panel-footer">
			<span {{jsrTagOnclickDetailspane /}}>
				<svg class="icon detailsIcon detailsIcon{{:symbol}}" width="40px" height="40px" id="detailsLink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67.35 67.35">
					<defs>
						<style> .cls-1details { fill: #1d8bd0; } .cls-2details { fill: #fff; } </style>
					</defs>
					<g id="Layer_2" data-name="Layer 2">
						<title>Details</title>
						<g id="Layer_1-2" data-name="Layer 1">
							<g id="Symbol_7_4" data-name="Symbol 7 4">
								<circle id="Ellipse_14" data-name="Ellipse 14" class="cls-1details" cx="28.67" cy="28.67" r="28.67" />
							</g>
							<rect class="cls-2details" x="15.79" y="15.67" width="11.27" height="11.27" />
							<rect class="cls-2details" x="30.29" y="15.67" width="11.27" height="11.27" />
							<rect class="cls-2details" x="15.79" y="30.4" width="11.27" height="11.27" />
							<rect class="cls-2details" x="30.29" y="30.4" width="11.27" height="11.27" />
						</g>
					</g>
				</svg>
			</span>
			<span {{jsrTagOnclickDocumentslink url="http://google.com/search?q=arg0" name /}}>
				<svg class="icon documentsIcon documentsIcon{{:symbol}}" width="40px" height="40px" id="documentLink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67.351 67.351">
					<defs>
						<style> .cls-1document { fill: #1d8bd0; } .cls-2document { fill: #fff; stroke: #fff; } </style>
					</defs>
					<g id="Symbol_7_4" data-name="Symbol 7 – 4" transform="translate(-3916.313 7033)">
						<title>Documents</title>
						<circle id="Ellipse_14" data-name="Ellipse 14" class="cls-1document" cx="28.675" cy="28.675" r="28.675" transform="translate(3916.313 -7033)"/>
						<g id="Symbol_1_1" data-name="Symbol 1 – 1" transform="translate(3916.313 -7033)">
							<g id="Group_113" data-name="Group 113">
								<path id="Path_30" data-name="Path 30" class="cls-2document" d="M17.471,10.7H5.3a.5.5,0,0,0,0,1H17.371a.471.471,0,0,0,.5-.5A.456.456,0,0,0,17.471,10.7Z" transform="translate(18.87 14.176)"/>
								<path id="Path_32" data-name="Path 32" class="cls-2document" d="M17.471,14.5H5.3a.5.5,0,0,0,0,1H17.371a.471.471,0,0,0,.5-.5A.456.456,0,0,0,17.471,14.5Z" transform="translate(18.87 14.167)"/>
								<path id="Path_33" data-name="Path 33" class="cls-2document" d="M17.471,18.4H5.3a.5.5,0,0,0,0,1H17.371a.471.471,0,0,0,.5-.5A.456.456,0,0,0,17.471,18.4Z" transform="translate(18.87 14.158)"/>
								<path id="Path_34" data-name="Path 34" class="cls-2document" d="M17.471,22.3H5.3a.5.5,0,1,0,0,1H17.371a.471.471,0,0,0,.5-.5A.456.456,0,0,0,17.471,22.3Z" transform="translate(18.87 14.149)"/>
								<path id="Path_35" data-name="Path 35" class="cls-2document" d="M15.664,0H0V29.034H22.748V7.084Zm.3,1.7,5.088,5.088H15.964ZM1,28.036V1H14.966V7.782H21.75V28.136H1Z" transform="translate(18.881 14.2)"/>
							</g>
						</g>
					</g>
				</svg>
			</span>{{jsrTagSpanInfoitems}}<svg class="icon infoItems infoItems{{:symbol}}" width="40px" height="40px" id="linksLink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67.35 67.35">
				<defs>
					<style> .cls-1links { fill: #1d8bd0; } .cls-2links { fill: #fff; } </style>
				</defs>
				<g id="Layer_2" data-name="Layer 2">
					<title>Links</title>
					<g id="Layer_1-2" data-name="Layer 1">
						<g id="Symbol_7_4" data-name="Symbol 7 4">
							<circle id="Ellipse_14" data-name="Ellipse 14" class="cls-1links" cx="28.67" cy="28.67" r="28.67" />
						</g>
						<path class="cls-2links" d="M35.8,14.77l-9.88,4.42a8,8,0,0,0,6.37,14.6,5,5,0,0,0,1-2.87l-1.77.79a5.75,5.75,0,0,1-4.69-10.49l9.89-4.42A5.75,5.75,0,1,1,41.4,27.29l-4.6,2.06a8.41,8.41,0,0,1,.06,2.4l5.44-2.43a8,8,0,0,0-6.5-14.55Z" />
						<path class="cls-2links" d="M21.55,42.58l9.88-4.42a8,8,0,0,0-6.37-14.6,5,5,0,0,0-1,2.87l1.77-.79a5.75,5.75,0,1,1,4.69,10.49l-9.89,4.42A5.75,5.75,0,0,1,16,30.06L20.55,28a8.41,8.41,0,0,1-.06-2.4L15.05,28a8,8,0,0,0,6.5,14.55Z" />
					</g>
				</g>
			</svg>{{/jsrTagSpanInfoitems}} {{if clickable}}<span class="drilldownspan" {{jsrTagOnclickDrilldown /}}>
				<svg class="icon drilldownIcon drilldownIcon{{:symbol}}" width="40px" height="40px" id="drilldownLink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67.351 67.351">
					<defs>
						<style> .cls-1drilldown { fill: #1d8bd0; } .cls-2drilldown { fill: #fff; } </style>
					</defs>
					<g id="Symbol_6_5" data-name="Symbol 6 – 5" transform="translate(-3844 7033)">
						<title>Drilldown</title>
						<circle id="Ellipse_15" data-name="Ellipse 15" class="cls-1drilldown" cx="28.675" cy="28.675" r="28.675" transform="translate(3844 -7033)" />
						<g id="process" transform="translate(3855.284 -7020.172)">
							<g id="Group_50" data-name="Group 50" transform="translate(0)">
								<path id="Path_17" data-name="Path 17" class="cls-2drilldown" d="M109.18,24.094h-5.986V18.841l6.35-3.341a.689.689,0,0,0,.29-.964.73.73,0,0,0-.29-.275l-6.35-3.341V7.086h2.993a3.646,3.646,0,0,0,3.741-3.543A3.646,3.646,0,0,0,106.187,0H98.7a3.646,3.646,0,0,0-3.741,3.543A3.646,3.646,0,0,0,98.7,7.086H101.7v3.835l-6.18,3.251H91.971V12.047a.729.729,0,0,0-.748-.709H80.747a.729.729,0,0,0-.748.709v5.669a.729.729,0,0,0,.748.709h4.489v2.835a.729.729,0,0,0,.748.709H101.7v2.126H95.712a.729.729,0,0,0-.748.709v5.669a.729.729,0,0,0,.748.709c6.566-.016,7.482,0,13.468,0a.729.729,0,0,0,.748-.709V24.8A.729.729,0,0,0,109.18,24.094ZM98.7,5.669A2.188,2.188,0,0,1,96.46,3.543,2.188,2.188,0,0,1,98.7,1.417h7.482a2.188,2.188,0,0,1,2.245,2.126,2.188,2.188,0,0,1-2.245,2.126Zm3.741,6.48,5.193,2.733-5.193,2.733-5.193-2.733ZM81.5,17.007V12.756h8.979v4.252Zm5.238,3.543V18.425h4.489a.729.729,0,0,0,.748-.709V15.59h3.547l6.18,3.251v1.709Zm21.7,9.212H96.46V25.511h11.972Z" transform="translate(-79.999)" />
							</g>
						</g>
					</g>
				</svg>
			</span>{{/if}} </div>
	</div>
</div>

The jsrenderTemplateForSubitem -context variable contains jsrender template for single subitem. Subitem is the under level component which is presented inside of the current level component when the current level component is expanded. The title of subitem component may be wrapped in {{jsrTagAnchorSubitem}}-tag to drill down inside the subitem. The meaning of the {{jsrTagAnchorSubitem}}-tag is described in "jsrender-custom-tags-in-process-explorer-specification.txt" -document. The example of the jsrender template for subitem is presented below

<div data-toggle="tooltip" data-placement="top" title="{{>description}}" class="subitem subitem{{>cssClass}}" style="width: 7em; background: #f5f5f5; box-shadow: -webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.16); -moz-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.16); box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.16); border-left: 6px solid {{>categoryColor}}!important; border-color: #f5f5f5; border-radius: 6px;"> {{jsrTagAnchorSubitem}}{{>name}}{{/jsrTagAnchorSubitem}}</div>

The jsrenderTemplateForXray-context variable contains the jsrender template for the X-ray view. An example of the template is given below.

<div data-toggle="tooltip" {{jsrTagOnclickModalWithDrilldownPaths /}}  data-placement="bottom auto"   data-html="true"   data-container="body"   title="<b>{{>description}}</b><table><tr><th> Name: </th><th> {{>name}}</th></tr><!-- <tr><th> Symbol: </th><th> {{>symbol}}</th></tr><tr><th> Id: </th><th> {{>id}}</th></tr> --><tr><th> Datatype: </th><th> {{>datatype}}</th></tr><tr><th> Typename: </th><th> {{>typename}}</th></tr><tr><th> Status: </th><th> {{>status}}</th></tr><tr><th></th></tr></table>"   class="subitem subitem{{>cssClass}}"   style="width: 7.5em; background: #f5f5f5; margin: 5px;   box-shadow:   -webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.16);   -moz-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.16);   box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.16);   border-left: 6px solid {{>categoryColor}}!important; border-color: #f5f5f5; border-radius: 6px;">   {{if clickable}}   {{jsrTagAnchorSubitem}}{{>name}}{{/jsrTagAnchorSubitem}}   {{else}}   {{>name}}   {{/if}} </div>

The selectedModel -context variables contains the id-number of the model from which all items of drilling down hierarchy will be fetched. The example of The selectedModel -context variables value is "PG.1600106288"

The viewTitle -context variable contains the text to be presented in the title of the page.

Configuring Drill Down Paths


Drilldown path declaration grammar in BNF:


pathdecl = elementfilter ("/" pathfragment)* ;
elementfilter = "[" typenames | symboldecl | iddecl "]" ("{" attributes "}")? ;
pathfragment = relationname "/" elementfilter ;
typenames = typename ("|" typename)*;
typename = string ;
attributes = attribute ("," attribute)*;
attribute = string;
symboldecl = "symbol" "=" string;
iddecl = "id" "=" string;
relationname = string ("." string)* ("(" recursionparams ")")? ;
recursionparams = recursionparam ("," recursionparam)* ;
recursionparam = recursion | recursionlevel | keeporiginals ;
recursion = "recursive" "=" zeorOrOne ;
recursionlevel = "recursionlevel" "=" integer ;
keeporiginals = "keeporiginals" "=" zeorOrOne ;
string = [a-zA-Z]+ ;
integer = ("-")? [1-9] ([0-9])* ;
zeorOrOne = "0" | "1" ;

Configuring Element Card Behaviour

QPR BusinessManagementSystem includes set of custom tags. The purpose of these tags is to ease the process template configuration. The usage of these tags is described in this document.

Mostly the custom tags are implemented as onclick event which may be attached as attribute to such html-tags like <div>, <span>, <a> and other. Some of the custom tags are implemented as html-tags. The implementation mode becomes clear from tag names.

Drilldown To Item

The purpose of jsrTagOnclickDrilldown custom tag is to open drilldown view of selected component. The tag is implemented as onclick-attribute to be attached to <span>, <div> or other html-tag in jsrenderTemplateForItem template. No additional attributes required. The information will be collected from the component passed into jsrenderTemplateForItem template on rendering.

Show Details Pane

The purpose of jsrTagOnclickDetailspane custom tag is to display additional information at the bottom of the screen. The tag is implemented as onclick-attribute to be attached to <span>, <div> or other html-tag in jsrenderTemplateForItem template. The additional information needs for configuration with detailsDivProperties context variable. Details configuration is presented in JSON-mode. It includes 'Details Div' -rendering template and queries to collect additional information. The example of this configuration is presented below:

{
	"jsrendertemplate": "<div id=\"detailsFrame\" class=\"detailsFrame row\"><div id=\"detailsCommonTitle\" class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\"><h3 align=\"center\">{{if name}}{{:name}}{{/if}} <span title=\"Close\"  style=\"cursor:pointer; float:right;\"{{jsrTagOnclickDetailspaneClose /}}>X</span></h3></div>{{if query0}}<div id=\"detailsSection1\" class=\"detailsSection col-xs-12 col-sm-6 col-md-4 col-lg-3\"><h5 align=\"center\">{{:sectionTitle1}}</h5>{{for query0}}{{if owner}}<h6 align=\"left\">Owner: {{:owner}}</h6>{{/if}}{{if status}}<h6 align=\"left\">Status: {{:status}}</h6>{{/if}}{{if reviewer}}<h6 align=\"left\">Reviewer: {{:reviewer}}</h6>{{/if}}{{if reviewed}}<h6 align=\"left\">Reviewed: {{:reviewed}}</h6>{{/if}}{{if description}}<h6 align=\"left\">Description: {{:description}}</h6>{{/if}}{{/for}}</div>{{/if}}{{if query1}}<div id=\"detailsSection2\" class=\"detailsSection col-xs-12 col-sm-6 col-md-4 col-lg-3\"><h5 align=\"center\">{{:sectionTitle2}}</h5>{{for query1}}<h6 align=\"left\">{{:name}}: {{:description}}</h6>{{/for}}</div>{{/if}}{{if query2}}<div id=\"detailsSection3\" class=\"detailsSection col-xs-12 col-sm-6 col-md-4 col-lg-3\"><h5 align=\"center\">{{:sectionTitle3}}</h5>{{for query2}}<h6 align=\"left\">{{:name}}: {{:description}}</h6>{{/for}}</div>{{/if}}</div>",
	"queries": [{
			"title": "Properties",
			"query": "[%id%]",
			"attributes": "name,symbol,id,description,AuthoringandReviewAttributes.Lastreviewdate.stringvalue (as=\"reviewed\"), AuthoringandReviewAttributes.Owner.value (as=\"owner\"),AuthoringandReviewAttributes.Reviewer.value (as=\"reviewer\"), AuthoringandReviewAttributes.ReviewStatus.value (as=\"status\")",
			"sortby": "name",
			"criteria": "",
			"options": ""
		}, {
			"title": "Applications",
			"query": "[%id%].subobjects.Filter(include=\"ApplicationComponent\")",
			"attributes": "name,fullid,description",
			"sortby": "name",
			"criteria": "",
			"options": ""
		}, {
			"title": "Data",
			"query": "[%id%].subobjects.Filter(include=\"ConceptualDataEntity\")",
			"attributes": "name,fullid,description",
			"sortby": "name",
			"criteria": "",
			"options": ""
		}
	]
}

Close Details Pane

The purpose of jsrTagOnclickDetailspaneClose- custom tag is to hide the additional information presented at the bottom of the screen. The tag is implemented as onclick-attribute to be attached to <span>, <div> or other html-tag. No additional attributes required. It may be appliied either in 'jsrenderTemplateForItem' -template or in the template of additional information configuration (see jsrTagOnclickDetailspane- custom tag)

Expand Subitems

The purpose of jsrTagOnclickExpand -tag is to expand the content of component and to present the inner items in simplified mode inside of the parent item. The tag is implemented as onclick-attribute to be attached to <span>, <div> or other html-tag. No additional attributes required. The information will be collected from the JSON object passed into 'jsrenderTemplateForItem' -template on rendering.

Link To Documents

The purpose of jsrTagOnclickDocumentslink -tag is to open external link. Link will be opened in new window. The tag is implemented as onclick-attribute to be attached to <span>, <div> or other html-tag. This tag needs for 'url' -named parameter to be opened and multiple additional optional non-named parameters. Additional optional non-named parameter will replace arguments in 'url' -named parameter. Additional parameters in 'url' -named parameter must be named 'argX' where X is ordering number. Example:
{{jsrTagOnclickDocumentslink url="http://google.com?q=arg0" name}}
- url http://google.com?q=arg0 will be opened in new window and arg0 will be replaced with component name.

Show Information Item Links

The purpose of jsrTagSpanInfoitems -tag is to open tooltip with list of html-links found from information items of the component. The tag is implemented as <span> html-tag. No additional attributes required. The information will be collected from the component passed into 'jsrenderTemplateForItem' -template on rendering.

Change QPR UI View

The purpose of jsrTagOnclickChangeview -tag is to move to another view. The tag is implemented as onclick-attribute to be attached to <span>, <div> or other html-tag. This tag needs for 'viewIdentifier' -parameter to identify the view to be opened and optional parameters selectedElement /selecteElementName to be set as session variables. Currently only single element may be set as session variable.

Drill Down To Subitem

The purpose of jsrTagAnchorSubitem -tag is to drill down into subitem. It is implemented as <a> -tag and should be used in "jsrenderTemplateForSubitem" -template. Usually it is used to wrap the subitem's title. No additional attributes required.

References

See https://www.jsviews.com/#customtagsapi