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

Question

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>

score 1 · Answer 1 · answered Apr 25 '15 at 20:34

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.

Thanks for the Reply. I try to use TreeTable for my scenario. But i coudn't able to get what i am expecting. Here i am trying to display comments and replies in a tree level structure. Any idea for doing this. — mani, Apr 26 '15 at 03:09
RowRepeater was not designed for a tree level structure. If you want to use a rowRepeater, you have two options: 1) Parse your data so it become a simple array where multiple items are in the same level (and you won't have a tree anymore) 2) Dynamically create a rowRepeater for each "child" element on your json and adjust ids and data binding dynamically. Remember, if you have a one person with only one child... rowRepeater won't render. In my opinion, both options are really awful. What you need should be achieved with a Tree or a TreeTable control. — fabiopagoti, Apr 26 '15 at 11:08
i am trying to display comments & replies in hirarical format. Is it possible to do with the tree or table tree.. — mani, Apr 27 '15 at 03:17
Is it.? Okay then let me try and get back to you. Thanks for the help. — mani, Apr 27 '15 at 03:20

score 1 · Answer 2 · answered Apr 27 '15 at 07:35

1

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.

answered Apr 27 '15 at 07:35

Qualiture

4,900
7
27
38

Please take a look into it. http://stackoverflow.com/questions/30896772/issue-while-getting-data-from-one-xml-view-controller-to-another-view-controller – mani Jun 17 '15 at 16:07

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

2 Answers2

Linked