CODEWITHSUNDEEP
javascriptxmlsapui5
mani
mani

Reputation: 1044

How do i write Infinite Row-repeater in an Xml View in SAPUI5

I am trying to display the complex json data in SAPUI5.

Here is my Complex Data:

results:{
         "name" : "sample",
         "child" : [
                    "name" : "sample",
                    "child" : [
                        "name" : "sample",
                        "child" : [
                                    "name" : "sample",
                                    "child" : [

                                     ]
                                  ]
                     ]
                 ]
        }

Here the inner child is infinite. These are depending on my data.

So here is my question is how do i display this type of data in xml view.

Previously i displayed this type of data by using the Row repeater. There the data has only 3 levels. But Now it has infinite. So how can i use row repeater for displaying this type of data.

Here is a my 3-level Row Repeater.

<c:RowRepeater rows="{path: bindingpath}" id="rowRepeater" >
      <c:RowRepeater rows="{path: bindingpath/somePath}" >
            <c:RowRepeater rows="{path: bindingpath/somePath/anotherpath}">

            </c:RowRepeater>
      </c:RowRepeater>
</c:RowRepeater>

Upvotes: 0

Views: 874

Answers (2)

Qualiture
Qualiture

Reputation: 4920

I would create a custom control (maybe based on RowRepeater, Panel, of a custom FlexBox layout) where you bind an aggregation on the highest level

The custom control should then check for a specific node of type Array, and if it has 1 or more items, render the child elements recursively from that path on, etc.

Upvotes: 1

fabiopagoti
fabiopagoti

Reputation: 1541

That's is a VERY intriguing question but I don't think rowRepeater will help you with that.

If you want to bind the row attribute of rowRepeater control, you should pass an array where each position in array will be a row in your output.

In your results object, you have only one "root node". rowRepeater will render your output if you have two or more nodes. Moreover, the binding path can only hold one value so if you think about changing it dynamically it won't work for all levels of data in your model.

See the example below:

<!DOCTYPE html>
<html>
<head>

  <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons"></script>
  
  <meta charset="utf-8">
  <title>JS Bin</title>
  
  
  <script>


 // create the row repeater control
		var oRowRepeater = new sap.ui.commons.RowRepeater("rr1");
		oRowRepeater.setNoData(new sap.ui.commons.TextView({text: "Sorry, no data available!"}));
    
   
        //var dataObject = {data: ["a","b"]};
        var dataObject = { data: [
          { name: "A",
          children: [
                     {name: "A1",
                      children: [
                          {name: "A1a"}
                          ]
                      },
                     {name: "A2"}
                     ]
          },
          {name: "B"} // try to remove this line... the rowRepeater won't be rendered as there will be one position
          
        ]};
    
    
		// create JSON model
		var oModel = new sap.ui.model.json.JSONModel(dataObject);
		sap.ui.getCore().setModel(oModel);


		//create title
		var oTitle = new sap.ui.core.Title({text:"Letters"});

        oRowRepeater.setTitle(oTitle);

		//configure the RowRepeater
		oRowRepeater.setDesign("Standard");
//		oRowRepeater.setNumberOfRows(5);
//		oRowRepeater.setCurrentPage(1);
		oRowRepeater.setTitle(oTitle);


        var oRowTemplate = new sap.ui.commons.TextView({
          text: "{name}",
        });
    


		oRowRepeater.bindRows("/data", oRowTemplate);

		oRowRepeater.placeAt("content");
  </script>
</head>
  
  
<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>

What you need is more related to Element binding than Aggregation binding.

So, if you have many levels on your model I would recommend using controls like Tree or TreeTable.

Upvotes: 1

Related Questions