Technical Articles
SAP UI5 Confirmation Dialog : Are you sure ?
Preview
From the word go in SAP UI5 development perspective we are all aware of the importance of confirmation dialogs in any application which is handling CRUD operations.
Not only it prohibits the user from accidently performing any undesired operation but also can be used as a means to describe the implication of that operation or provide any additional information.
The usual and SAP Recommended way of showing any confirmation dialog is the use of dialog box & fragments and there are lot of resources describing the same. Few are provided below for reference :
- Message Box | SAP Fiori Design Guidelines
- Dialogs | SAP Fiori for Android Design Guidelines
- Step 16: Dialogs and Fragments (ondemand.com)
- Message Box – Samples – Demo Kit – OPENUI5 SDK (ondemand.com)
Although being used widely, there are issues that arise with the same while improperly structured specially with passing of context / binding.
The idea here is to come up with an alternate solution to
- Simplify Development
- Reduce Coding Efforts
- Increase Reusability
SAP UI5 Custom Control to the Rescue
The idea here is to create a highly re-usable UI5 custom control which serves the purpose of confirmation in-place
Getting Started with Custom Controls :
Step 34: Custom Controls (ondemand.com)
How to create a custom UI5 control | SAP Blogs
What we are going to build
A custom control which has 3 Aggregation of type button. The primaryButton will be visible initially and once the user clicks on it, we will display the confirmButton and rejectButton. It will also have a confirmText which will enable the user to insert any confirmation text.
How will it look like
Working of custom control
Lets get our hands dirty
Clone the repository publicly available at pinakipatrapro/UI5ConfirmButton: UI5ConfirmButton (github.com)
git clone https://github.com/pinakipatrapro/UI5ConfirmButton.git
cd (into the repository)
npm install --global @ui5/cli
npm i
ui5 serve
Package Structure
Contents of custom control
sap.ui.define(
["sap/ui/core/Control",
"sap/m/Text"
],
function(Control,Text) {
return Control.extend("pin.org.confirmButton.control.ConfirmButton",{
metadata: {
properties: {
_confirmState: {type : "boolean", defaultValue : false},
confirmText: {type : "string", defaultValue : ""}
},
aggregations: {
primaryButton : {type : "sap.m.Button", multiple: false},
confirmButton : {type : "sap.m.Button", multiple: false},
rejectButton : {type : "sap.m.Button", multiple: false}
},
},
renderer: function (oRM, oControl) {
let primaryButton = oControl.getAggregation('primaryButton');
primaryButton.attachPress(function(e){
this.setProperty('_confirmState',true);
}.bind(oControl));
primaryButton.setVisible(!oControl.getProperty('_confirmState'));
let confirmButton = oControl.getAggregation('confirmButton');
confirmButton.attachPress(function(e){
this.setProperty('_confirmState',false);
}.bind(oControl));
confirmButton.setVisible(oControl.getProperty('_confirmState'));
let rejectButton = oControl.getAggregation('rejectButton');
rejectButton.attachPress(function(e){
this.setProperty('_confirmState',false);
}.bind(oControl));
rejectButton.setVisible(oControl.getProperty('_confirmState'));
let confirmText = new Text({
text : oControl.getConfirmText(),
visible : oControl.getProperty('_confirmState')
});
confirmText.addStyleClass('sapUiTinyMargin')
oRM.write("<div");
oRM.writeControlData(oControl);
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(primaryButton);
oRM.renderControl(confirmText);
oRM.renderControl(confirmButton);
oRM.renderControl(rejectButton);
oRM.write("</div>");
},
});
}
);
Consumption in view.xml
<mvc:View
controllerName="pin.org.confirmButton.controller.MainView"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m"
xmlns:cc="pin.org.confirmButton.control"
>
<App >
<Page id="page" title="Confirmation Button">
<Label text="Confirm Button Standalone" design="Bold" class="sapUiMediumMargin" />
<cc:ConfirmButton confirmText="Are you sure ? This might have an cascading effect" class="sapUiLargeMargin">
<cc:primaryButton>
<Button text="Delete" type="Reject" icon="sap-icon://delete"/>
</cc:primaryButton>
<cc:confirmButton>
<Button press="finallyDelete" class="sapUiSmallMarginEnd" type="Accept" icon="sap-icon://accept"/>
</cc:confirmButton>
<cc:rejectButton>
<Button type="Reject" icon="sap-icon://decline"/>
</cc:rejectButton>
</cc:ConfirmButton>
<Label text="Confirm Button in a toolbar" design="Bold" class="sapUiMediumMargin" />
<Toolbar class="sapUiLargeMarginBeginEnd">
<Title text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."/>
<ToolbarSpacer/>
<Button text="Approve"/>
<cc:ConfirmButton confirmText="Are you sure ?" >
<cc:primaryButton>
<Button text="Reject" type="Reject" icon="sap-icon://cancel"/>
</cc:primaryButton>
<cc:confirmButton>
<Button press="finallyDelete" class="sapUiSmallMarginEnd" type="Accept" icon="sap-icon://accept"/>
</cc:confirmButton>
<cc:rejectButton>
<Button type="Reject" icon="sap-icon://decline"/>
</cc:rejectButton>
</cc:ConfirmButton>
</Toolbar>
</Page>
</App>
</mvc:View>
Event handling in controller
sap.ui.define([
"./BaseController"
],
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller) {
"use strict";
return Controller.extend("pin.org.confirmButton.controller.MainView", {
onInit: function () {
},
finallyDelete : function(oEvent){
sap.m.MessageToast.show('Finally You can delete')
}
});
});
That’s all we will need for now !!
Suggestions | Feedbacks
Would be great to hear from you
- Did you find it useful
- Improvements that can be done
- Any features that we can add