HTML Presentation Object: Hierarchy Browser - Revision history

TeeHiet at 07:50, 6 June 2018

2018-06-06T07:50:29Z

Ollvihe at 11:59, 30 March 2018

2018-03-30T11:59:24Z

Ollvihe at 11:58, 30 March 2018

2018-03-30T11:58:11Z

Ollvihe at 11:57, 30 March 2018

2018-03-30T11:57:54Z

Ollvihe at 11:57, 30 March 2018

2018-03-30T11:57:45Z

Ollvihe at 11:57, 30 March 2018

2018-03-30T11:57:31Z

Ollvihe at 15:06, 29 March 2018

2018-03-29T15:06:15Z

Ollvihe at 15:01, 29 March 2018

2018-03-29T15:01:37Z

Ollvihe: Created page with "This example shows hierarhical 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 ''sel..."

2018-03-29T14:56:40Z

Created page with "This example shows hierarhical 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 ''sel..."

New page

This example shows hierarhical 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 following query gets all diagrams in a PD/EA model using [[QPR Reporting Expression]]. There needs to be ''modelId'' context variable set containing the PD/EA model id.
<pre>
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')
</pre>

Create an HTML presentation object with the following code.
<pre>
<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() {debugger;
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>
</pre>

← Older revision		Revision as of 07:50, 6 June 2018
Line 94:		Line 94:
	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]]

@@ Line 90: / Line 90: @@
 </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>
 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>

← Older revision		Revision as of 11:58, 30 March 2018
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.

← Older revision		Revision as of 11:57, 30 March 2018
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 ~~is change~~, 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 TreeView.

	Create an HTML presentation object with the following code.		Create an HTML presentation object with the following code.

← Older revision		Revision as of 11:57, 30 March 2018
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 is change, 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 is change, the component refreshes. Also if the ''selectedNode'' variable already contains a value when the TreeView is initialized, corresponding value is selected in the TreeView.

	Create an HTML presentation object with the following code.		Create an HTML presentation object with the following code.

@@ Line 1: / Line 1: @@
-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.
+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 is change, the component refreshes. Also if the ''selectedNode'' variable already contains a value when the TreeView is initialized, corresponding value is selected in the TreeView.
 Create an HTML presentation object with the following code.
@@ Line 14: / Line 14: @@
 <script>
 (function() {
-var data;
+var selectedNodeVariable = "selectedNode";
-var initialized = false;
+var datasetName = "data";
 window["<#datasetChangeFunction>"] = function(datasetIdentifier, datasetChangeCallbackFunction) {
-   if (datasetIdentifier == "data") datasetChangeCallbackFunction(function(datasetData) {
+   if (datasetIdentifier == datasetName) datasetChangeCallbackFunction(function(datasetData) {
      datasetData.getDatasetAsObjectArray = getDatasetAsObjectArray;
      data = datasetData.getDatasetAsObjectArray();
@@ Line 24: / Line 37: @@
        if (data[i].diagramname == "") data[i].diagramname = " ";
+     }
-     if (!initialized) initializeAndDrawPO();
+     initializeAndDrawHierarchyTree();
    });
+}
-function initializeAndDrawPO() {
+function initializeAndDrawHierarchyTree() {
-   initialized = true;
+   if (treeViewInstance != null) {
-   if (data.length > 0) window.parent.setSessionVariable("selectedNode", data[0].hierarchyid);
+    treeViewInstance.destroy();
-   $("#content<#uniqueId>").ejTreeView({
+	treeViewInstance = null;
-    fields: {
-      id: "hierarchyid",
+   if (data == null || data.length == 0) {
-      parentId: "hierarchyparentid",
+    window.parent.setSessionVariable(selectedNodeVariable, "");
-      text: "diagramname",
+   } else {
-      dataSource: data
+    $("#content<#uniqueId>").ejTreeView({
-    },
+      fields: {
-    selectedNode: 0,
+        id: "hierarchyid",
-    nodeSelect: function(args) {
+        parentId: "hierarchyparentid",
-      window.parent.setSessionVariable("selectedNode", args.id);
+        text: "diagramname",
+		imageUrl: "iconurl",
-   });
+        dataSource: data
+}
@@ Line 66: / Line 92: @@
 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''.
 <pre>
-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')
+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>