Skip to Content
0

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

Apr 17, 2017 at 07:29 AM

214

avatar image
Former Member

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)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

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

Anyone having clue on this?

Share
10 |10000 characters needed characters left characters exceeded
Srikanth KV Apr 17, 2017 at 03:58 PM
0

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
Show 1 Share
10 |10000 characters needed characters left 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.

0
Virinchy P Apr 18, 2017 at 02:11 AM
0

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

Share
10 |10000 characters needed characters left characters exceeded