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

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