Creating layout for multiple aggregations for custom controls in sapui5

Question

I created two custom control. First custom control includes the other one as a multiple. And I want to use them in my XML view as below:

<foo:Foo>
    <foo:FooItem>
    </foo:FooItem>
    <foo:FooItem>
    </foo:FooItem>
</foo:Foo>

And I created my parent custom control Foo to create FlexBox holding my child controls.

My Foo metadata :

metadata: 
{
    properties:
    {
        "title": {type : "string", group : "Misc", defaultValue : ""}
    },
    aggregations : 
    {
        content: {singularName: "content"}
    },
    defaultAggregation: "content"
}

and my Foo renderer:

renderer : 
{

    render : function(oRm, oControl) {
        console.log("inoart.controls.Gauge.render()");


        var layout = oControl.createLayout();//creates FlexBox
        oRm.write("<div");
        oRm.writeControlData(oControl); 
        oRm.writeClasses();
        oRm.write(">");
        oRm.renderControl(layout);

        var aChildren = oControl.getContent();
        for (var i = 0; i < aChildren.length; i++) 
        { // loop over all child Controls, 

            oRm.write("<div>");
            oRm.writeStyles();

            layout.addItem(aChildren[i]);
            // I tried to add my child controls to this layout!!!

            oRm.renderControl(aChildren[i]);
            oRm.write("</div>");

        }

        oRm.addClass('verticalAlignment');
        oRm.write("</div>");
    }
}

and my view looks like this:

<controls.Foo id="__Foo0">
    <sap.m.FlexBox id="__box0">
    <controls.FooItem id="__fooItem0">
        <sap.m.VBox id="__vbox0">
        <sap.m.FlexBox id="__box1">
    <controls.FooItem id="__fooItem1">
        <sap.m.VBox id="__vbox1">
        <sap.m.FlexBox id="__box2">

but I want it to be like this:

<controls.Foo id="__Foo0">
    <sap.m.FlexBox id="__box0">
        <controls.FooItem id="__fooItem0">
            <sap.m.VBox id="__vbox0">
            <sap.m.FlexBox id="__box1">
        <controls.FooItem id="__fooItem1">
            <sap.m.VBox id="__vbox1">
            <sap.m.FlexBox id="__box2">

schnoedel schnoedel · Accepted Answer · 2016-01-05T10:48:50

You do one call to oRm.renderControl to render a FlexBox and then do some calls to oRm.renderControl in a loop for the aggregation content. As all these renderControl-Calls are on the same level, everything is rendered on the same level to.

It is to late to add the items from your content aggregation into the FlexBox content aggregation inside the loop as the flexbox has already been rendered. Adding items to the Flexbox on every rerendering is not a good idea too.

You could derive your Foo-Control from sap.m.FlexBox and overwrite the renderer to do some special stuff.
You could overwrite the addContent, removeContent, getContent,... methods to delegate to your internal flexbox addItem, removeItem, getItems methods so the suff you add to the content aggregation is actually added to the Items aggregation of your internal flexbox.
You could use the beforeRendering method on your Foo control to add all its content to the items aggregation of its internal FlexBox.

I hope this gives you some help.

Creating layout for multiple aggregations for custom controls in sapui5

1 Answers