You need to sign in to do that
Don't have an account?
Wei Dong 10
Any confirm dialog in lightning?
Hi,
I have to use "window.confirm(……)" in the Lightning page to confirm, is there anything like "showToast" window in the Lightning or any other solutions?
I have to use "window.confirm(……)" in the Lightning page to confirm, is there anything like "showToast" window in the Lightning or any other solutions?
The LIghtning Overlaylibrary and Application Component will help you to achieve this:
I have design a sample component for you which will helps you:
1. Create one Application Event :(Name as OverlayLibraryModalEvent)
<aura:event type="APPLICATION" description="Event to handle overlay Action" >
<aura:attribute name="message" type="String"/>
</aura:event>
2. Create the Overlay Component :(Name as OverlayLibraryModal) ==> This will hold the OK and Cancel button
Here am passing the string as which button getting clicked to parent component via Application event
<aura:component access="global">
<aura:registerEvent name="appEvent" type="c:OverlayLibraryModalEvent"/>
<lightning:overlayLibrary aura:id="overlayLib"/>
<!--Component Start-->
<div class="slds-text-align_center slds-m-around_x-medium">
<lightning:button name="cancel" label="Cancel" onclick="{!c.handleCancel}"/>
<lightning:button name="ok" label="OK" variant="brand" onclick="{!c.handleOK}"/>
</div>
<!--Component End-->
</aura:component>
OverlayLibraryModal JS:
({
handleCancel : function(component, event, helper) {
//closes the modal or popover from the component
var appEvent = $A.get("e.c:OverlayLibraryModalEvent");
appEvent.setParams({
"message" : "Cancel" });
appEvent.fire();
component.find("overlayLib").notifyClose();
},
handleOK : function(component, event, helper) {
//do something
var appEvent = $A.get("e.c:OverlayLibraryModalEvent");
appEvent.setParams({
"message" : "Ok" });
appEvent.fire();
component.find("overlayLib").notifyClose();
}
})
3. Parent Comonent : (Component which hold the initial submit button)
Once you have recievd the which button clicked msg then do the further operation handleApplicationEvent method
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global">
<!--Declare Attribute-->
<aura:attribute name="FirstName" type="String"/>
<aura:attribute name="LastName" type="String"/>
<aura:handler event="c:OverlayLibraryModalEvent" action="{!c.handleApplicationEvent}"/>
<lightning:overlayLibrary aura:id="overlayLib"/>
<!--Component Start-->
<div class="slds-m-around--xx-large">
<lightning:input name="fname" label="First Name" value="{!v.FirstName}" />
<lightning:input name="lname" label="Last Name" value="{!v.LastName}" />
<br/>
<lightning:button variant="brand" label="Show Modal" onclick="{!c.handleShowModal}"/>
</div>
<!--Component End-->
</aura:component>
Parent Comonent JS:
({
handleShowModal: function(component) {
var fName = component.get("v.FirstName");
var lName = component.get("v.LastName");
$A.createComponent("c:OverlayLibraryModal", {},
function(content, status) {
if (status === "SUCCESS") {
var modalBody = content;
component.find('overlayLib').showCustomModal({
header: "Hi " + fName +" "+ lName + " Please let us know your confirmation!!!",
body: modalBody,
showCloseButton: false,
closeCallback: function(ovl) {
console.log('Overlay is closing');
}
}).then(function(overlay){
console.log("Overlay is made");
});
}
});
},
handleApplicationEvent : function(cmp, event) {
var message = event.getParam("message");
alert('@@@ ==> ' + message);
if(message == 'Ok')
{
// if the user clicked the OK button do your further Action here
}
else if(message == 'Cancel')
{
// if the user clicked the Cancel button do your further Action here for canceling
}
}
})
https://developer.salesforce.com/docs/component-library/bundle/lightning:overlayLibrary/documentation
Can you please Let me know if it helps or not!!!
If it helps don't forget to mark this as a best answer!!!
Thanks,
Maharajan.C
All Answers
Refer this link
https://developer.salesforce.com/docs/component-library/bundle/lightning:notificationsLibrary/documentation
https://rajvakati.com/2018/04/15/lightningnotificationslibrary-example/
But your given example has ONLY an "OK" button, what I want is something like "window.confirm(...)"——You have an "OK" or "Cancel" button to choose. So How to cope with that?
The LIghtning Overlaylibrary and Application Component will help you to achieve this:
I have design a sample component for you which will helps you:
1. Create one Application Event :(Name as OverlayLibraryModalEvent)
<aura:event type="APPLICATION" description="Event to handle overlay Action" >
<aura:attribute name="message" type="String"/>
</aura:event>
2. Create the Overlay Component :(Name as OverlayLibraryModal) ==> This will hold the OK and Cancel button
Here am passing the string as which button getting clicked to parent component via Application event
<aura:component access="global">
<aura:registerEvent name="appEvent" type="c:OverlayLibraryModalEvent"/>
<lightning:overlayLibrary aura:id="overlayLib"/>
<!--Component Start-->
<div class="slds-text-align_center slds-m-around_x-medium">
<lightning:button name="cancel" label="Cancel" onclick="{!c.handleCancel}"/>
<lightning:button name="ok" label="OK" variant="brand" onclick="{!c.handleOK}"/>
</div>
<!--Component End-->
</aura:component>
OverlayLibraryModal JS:
({
handleCancel : function(component, event, helper) {
//closes the modal or popover from the component
var appEvent = $A.get("e.c:OverlayLibraryModalEvent");
appEvent.setParams({
"message" : "Cancel" });
appEvent.fire();
component.find("overlayLib").notifyClose();
},
handleOK : function(component, event, helper) {
//do something
var appEvent = $A.get("e.c:OverlayLibraryModalEvent");
appEvent.setParams({
"message" : "Ok" });
appEvent.fire();
component.find("overlayLib").notifyClose();
}
})
3. Parent Comonent : (Component which hold the initial submit button)
Once you have recievd the which button clicked msg then do the further operation handleApplicationEvent method
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global">
<!--Declare Attribute-->
<aura:attribute name="FirstName" type="String"/>
<aura:attribute name="LastName" type="String"/>
<aura:handler event="c:OverlayLibraryModalEvent" action="{!c.handleApplicationEvent}"/>
<lightning:overlayLibrary aura:id="overlayLib"/>
<!--Component Start-->
<div class="slds-m-around--xx-large">
<lightning:input name="fname" label="First Name" value="{!v.FirstName}" />
<lightning:input name="lname" label="Last Name" value="{!v.LastName}" />
<br/>
<lightning:button variant="brand" label="Show Modal" onclick="{!c.handleShowModal}"/>
</div>
<!--Component End-->
</aura:component>
Parent Comonent JS:
({
handleShowModal: function(component) {
var fName = component.get("v.FirstName");
var lName = component.get("v.LastName");
$A.createComponent("c:OverlayLibraryModal", {},
function(content, status) {
if (status === "SUCCESS") {
var modalBody = content;
component.find('overlayLib').showCustomModal({
header: "Hi " + fName +" "+ lName + " Please let us know your confirmation!!!",
body: modalBody,
showCloseButton: false,
closeCallback: function(ovl) {
console.log('Overlay is closing');
}
}).then(function(overlay){
console.log("Overlay is made");
});
}
});
},
handleApplicationEvent : function(cmp, event) {
var message = event.getParam("message");
alert('@@@ ==> ' + message);
if(message == 'Ok')
{
// if the user clicked the OK button do your further Action here
}
else if(message == 'Cancel')
{
// if the user clicked the Cancel button do your further Action here for canceling
}
}
})
https://developer.salesforce.com/docs/component-library/bundle/lightning:overlayLibrary/documentation
Can you please Let me know if it helps or not!!!
If it helps don't forget to mark this as a best answer!!!
Thanks,
Maharajan.C
Thanks for your quick reply and there's a strange question——When the alert is popped up, I see the background is Not fully gray (this means ONLY a thin place is gray, but not the full screen of background is gray, with the modal dialog popped up).
Would you mind showing me your screenshot when popping up the dialog?
Please find the below Screenshots:
Thanks,
Maharajan.C
Thanks for your nice solution, I've marked yours as an answer.
BTW:Will Salesforce add this component as a most basic one like 'showToast'? This is a frequently-used Dialog for us......
Allows you to customize the title, tagline, message, handles the Esc to close it and will callback your confirm function when the user clicks the confirm button. I think so far is the most complete I found.