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

Question

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:

Answer 1

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.

Answer 2

[...] show some text and link in the footer along with buttons.
Having a customizable Dialog footer is now supported since UI5 1.110. Simply define sap.m.Toolbar in the new <footer> aggregation of your sap.m.Dialog. For example:
<Dialog xmlns="sap.m" title="Title" initialFocus="okButton">
<!-- ... -->
<footer> <!-- Since UI5 1.110: -->
<Toolbar>
<Text text="Some text!" />
<ToolbarSpacer />
<Button id="okButton" text="OK" type="Emphasized" />
<Button text="Cancel" />
</Toolbar>
</footer>
</Dialog>
Sample demo:
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], async (XMLView) => {
"use strict";
const control = await XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
displayBlock="true"
height="100%"
>
<App autoFocus="false">
<dependents>
<Dialog id="myDialog"
class="sapUiResponsiveContentPadding sapUiResponsivePadding--header sapUiResponsivePadding--content sapUiResponsivePadding--footer"
initialFocus="okButton"
title="Title"
draggable="true"
resizable="true"
>
<Text text="Content ..." />
<footer>
<Toolbar>
<Text text="Some text in the footer!" />
<ToolbarSpacer />
<Button id="okButton" text="OK" type="Emphasized" />
<Button text="Cancel" />
</Toolbar>
</footer>
</Dialog>
</dependents>
</App>
</mvc:View>`,
afterRendering: function () {
this.byId("myDialog").open();
}
});
control.placeAt("content");
})
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified,sap.ui.layout"
data-sap-ui-async="true"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>