Difference between revisions of "HTML Presentation Object: Hierarchy Browser"

From Mea Wiki
Jump to navigation Jump to search
 
(2 intermediate revisions by one other user not shown)
Line 1: Line 1:
This is an example how to present hierarchical data in QPR UI using HTML presentation object and a TreeView component (https://js.syncfusion.com/demos/web/#!/bootstrap/treeview/defaultfunctionalities). When selecting nodes in the hierarchy, the id of the selected node is stored to context variable ''selectedNode''. If the dataset changes, the component refreshes. Also if the ''selectedNode'' variable already contains a value when the TreeView is initialized, corresponding value is selected in the TreeView.
+
This is an example how to present hierarchical data in QPR UI using HTML presentation object and a TreeView component (https://js.syncfusion.com/demos/web/#!/bootstrap/treeview/defaultfunctionalities). When selecting nodes in the hierarchy, the id of the selected node is stored to context variable ''selectedNode''. If the dataset changes, the component refreshes. Also if the ''selectedNode'' variable already contains a value when the TreeView is initialized, corresponding value is selected in the hierarchy.
  
 
Create an HTML presentation object with the following code.
 
Create an HTML presentation object with the following code.
Line 90: Line 90:
 
</pre>
 
</pre>
  
The following query gets all diagrams in a PD/EA model using [[QPR Reporting Expression]]. There needs to be ''modelId'' context variable containing the PD/EA model id. Store the query as a dataset named ''data''.
+
Define the following dataset in the HTML presentation object with name ''data''. The query gets all diagrams in a QPR ProcessDesigner/EnterpriseArchitect model using [[QPR Reporting Expression]]. There needs to be the ''modelId'' context variable containing the QPR ProcessDesigner/EnterpriseArchitect model id.
 
<pre>
 
<pre>
 
data=BuildHierarchy(AddColumn(From('[<#modelId>].attributeasfunction(attributeasfunction="mainlevelid").ChildObjects(hierarchy="processlevels",recursive=1)', '', '', 'id(as="instanceid"),parentobjects,name(as="diagramname"),iconurl', ''), 'objectid', '\'PG.\' + ModelIdFromFullId([instanceid]) + \'.\' + ObjectIdFromFullId([instanceid])'), 'instanceid', 'objectid', 'parentobjects', 'hierarchyid', 'hierarchyparentid', 'level', 'diagramname')
 
data=BuildHierarchy(AddColumn(From('[<#modelId>].attributeasfunction(attributeasfunction="mainlevelid").ChildObjects(hierarchy="processlevels",recursive=1)', '', '', 'id(as="instanceid"),parentobjects,name(as="diagramname"),iconurl', ''), 'objectid', '\'PG.\' + ModelIdFromFullId([instanceid]) + \'.\' + ObjectIdFromFullId([instanceid])'), 'instanceid', 'objectid', 'parentobjects', 'hierarchyid', 'hierarchyparentid', 'level', 'diagramname')
 
</pre>
 
</pre>
 +
 +
[[Category: QPR UI]]

Latest revision as of 07:50, 6 June 2018

This is an example how to present hierarchical data in QPR UI using HTML presentation object and a TreeView component (https://js.syncfusion.com/demos/web/#!/bootstrap/treeview/defaultfunctionalities). When selecting nodes in the hierarchy, the id of the selected node is stored to context variable selectedNode. If the dataset changes, the component refreshes. Also if the selectedNode variable already contains a value when the TreeView is initialized, corresponding value is selected in the hierarchy.

Create an HTML presentation object with the following code.

<div id="content<#uniqueId>"></div>

<style>
#content<#uniqueId> {
  width: 100%;
  height: 100%;
}
</style>

<script>
(function() {
var selectedNodeVariable = "selectedNode";
var datasetName = "data";
var data = null;
var selectedNode = null;
var treeViewInstance = null;

window["<#contextChangeFunction>"] = function(changedVariables) {
  if (changedVariables[selectedNodeVariable] != null && changedVariables[selectedNodeVariable] != selectedNode) {
    selectedNode = changedVariables[selectedNodeVariable];
	if (treeViewInstance != null && treeViewInstance.getNode(selectedNode) != null) {
	  treeViewInstance.selectNode(selectedNode);
	  treeViewInstance.ensureVisible(selectedNode);
	}
  }
}

window["<#datasetChangeFunction>"] = function(datasetIdentifier, datasetChangeCallbackFunction) {
  if (datasetIdentifier == datasetName) datasetChangeCallbackFunction(function(datasetData) {
    datasetData.getDatasetAsObjectArray = getDatasetAsObjectArray;
    data = datasetData.getDatasetAsObjectArray();
    for (var i = 0; i < data.length; i++) {
      if (data[i].diagramname == "") data[i].diagramname = " ";
    }
    initializeAndDrawHierarchyTree();
  });
}

function initializeAndDrawHierarchyTree() {
  if (treeViewInstance != null) {
    treeViewInstance.destroy();
	treeViewInstance = null;
  }
  if (data == null || data.length == 0) {
    window.parent.setSessionVariable(selectedNodeVariable, "");
  } else {
    $("#content<#uniqueId>").ejTreeView({
      fields: {
        id: "hierarchyid",
        parentId: "hierarchyparentid",
        text: "diagramname",
		imageUrl: "iconurl",
        dataSource: data
      },
      nodeSelect: function(args) {
	    selectNode = args.id;
        window.parent.setSessionVariable(selectedNodeVariable, selectNode);
      }
    });
	treeViewInstance = $("#content<#uniqueId>").data("ejTreeView");
	if (selectedNode == null) selectedNode = data[0].hierarchyid;
	if (treeViewInstance != null && treeViewInstance.getNode(selectedNode) == null) selectedNode = data[0].hierarchyid;
	treeViewInstance.selectNode(selectedNode);
	treeViewInstance.ensureVisible(selectedNode);
	window.parent.setSessionVariable(selectedNodeVariable, selectedNode);
  }
}

function getDatasetAsObjectArray(sheetIndex) {
  if (sheetIndex === undefined) sheetIndex = 0;
  if (this.sheets == null) return null;
  if (this.sheets[sheetIndex].values.length == 0) {alert("Dataset contains no columns."); throw "Dataset contains no columns."};
  var datasetAsObjectArray = [];
  for (var row = 1; row < this.sheets[sheetIndex].values[0].length; row++) {
    var rowObject = {};
    for (var column = 0; column < this.sheets[sheetIndex].values.length; column++) {
      rowObject[this.sheets[sheetIndex].values[column][0].attribute] = this.getCellValue(sheetIndex, column, row);
    }
    datasetAsObjectArray.push(rowObject);
  }
  return datasetAsObjectArray;
}

})()
</script>

Define the following dataset in the HTML presentation object with name data. The query gets all diagrams in a QPR ProcessDesigner/EnterpriseArchitect model using QPR Reporting Expression. There needs to be the modelId context variable containing the QPR ProcessDesigner/EnterpriseArchitect model id.

data=BuildHierarchy(AddColumn(From('[<#modelId>].attributeasfunction(attributeasfunction="mainlevelid").ChildObjects(hierarchy="processlevels",recursive=1)', '', '', 'id(as="instanceid"),parentobjects,name(as="diagramname"),iconurl', ''), 'objectid', '\'PG.\' + ModelIdFromFullId([instanceid]) + \'.\' + ObjectIdFromFullId([instanceid])'), 'instanceid', 'objectid', 'parentobjects', 'hierarchyid', 'hierarchyparentid', 'level', 'diagramname')