Sapui5: How can I add a button list to custom control?

Question

I am getting data from oModel, and it {msgData} object

          var Buttons = [{text:"apple"},{text:"banana"}]; 
          var sQuery = "some text...";

          oModel.oData.msgData.push({
                Type : "Information",
                buttons:Buttons,
                customIcon:"media/chat/b_small.png",
                Text: sQuery
            });

            oModel.refresh();

(in xml file, you can see the code below) XML:

    <wt:MessageStrip
        text="{msgData>Text}"
        type="{msgData>Type}"
             >

        // ***** NEED TO ADD THESE LINES ****
        <List  items="{msgData>buttons}" class="fixFlexFixedSize BtnBox">
            <Button press="BtnClick" text="{msgData>text}" class="sapUiTinyMarginEnd"/>
        </List>

    </wt:MessageStrip>

How can I add Button list to a control? (Button list is in {msgData} object)

MessageStrip.js

    sap.ui.define(["sap/m/MessageStrip"],
    function (MessageStrip) {
    "use strict";
    return MessageStrip.extend("com.sap.it.cs.itsdpphome.controller
                                   .fragments.MessageStrip", {
        metadata: {
            properties: {
            },
            aggregations: {
            },
            events: {
            }
        },

        init: function () {
        },

        renderer:{}
    });
});

Answer 1

First of all, you cannot add Button to a List. You have to use sap.m.CustomListItem to put a Button as content.

Let's get to the part about how to meet your current requirement for custom control.

you have define a aggregations for your MessageStrip to put your List

sap.ui.define(["sap/m/MessageStrip"],
function (MessageStrip) {
    "use strict";
    return MessageStrip.extend("com.sap.it.cs.itsdpphome.controller.fragments.MessageStrip", {
        metadata: {
            properties: {
            },
            aggregations: {
                list: { type: "sap.m.ListBase", multiple: false }
            },
            events: {
            }
        },

        init: function () {
            MessageStrip.prototype.init.call(this);
        },

        renderer: {}
    });
});

Then you define your own Renderer which extends sap/m/MessageStripRenderer for your MessageStrip. In order to render your list inside a MessageStrip, you have to copy some code from sap/m/MessageStripRenderer.

sap.ui.define(['sap/ui/core/Renderer', 'sap/m/MessageStripRenderer'],
function (Renderer, MessageStripRenderer) {
    "use strict";

    var MessageStripRenderer = Renderer.extend(MessageStripRenderer);

    MessageStripRenderer.render = function (oRm, oControl) {

        this.startMessageStrip(oRm, oControl);
        this.renderAriaTypeText(oRm, oControl);

        if (oControl.getShowIcon()) {
            this.renderIcon(oRm, oControl);
        }

        this.renderTextAndLink(oRm, oControl);
        //Render your list aggregation
        oRm.renderControl(oControl.getAggregation("list"));

        if (oControl.getShowCloseButton()) {
            this.renderCloseButton(oRm);
        }

        this.endMessageStrip(oRm);
    }

    return MessageStripRenderer;

}, true);

I tried the below view XML and it renders like the following screenshot.

<wt:MessageStrip text="DUMMY">
    <wt:list>
        <List>
            <items>
                <CustomListItem><Button text="1" /></CustomListItem>
                <CustomListItem><Button text="2" /></CustomListItem>
                <CustomListItem><Button text="3" /></CustomListItem>
            </items>
        </List>
    </wt:list>
</wt:MessageStrip>

Hope it helps. Thank you!