elsewhat/SAPUI5_GenericTree.html

## SAPUI5_GenericTree.html
<!DOCTYPE HTML>
<html>
<head>
    <title>Tree Event</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="resources/sap-ui-core.js"
        type="text/javascript"
        id="sap-ui-bootstrap"
        data-sap-ui-libs="sap.ui.commons"
        data-sap-ui-theme="sap_goldreflection">
    </script>

    <script type="text/javascript">


    //Dynamic population of a Tree and then handling events is not straightforward
    //This example does the following
    //1. Create a JSON model (oModel). This model must have both an id and a text column
    //   (The id is required in order for us to do server side processing if a TreeNode is clicked)
    //
    //2. Define a factory method for TreeNode elements (treeNodesFactory).
    //   SAPUI5 Factory methods are documented here https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/BindingAggregations.html
    //   This factory method can be reused for all Tree components (so only include it once and do not include name of component in the name)
	//
    //3. Define a method for dynamically populate the TreeNodes of a Tree based on its model (createDynamicTreeNodesFromModel)
    //   This method can be reused for all Tree components (so only include it once and do not include name of component in the name)
	//
    //4. Create an event handler method for when a TreeNode is clicked (onMenuTreeClick)
	//   There should be one event handler pr Tree, so the name component name should be reflected in the event handler name
	//   Based on http://stackoverflow.com/questions/14728262/event-handling-in-sapui5-tree-controls/
	//
    //5a. Create a Tree component
	//5b. Set the Model of the Tree component
	//5c. Bind the event handler from 3. for the Select method
	//
	//6.  Populate the TreeNodes by calling the method from 3. with the Tree as a parameter


    //1. Create a JSON model (oModel).
    var jsonModel = [{
		id : "idRN",
		text : "RootNode",
		expanded:true,
		nodes: [{
			id : "idSN1",
			text : "SubNode 1",
			expanded:false,
			nodes: [{id : "idSN11", text : "SubNode 1 of SubNode 1", icon:"https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/commons/demokit/images/system.gif"},
					{id : "idSN12", text : "SubNode 2 of SubNode 1"}]
			},
			{id : "idSN2", text : "SubNode 2", isSelected:true, selectable:true, hasExpander:true}]
	}];


    var oModel = new sap.ui.model.json.JSONModel();
	oModel.setData({
		modelData : jsonModel
	});

	//2. Define a factory method for TreeNode elements (treeNodesFactory).
    var treeNodesFactory = function(sId, oContext) {
    	//bind all properties from https://sapui5.netweaver.ondemand.com/sdk/#docs/api/symbols/sap.ui.commons.TreeNode.html#constructor
  		//except selected (causes the factory to be rerun when a TreeNode is selected)
    	//+ include our id from the model as CustomData to the TreeNode

		var oTreeNode = new sap.ui.commons.TreeNode(sId)
    		.bindProperty("text",oContext.sPath+"/text")
    		.bindProperty("expanded",oContext.sPath+"/expanded")
    		.bindProperty("hasExpander",oContext.sPath+"/hasExpander")
    		.bindProperty("selectable",oContext.sPath+"/selectable")
    		.bindProperty("icon",oContext.sPath+"/icon")
    		.addCustomData(new sap.ui.core.CustomData({
				key: "modelId",
				value: oContext.oModel.getProperty(oContext.sPath+"/id"),
				writeToDom: true}));

		/* This code is not relevant as long as sap-icon:// not yet supported with TreeNode
		var iconSrc = oContext.oModel.getProperty(oContext.sPath+"/icon");
		if(iconSrc){
			oTreeNode.setIcon(sap.ui.core.IconPool.getIconURI(iconSrc));
		}*/

		return oTreeNode;
	};

	//3. Define a method for dynamically populate the TreeNodes of a Tree based on its model (createDynamicTreeNodesFromModel)
    function createDynamicTreeNodesFromModel(oTree, modelPath) {
    	if(oTree.hasModel()==false){
    		console.log(oTree + " has no model bound to it. Cannot create tree structure");
    		return;
    	}

    	oTree.bindAggregation("nodes",modelPath, treeNodesFactory);
    }


    //4. Create an event handler method for when a TreeNode is clicked (onMenuTreeClick)
    function onMenuTreeClick(oControlEvent){
      //COMMON code for all event handlers
      var selectedId = oControlEvent.getParameter("node").sId;
      var selectedModelId=null;

      var customDataList = oControlEvent.getParameter("node").getCustomData();
      if(customDataList!=null && customDataList.length==1 && customDataList[0].getKey("modelId")){
    	  modelId = customDataList[0].getValue("modelId");
      }else {
    	  console.log("modelId not bound as CustomData to the TreeNode");
      }

      //selectedId now refers to the TreeNode element
      //selectedModelId now refers to the id field from the model

      //SPECIFIC code for this Tree
      //just updates a TextView with the ids we have found.
      //sap.ui.getCore().byId("oSelectedNodeText").setText("Model Id:"+modelId + " ---- sapui5 component id:"+selectedId);
    }

    //5a. Create a Tree component
	//5b. Set the Model of the Tree component
	//5c. Bind the event handler from 3. for the Select method
    var oMenuTree = new sap.ui.commons.Tree("oMenuTree", {select : onMenuTreeClick});
    oMenuTree.setModel(oModel);

    oMenuTree.setTitle("Home");
    oMenuTree.setWidth("100%");
    oMenuTree.setHeight("auto");
    oMenuTree.setShowHeaderIcons(true);
    oMenuTree.setShowHorizontalScrollbar(false);

	//6. Populate the TreeNodes by calling the method from 4. with the Tree as a parameter
    createDynamicTreeNodesFromModel(oMenuTree, "/modelData");

    oMenuTree.placeAt("content");

    //New TextView used to display some text when a TreeNode is selected
    new sap.ui.commons.TextView("oSelectedNodeText").placeAt("content");

    </script>
</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Tree Event</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<script src="resources/sap-ui-core.js"
	type="text/javascript"
	id="sap-ui-bootstrap"
	data-sap-ui-libs="sap.ui.commons"
	data-sap-ui-theme="sap_goldreflection">
	</script>

	<script type="text/javascript">



	//Dynamic population of a Tree and then handling events is not straightforward
	//This example does the following
	//1. Create a JSON model (oModel). This model must have both an id and a text column
	// (The id is required in order for us to do server side processing if a TreeNode is clicked)
	//
	//2. Define a factory method for TreeNode elements (treeNodesFactory).
	// SAPUI5 Factory methods are documented here https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/BindingAggregations.html
	// This factory method can be reused for all Tree components (so only include it once and do not include name of component in the name)
	//
	//3. Define a method for dynamically populate the TreeNodes of a Tree based on its model (createDynamicTreeNodesFromModel)
	// This method can be reused for all Tree components (so only include it once and do not include name of component in the name)
	//
	//4. Create an event handler method for when a TreeNode is clicked (onMenuTreeClick)
	// There should be one event handler pr Tree, so the name component name should be reflected in the event handler name
	// Based on http://stackoverflow.com/questions/14728262/event-handling-in-sapui5-tree-controls/
	//
	//5a. Create a Tree component
	//5b. Set the Model of the Tree component
	//5c. Bind the event handler from 3. for the Select method
	//
	//6. Populate the TreeNodes by calling the method from 3. with the Tree as a parameter


	//1. Create a JSON model (oModel).
	var jsonModel = [{
	id : "idRN",
	text : "RootNode",
	expanded:true,
	nodes: [{
	id : "idSN1",
	text : "SubNode 1",
	expanded:false,
	nodes: [{id : "idSN11", text : "SubNode 1 of SubNode 1", icon:"https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/commons/demokit/images/system.gif"},
	{id : "idSN12", text : "SubNode 2 of SubNode 1"}]
	},
	{id : "idSN2", text : "SubNode 2", isSelected:true, selectable:true, hasExpander:true}]
	}];


	var oModel = new sap.ui.model.json.JSONModel();
	oModel.setData({
	modelData : jsonModel
	});

	//2. Define a factory method for TreeNode elements (treeNodesFactory).
	var treeNodesFactory = function(sId, oContext) {
	//bind all properties from https://sapui5.netweaver.ondemand.com/sdk/#docs/api/symbols/sap.ui.commons.TreeNode.html#constructor
	//except selected (causes the factory to be rerun when a TreeNode is selected)
	//+ include our id from the model as CustomData to the TreeNode

	var oTreeNode = new sap.ui.commons.TreeNode(sId)
	.bindProperty("text",oContext.sPath+"/text")
	.bindProperty("expanded",oContext.sPath+"/expanded")
	.bindProperty("hasExpander",oContext.sPath+"/hasExpander")
	.bindProperty("selectable",oContext.sPath+"/selectable")
	.bindProperty("icon",oContext.sPath+"/icon")
	.addCustomData(new sap.ui.core.CustomData({
	key: "modelId",
	value: oContext.oModel.getProperty(oContext.sPath+"/id"),
	writeToDom: true}));

	/* This code is not relevant as long as sap-icon:// not yet supported with TreeNode
	var iconSrc = oContext.oModel.getProperty(oContext.sPath+"/icon");
	if(iconSrc){
	oTreeNode.setIcon(sap.ui.core.IconPool.getIconURI(iconSrc));
	}*/

	return oTreeNode;
	};

	//3. Define a method for dynamically populate the TreeNodes of a Tree based on its model (createDynamicTreeNodesFromModel)
	function createDynamicTreeNodesFromModel(oTree, modelPath) {
	if(oTree.hasModel()==false){
	console.log(oTree + " has no model bound to it. Cannot create tree structure");
	return;
	}

	oTree.bindAggregation("nodes",modelPath, treeNodesFactory);
	}



	//4. Create an event handler method for when a TreeNode is clicked (onMenuTreeClick)
	function onMenuTreeClick(oControlEvent){
	//COMMON code for all event handlers
	var selectedId = oControlEvent.getParameter("node").sId;
	var selectedModelId=null;

	var customDataList = oControlEvent.getParameter("node").getCustomData();
	if(customDataList!=null && customDataList.length==1 && customDataList[0].getKey("modelId")){
	modelId = customDataList[0].getValue("modelId");
	}else {
	console.log("modelId not bound as CustomData to the TreeNode");
	}

	//selectedId now refers to the TreeNode element
	//selectedModelId now refers to the id field from the model

	//SPECIFIC code for this Tree
	//just updates a TextView with the ids we have found.
	//sap.ui.getCore().byId("oSelectedNodeText").setText("Model Id:"+modelId + " ---- sapui5 component id:"+selectedId);
	}

	//5a. Create a Tree component
	//5b. Set the Model of the Tree component
	//5c. Bind the event handler from 3. for the Select method
	var oMenuTree = new sap.ui.commons.Tree("oMenuTree", {select : onMenuTreeClick});
	oMenuTree.setModel(oModel);

	oMenuTree.setTitle("Home");
	oMenuTree.setWidth("100%");
	oMenuTree.setHeight("auto");
	oMenuTree.setShowHeaderIcons(true);
	oMenuTree.setShowHorizontalScrollbar(false);

	//6. Populate the TreeNodes by calling the method from 4. with the Tree as a parameter
	createDynamicTreeNodesFromModel(oMenuTree, "/modelData");

	oMenuTree.placeAt("content");

	//New TextView used to display some text when a TreeNode is selected
	new sap.ui.commons.TextView("oSelectedNodeText").placeAt("content");

	</script>
	</head>

	<body class="sapUiBody" role="application">
	<div id="content"></div>
	</body>
	</html>