Skip to Content
avatar image
Former Member

Add/Insert Parent-Child row to layout Dynamically using SAPUI5

Hi,

I am working on a development where I need to add a new row and under that new row, there has to be provision to add a child row (node) with different fields.

Please find the attached screen shot for layout.

I need your help in proceed on this. Any suggestions with some demo code example will be very helpful.

sapui5.png

Thanks & Best Regards,

Venkatesh

sapui5.png (32.7 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • avatar image
    Former Member
    Apr 17, 2017 at 08:53 AM

    Anyone having clue on this?

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 17, 2017 at 03:58 PM

    this is definitely possible, but first show the code where you are stuck at so others can help...

    Some of the possible approaches are below:

    • Custom list
    • Grid layout with dynamic content
    • Fragments
    Add comment
    10|10000 characters needed characters exceeded

    • Former Member
      jQuery.sap.require("sap.ui.layout.HorizontalLayout");
      var oControllerEvt;
      sap.ui.controller("myController", {
      
      
          onInit: function () {
          		oControllerEvt = this;
              this.oGrid = this.byId("grid");
          },
      
      
          onAddNode: function () {
              var oUINode = new sap.ui.layout.HorizontalLayout({
                  content: [
                  new sap.m.Label({
                      text: "Opr"
                  }), new sap.m.Button({text:"Add Child", press:[oControllerEvt.onAddChild, oControllerEvt]}), new sap.m.Input(), new sap.m.Input(),  new sap.m.ComboBox({})]
              }).setLayoutData(new sap.ui.layout.GridData({
                  span: "L12 M12 S12"
              })).addStyleClass("myHLayout");
              this.oGrid.addContent(oUINode);
          },
          
      
          onAddChild: function (Event) {
              var oUIChildNode = new sap.ui.layout.HorizontalLayout({
                  content: [
                  new sap.m.Label({
                      text: "UR"
                  }), new sap.m.Input(), new sap.m.Input(), new sap.m.Input(), new sap.m.Input(),  new sap.m.ComboBox({}), new sap.m.ComboBox({}), new sap.m.Input(), new sap.m.CheckBox()]
              }).addStyleClass("myHLayout");
              this.oGrid.addContent(oUIChildNode);
          }
      });
      <br>

      It works fine on click event but what if I need to have the data in the Grid on initial load which is again dynamic as per the data available with respect to the operation as shown in the image.

      Also, the model which I am using is XML.

  • Apr 18, 2017 at 02:11 AM

    Hi Venkatesh,

    It can be achieved much easily using the standard Tree Table Control than extending a control or building a custom control. Please play around with it to see if it meets your needs.

    Regards

    Virinchy

    Add comment
    10|10000 characters needed characters exceeded