Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
pinakipatra
Contributor


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 :

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

  1. Simplify Development

  2. Reduce Coding Efforts

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

 

Create a package called control. Under the same create a file called ConfirmButton.js



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


 

 

 
Labels in this area