Sapui5：カスタムコントロールにボタンリストを追加するにはどうすればよいですか？

Question

私はoModelからデータを取得し、それ{msgData}オブジェクト

  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(); 

（xmlファイルで、あなたは以下のコードを見ることができます） 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> 

ボタンリストをコントロールに追加しますか？

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

まず（ボタンのリストは{} msgDataオブジェクトである）、あなたはリストにボタンを追加することはできません。ボタンをコンテンツとして配置するには、sap.m.CustomListItemを使用する必要があります。

カスタムコントロールの現在の要件を満たす方法については、

あなたは、あなたがあなたのMessageStripためsap/m/MessageStripRendererを拡張したRenderer独自に定義するご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: {} 
    }); 
}); 

を置くためにあなたのMessageStripためaggregationsを定義しています。あなたのリストをMessageStrip内でレンダリングするには、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); 

以下のXMLを試してみましたが、次のスクリーンショットのように表示されます。

<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> 

それがお役に立てば幸いです。ありがとうございました！