function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
TorTor 

How do I display a warning toast when value changes?

I am very new to this, but I am trying to display a warning toast to users if the stage name on an opportunity is changed from any value to Pending Approval. To do this I was trying to use Lightning components. 

Please see below for my cmp and js code. I tried to take 2 different approaches with this code and neither one have been successful so hoping that someone can provide some tips. Certainly also open to other ways of accomplishing this.

1. Use <aura:if and call the showWarningToast function if true. In the below code I am able to get it to show a button you can click on if the condition is true, but I have not been able to find a way to call the code without having the user click on the button. Also, the below code always shows the warning button if the value is Pending Approval not only if it is changed to Pending Approval.

2. Use <aura:handler name="change" and call the function itemsChange. This option seems more promising since I could easily add a statement to check if old and new value are different and only show the Toast if it is, but I am unable to show the old and new value. It simply shows old value: [object Object]current value: [object Object]

CMP:
<aura:component description="OpportunityTestComponent" implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="record" type="Object" description="The record object to be displayed"/>
    <aura:attribute name="OpptyRecord" type="Object" description="A simplified view record object to be displayed"/>

    <force:recordData aura:id="record" layoutType="FULL" recordId="{!v.recordId}" targetRecord="{!v.record}" targetFields="{!v.OpptyRecord}" mode="VIEW"/>

    <aura:handler name="change" value="{!v.OpptyRecord.StageName}" action="{!c.itemsChange}"/>
    
    <aura:if isTrue="{!v.OpptyRecord.StageName == 'Pending Approval'}">
         <lightning:button label="Warning" variant="inverse" onclick="{!c.showWarningToast}"/> 
    </aura:if>
</aura:component>

JS:

({
    showWarningToast : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            title : 'Please review the award date!',
            message: 'Please review the award date and correct as necessary!',
            key: 'info_alt',
            type: 'warning',
            mode: 'sticky'
        });
        toastEvent.fire();
    },
        itemsChange: function(cmp, evt) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            title : 'Please review the award date!',
            message: "old value: " + evt.getParam("oldValue") + "current value: " + evt.getParam("value"),
            key: 'info_alt',
            type: 'warning',
            mode: 'sticky'
        });
        toastEvent.fire();
        }
})

 
Danish HodaDanish Hoda
hi there, Plz check the evt data you are getting using console.log(JSON.stringify(evt.getParam("oldValue"))
AbhishekAbhishek (Salesforce Developers) 
For other suggestions check the below,

https://salesforce.stackexchange.com/questions/310030/how-to-display-toast-message-with-custom-field-value-as-its-message

https://developer.salesforce.com/forums/?id=9062I000000XnaRQAS

It might help you.
TorTor
Thanks! The values from console.log(JSON.stringify(evt.getParam("oldValue")) and console.log(JSON.stringify(evt.getParam("value")) appers to be the same. It is simply all values from the opportunity record and it is the current value and not the old.

Link https://www.biswajeetsamal.com/blog/display-toast-message-in-lighting-component/ does not work. These other links do not help me. My issue is not that I can't display a Toast message. I can easily do that based on visiting a page or click a button but I want it to be displayed in certan cases based on the value in the stage name.

I found the following: https://github.com/rahulmalhotra/Platform-Event-Toast-LWC and this looks exactly what I am looking for and seems to work great. But it does not work consistently. When I initially login to the page I get the below error. If I simply reload the page then the Toast message appears as expected until I login again I get the below error again.


Message: Method Promise.prototype.then called on incompatible receiver [object Object]

Component Descriptor: c:platformEventToast

Stack Trace:
TypeError: Method Promise.prototype.then called on incompatible receiver [object Object]
    at Proxy.then (<anonymous>)
    at Jl.apply (https://static.lightning.force.com/cs165/auraFW/javascript/8WYDoRiNKzw4em08r-Gg4A/aura_prod.js:37:74658)
    at connectedCallback (https://mgt--dev.lightning.force.com/lightning/r/Opportunity/0066s000002YYGgAAO/modules/c/platformEventToast.js:4:1096)
    at callHook (https://static.lightning.force.com/cs165/auraFW/javascript/8WYDoRiNKzw4em08r-Gg4A/aura_prod.js:37:72406)
    at https://static.lightning.force.com/cs165/auraFW/javascript/8WYDoRiNKzw4em08r-Gg4A/aura_prod.js:12:25094
    at _a (https://static.lightning.force.com/cs165/auraFW/javascript/8WYDoRiNKzw4em08r-Gg4A/aura_prod.js:12:30062)
    at Qo (https://static.lightning.force.com/cs165/auraFW/javascript/8WYDoRiNKzw4em08r-Gg4A/aura_prod.js:12:25077)
    at La (https://static.lightning.force.com/cs165/auraFW/javascript/8WYDoRiNKzw4em08r-Gg4A/aura_prod.js:12:29641)
    at Object.insert (https://static.lightning.force.com/cs165/auraFW/javascript/8WYDoRiNKzw4em08r-Gg4A/aura_prod.js:12:19284)
    at Qr (https://static.lightning.force.com/cs165/auraFW/javascript/8WYDoRiNKzw4em08r-Gg4A/aura_prod.js:12:17330 (https://static.lightning.force.com/cs165/auraFW/javascript/8WYDoRiNKzw4em08r-Gg4A/aura_prod.js:12:17330" style="color:#0563c1; text-decoration:underline))
 
Danish HodaDanish Hoda
hi There,
for others, it's working coz they have a single attribute and your's have a record attribute.
try using below code in the toastMessage : 
message: "old value: " + evt.getParam("oldValue").get("StageName") + "current value: " + evt.getParam("value").get("StageName")
TorTor
Thansk you but that results in error [evt.getParam(...).get is not a function]. If I however chnage it to message: "old value: " + evt.getParam("oldValue").StageName + "current value: " + evt.getParam("value").StageName,  it shows the values but the old and the new value is always the same
Danish HodaDanish Hoda
hi there, then try this, else you'd need to create another attribute for Stage : 
<aura:handler name="change" value="{!v.OpptyRecord}" action="{!c.itemsChange}"/>

and check for evt.getParam("oldValue").StageName / evt.getParam("value").StageName
TorTor
Right that is what I am doing. And the result from evt.getParam("oldValue").StageName and evt.getParam("value").StageName are both always the value of the new stage name