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
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>");
},
});
}
);
<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>
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')
}
});
});
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
6 | |
6 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 | |
3 |