Search code examples
modal-dialogsapui5

How to extend "sap.m.Dialog" to add custom content to Dialog footer?

I am trying to make a custom dialog to show some text and link in the footer along with buttons. I don't know how to change the existing rendering for this, so I wrote a simple renderer to check the behavior. This is my code: 

sap.m.Dialog.extend("EnhancedDialog",{

  metadata:{
    properties:{
      footerLabelText:{type:"string",defaultValue:null},
      footerLinkText:{type:"string",defaultValue:null},
      footerLinkHref:{type:"string",defaultValue:null}
    },
    aggregations:{
      _label:{type:"sap.m.Label",multiple:false,visibility:"hidden"},
      _link:{type:"sap.m.Link",multiple:false,visibility:"hidden"}
    },
    events:{}
  },

  init:function(){
    this.getAggregation("_label", new sap.m.Label({text:"Check"}));
    this.getAggregation("_link",new sap.m.Link({text:"Link"}));
  },

  setFooterLabelText:function(oLabelText){
    this.setProperty("footerLabelText",oLabelText,true);
    this.getAggregation("_label").setText(oLabelText);
  },

  setFooterLinkText:function(oLinkText){
    this.setProperty("footerLinkText",oLinkText,true);
    this.getAggregation("_link").setText(oLinkText);
  },

  setFooterLinkHref:function(oLinkHref){
    this.setProperty("footerLinkHref",oLinkHref,true);
    this.getAggregation("_link").setHref(oLinkHref);
  },

  renderer:{
    render:function(oRM,oControl){
      oRM.write("<div");
      oRM.writeControlData(oControl);
      oRM.writeClasses();
      oRM.write(">");
      oRM.renderControl(oControl.getAggregation("_label"));
      oRM.renderControl(oControl.getAggregation("_link"));
      oRM.write("</div");   
    }
  }
});

var enhancedDialog=new EnhancedDialog();
var btn=new sap.m.Button({
  text:"Click Here!",
  press: function(){
    enhancedDialog.open();
  }
});

But I am getting the error

Dialog.js:6 Uncaught TypeError: Cannot read property 'setInitialFocusId' of undefined

when I am clicking the button.

Can someone point out what I am doing wrong?

And how to change the existing renderer behavior to show text in the footer?

This is what I want to make:
Dialog with some text in the footer

Solution

  • The error you are seeing is because you have overwritten the init() method and not called the overwritten init() of Dialog. So the internal popup and other stuff does not get initialized. You have to call the base.init() this way:

      init:function(){
    sap.m.Dialog.prototype.init.apply(this,arguments);
    this.getAggregation("_label", new sap.m.Label({text:"Check"}));
    this.getAggregation("_link",new sap.m.Link({text:"Link"}));
  },

    However you will need to copy most of the DialogRenderers code to get a fully functional dialog.

    Alternatively you could use the unmodified DialogRender and overwrite the Dialog._createToolbarButtons() method to add your Label and Link to the beginning:

      _createToolbarButtons:function () {
    Dialog.prototype._createToolbarButtons.apply(this,arguments);
    var toolbar = this._getToolbar();
    var toolbarContent = toolbar.getContent();
    toolbar.removeAllContent();
    toolbar.addContent(this.getAggregation("_label"));
    toolbar.addContent(this.getAggregation("_link"));
    // insertContent is not implemented correctly...
    toolbarContent.forEach(function(control){toolbar.addContent(control)});
  },
  renderer:DialogRenderer

    Full example on Plunker.