CODEWITHSUNDEEP
javascriptcustom-controlsaggregationsapui5
tapsiturbi
tapsiturbi

Reputation: 98

Custom Control - how to encapsulate aggregation in another control

I might be going around this wrong, but I want to create a custom control that is a subclass of sap.m.Dialog. This new control will have an aggregation 'leftImage' which will then be placed in a HorizontalLayout (private variable). However, this causes an error possibly because the 'leftImage' is already a dependent of my control.

So how do I encapsulate an aggregation on another control?

Upvotes: 2

Views: 862

Answers (1)

Jonathan.Brink
Jonathan.Brink

Reputation: 25423

sap.m.Dialog already has a "content" aggregation which holds the controls to be rendered, so you just need to add your custom bits there.

So, a pattern like this should work:

sap.ui.define([
    "jquery.sap.global",
    "sap/m/Dialog",
    "sap/m/Image",
    "sap/ui/layout/HorizontalLayout"
], function(jQuery, Dialog, Image, HorizontalLayout) {
    "use strict";

    var MyDialog = Dialog.extend("sap.ui.mylib.MyDialog", {
        metadata: {
            library: "sap.ui.mylib",
            associations: {
                leftImage: {type: "sap.m.Image", multiple: false}
            }
        },
        renderer: {
            // inherit rendering from sap.m.Dialog
        }
    });

    MyDialog.prototype.init = function() {
        if (Dialog.prototype.init) {
            Dialog.prototype.init.apply(this, arguments);
        }

        var oImage = new Image({
                src: '...'
            }),
            oHorizontalLayout = new HorizontalLayout({
                content: [
                    oImage
                ]
            });

        this.addContent(oHorizontalLayout);
    };

    return MyDialog;
}, /* bExport= */ true);

Define leftImage as an association because it will be aggregated by the HorizontalLayout. It can be accessed later with:

var oLeftImage = sap.ui.getCore().byId(oMyDialog.getLeftImage());

You may also want to define the HorizontalLayout as an association so you can add more content to that as well.

Upvotes: 2

Related Questions