function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
AK_SmithAK_Smith 

force:showToast from javascript

Hello!
Is it possible to show force:showToast alert on VF page with only javascript?
Best Answer chosen by AK_Smith
sfdcMonkey.comsfdcMonkey.com
if this the part of page, then follow below stpes instead of using <apex:slds /> :
 
step 1: go to https://www.lightningdesignsystem.com/downloads   (https://www.lightningdesignsystem.com/downloads) and go to the 'Lightning Design System Static Resource' section and download the zip file.

step 2. upload zip file in static resource

step 3 use CSS style class file from static resource in your vf page using below statement : 
<apex:stylesheet value="{!URLFOR($Resource.staticResourceName, '/styles/salesforce-lightning-design-system.min.css')}"/>
now it's working as part of the page as well

Let us know if it helps you, and kindly mark it best answer it this answer helps you so it make proper solution for others in future 
thanks
 

All Answers

James LoghryJames Loghry

The force:showToast event is a lightning component functionality. Although, you can embed lightning components into Visualforce, even then the force:showToast event doesn't work in Salesforce Classic.

In your scenario, you're probably better off writing your own toast logic.  

It should be fairly straight forward:

  1. Include the SLDS toast markup shown here: https://www.lightningdesignsystem.com/components/toast. 
  2. Include the slds-hide css class to hide the toast originally
  3. Then you could use javascript or jquery similar to the following to show / hide the toast markup:
var $div2 = $("#YourToastMarkupClass");
    $div2.toggleClass("slds-hide");
    setTimeout(function() {
        $div2.toggleClass("slds-hide");
    }, 10000); //Set 10000 to however many milliseconds you want the toast displayed

 
AK_SmithAK_Smith
Hi! Thank you for you reply. 
Can you plese tell me. Step 1 and 2 shuld be done in the VF page? 
 
James LoghryJames Loghry
Yes..
sfdcMonkey.comsfdcMonkey.com
hi AK_Smit, you can show custom Toast msg in visualforce page, here is the sample code which is working fine in classisc as well .
  
<apex:page >
    
    <apex:slds />
    
  <div class="slds-notify_container slds-is-relative slds-show">
    <div class="slds-notify slds-notify_toast slds-theme_success" role="alert">
      <span class="slds-assistive-text">success</span>
      <span class="slds-icon_container slds-icon-utility-success slds-m-right_small slds-no-flex slds-align-top" title="Description of icon when needed">
        <svg class="slds-icon slds-icon_small" aria-hidden="true">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#success" />
        </svg>
      </span>
      <div class="slds-notify__content">
        <h2 class="slds-text-heading_small ">Account <a href="javascript:void(0);">ACME - 100</a> widgets was created.</h2>
      </div>
      <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close">
        <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#close" />
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
    </div>
  </div>

</apex:page>
By using the   <apex:slds /> tag you can use lightning style classes in your VF page, custom toast code available here :
https://www.lightningdesignsystem.com/components/toast/
you can show hide this toast msg by add or remove slds-hide and slds-show class on main DIV using javaScript
output : 

User-added image

 Let us know if it helps you, and kindly mark it best answer it this answer helps you so it make proper solution for others in future 
thanks
 
AK_SmithAK_Smith
Hi! Thank you replay.
my VF page is part of the record layout and it looks like this

User-added image



 
AK_SmithAK_Smith
Is it possible to show popup on the main record page? 
AK_SmithAK_Smith
yes
It works on preview page, but as a part of page - no 
AK_SmithAK_Smith
User-added image
AK_SmithAK_Smith
Works in SF1 but in iframe not on the top of the page
User-added image
sfdcMonkey.comsfdcMonkey.com
if this the part of page, then follow below stpes instead of using <apex:slds /> :
 
step 1: go to https://www.lightningdesignsystem.com/downloads   (https://www.lightningdesignsystem.com/downloads) and go to the 'Lightning Design System Static Resource' section and download the zip file.

step 2. upload zip file in static resource

step 3 use CSS style class file from static resource in your vf page using below statement : 
<apex:stylesheet value="{!URLFOR($Resource.staticResourceName, '/styles/salesforce-lightning-design-system.min.css')}"/>
now it's working as part of the page as well

Let us know if it helps you, and kindly mark it best answer it this answer helps you so it make proper solution for others in future 
thanks
 
This was selected as the best answer
AK_SmithAK_Smith
Works! But how to show it on top of the page?
sfdcMonkey.comsfdcMonkey.com
this is not possible beacuse your vf page is the part of standard page layout, this will show in scope of vf page layout, you can move this vf page on top of your page layout
thanks
AK_SmithAK_Smith
Got it!
Thank you!