As our group starts planning the transition to lightning, I've taken it upon myself to look into our various JavaScript buttons that will need to be updated, and I've hit upon a snag.

One of the features of JavaScript buttons that our group was using quite extensively is the ability to return an alert back to the user without taking them away from the current record page. Data could be massaged, then checked first to see if an alert needed to be thrown or to continue on with the operation.

alert('this is a javascript button alert')

These alerts look like this to the user (In Chrome) Java Script Error Image With Visualforce pages, I can display alerts by adding them to the PageReference, or I can return Errors on records from a trigger, but that requires that an action has been performed on a record.

Is there any equally easy to setup way to display an Alert to the user without changing pages or or relying on a trigger firing? Something like Javascript buttons that allow us to massage the data and determine if an alert is needed?


One option in Lightning is the force:showToast event. From the documentation https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_force_showToast.htm:

Displays a toast notification with a message. A toast displays a message below the header at the top of a view. The message is specified by the message attribute.

showToast : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
        "title": "Success!",
        "message": "The record has been updated successfully."

The background color and icon used by a toast is controlled by the type attribute. For example, setting it to success displays the toast notification with a green background and checkmark icon. This toast displays for 5000ms, with a close button in the top right corner when the mode attribute is dismissible.

While message supports a text-only string, messageTemplate supports a string containing links. You can provide a string with placeholders, which are replaced by labels provided in messageTemplateData. The parameters are numbered and zero-based. For example, if you have three parameters, {0}, {1}, and {2}, the labels are substituted in the order they're specified. The label is also used for the title attribute on the anchor tag.

This example displays a toast with a message that contains a link.

showMyToast : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
        mode: 'sticky',
        message: 'This is a required message',
        messageTemplate: 'Record {0} created! See it {1}!',
        messageTemplateData: ['Salesforce', {
            url: 'http://www.salesforce.com/',
            label: 'here',

enter image description here


Your JavaScript button will instead be implemented as a Lightning Component. From there, you can do your data checking and whatnot.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
  <aura:attribute name="record" type="Object" />
  <force:recordData recordId="{!v.recordId}" layoutType="FULL" recordUpdated="{!c.recordLoaded}" targetFields="{!v.record}" />

   recordLoaded: function(component, event, helper) {
     var record = component.get("v.record");
     if(... condition for alert here ...) {
       var toast = $A.get("e.force:showToast"), closeQuickAction = $A.get("e.force:closeQuickAction");
       toast.setParams({ title: ..., message: ..., type: ... });
     } else {
        // do more stuff here

Once you create the component, create a new Quick Action, add it to your page layout, and it will appear as another button, similar to how your classic UI had the JavaScript button.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.