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

From Mea Wiki
Jump to navigation Jump to search
Line 28: Line 28:
 
}
 
}
  
function initializeAndDrawPO() {debugger;
+
function initializeAndDrawPO() {
 
   initialized = true;
 
   initialized = true;
 
   if (data.length > 0) window.parent.setSessionVariable("selectedNode", data[0].hierarchyid);
 
   if (data.length > 0) window.parent.setSessionVariable("selectedNode", data[0].hierarchyid);

Revision as of 15:06, 29 March 2018

This is an example how to present hierarchical data in QPR UI. In the following example, when selecting nodes in the hierarchy, the id of the selected node is stored to context variable selectedNode. The example uses the following component: https://js.syncfusion.com/demos/web/#!/bootstrap/treeview/defaultfunctionalities.

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 data;
var initialized = false;

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

function initializeAndDrawPO() {
  initialized = true;
  if (data.length > 0) window.parent.setSessionVariable("selectedNode", data[0].hierarchyid);
  $("#content<#uniqueId>").ejTreeView({
    fields: {
      id: "hierarchyid",
      parentId: "hierarchyparentid",
      text: "diagramname",
      dataSource: data
    },
    selectedNode: 0,
    nodeSelect: function(args) {
      window.parent.setSessionVariable("selectedNode", args.id);
    }
  });
}

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>

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.

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