10

I have created lightning quick action to add my component for some functionality.

so from my quick action. When I do some validation like

    var opp = component.get("v.objOpportunity");
    if(!opp.Name.length || !opp.CloseDate.length )
    {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "message": 'Opportunity name and close date can not be empty.',
            "type": "Error"
        });
        toastEvent.fire();
        return;
    }

So the toast message display behind the modal. Please check below screenshot.

Any solution for this issue? I don't want to write custom error message functionality to display to user.

enter image description here

  • hey guys, still no simple workaround except creating custom toast component? – Oleksandr Berehovskyi Feb 9 at 19:47
  • @OleksandrBerehovskyi try lightning:notificationsLibrary – Ratan Paul Feb 10 at 17:52
  • I used that and it works as in original question :( should I wrap it with div or something ? – Oleksandr Berehovskyi Feb 10 at 18:07
  • @OleksandrBerehovskyi I think you used showToast function. I suggest try with showNotice function – Ratan Paul Feb 11 at 16:01
  • yes, notice works fine.. but from point of view of user experience it is not convenient to show success messages like that :( notice relates to prompts in SLDS. Doc says Prompt notice grabs the user’s attention & alerts them of system-related issues/updates. – Oleksandr Berehovskyi Feb 12 at 9:06
8

Not an immediate answer, but the long term solution would be to indicate the known issue affects you Lightning Component force:showToast event displays toast message behind action window in Lightning Experience and Salesforce1

3

You can use the lightning:notificationsLibrary and put a notice up over your modal. It's not the same as a toast, but might work in some cases.

1

I think your issue is similar to this. Known Issue

0

I created a simple custom ToastError component to get around this limitation.

Usage

<c:ToastError visible="{!v.showError}" contents="{!v.errorMessage}" />

Implementation:

ToastError.cmp

<aura:component>

    <aura:attribute name="visible" type="Boolean" default="false" />
    <aura:attribute name="contents" type="String" />

    <aura:if isTrue="{!v.visible}">

        <div class="slds-notify_container slds-is-relative slds-m-bottom_small">
            <div class="slds-notify slds-notify_toast slds-theme_error" role="status">
                <span class="slds-icon_container slds-icon-utility-error slds-m-right_small slds-no-flex slds-align-top">
                    <lightning:icon iconName="utility:error" size="small" variant="inverse" />
                </span>
                <div class="slds-notify__content">
                    <h2 class="slds-text-heading_small">
                        {!v.contents}
                    </h2>
                </div>
                <div class="slds-notify__close">
                    <lightning:buttonIcon iconName="utility:close" onclick="{! c.handleCloseClick }" size="small"
                        variant="bare-inverse" />
                </div>
            </div>
        </div>

    </aura:if>

</aura:component>

ToastErrorController.js

({
    handleCloseClick: function (cmp, event, helper) {
        cmp.set("v.visible", false);
    }
})

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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