How to Build Alert! on visualforce Page Using Lightning Component Salesforce

Hi Folks,

Its the high time we get our hands dirty on LIGHTNING. We are getting lots of requirement on lightning day by day. In market there is a huge demand for Lightning Developers.

Obviously, every one is going mobile now a days and want one solution with better performance in salesforce. #LightningIsTheWayToGo. 

Today I ll be sharing some stuff i.e  most used component on internet among Developers that is 'ALERT !'

Lets get Started folks....


Requirement Analysis:-

I was asked to build, actually no one asked me it got boomed in my head ,  Alert! as Lightning Component. This lightning component should be such that we can use it in our visualforce pages wherever we want to show an alert.

our Component:-

First create a component named GlobalAlert.

Below is the code snippet for the same.

     <!--Global Alert-->
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <ltng:require styles="{!$Resource.slds232 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
    <aura:attribute name="Title" type="String" default="You Encountered an Error!!  " />
    <aura:attribute name="Click" type="String" default="  Please Click Here" />
    <aura:attribute name="Link" type="String" default="  Please Click Here" />
    
<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
                      <span class="slds-assistive-text"> </span>
                      <span class="slds-icon_container slds-icon-utility-ban slds-m-right_x-small" title="Description of icon when needed">
             
              <lightning:icon iconName="utility:error" variant="error" />
        
          </span>
          <h2>{!v.Title} <a href="{!v.Link}">{!v.Click}</a></h2>
          <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close">
              <lightning:icon iconName="utility:error" variant="error" />
              
            <span class="slds-assistive-text">Close</span>
          </button>
</div>
  
</aura:component>

Explanation of above Code line by line :-

Please visit this link. It is the Lightning Design System It has all the libraries for the component which are used mostly in development.

You can directly consume these CSS files into you Lightning App.

 <ltng:require styles="{!$Resource.slds232 + '/assets/styles/salesforce-lightning-design-system.css'}"/>

Above line is a standard tag of lightning in its style attribute I have added my CSS from lds (Lightning Design System).

<aura:attribute name="Title" type="String" default="You Encountered an Error!!  " />
    <aura:attribute name="Click" type="String" default="  Please Click Here" />
    <aura:attribute name="Link" type="String" default="  Please Click Here" />

In this above Code , I have added Aura attribute to pass as a parameter from my VF page.

<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
                      <span class="slds-assistive-text"> </span>
                      <span class="slds-icon_container slds-icon-utility-ban slds-m-right_x-small" title="Description of icon when needed">
             
              <lightning:icon iconName="utility:error" variant="error" />
        
          </span>
          <h2>{!v.Title} <a href="{!v.Link}">{!v.Click}</a></h2>
          <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close">
              <lightning:icon iconName="utility:error" variant="error" />
              
            <span class="slds-assistive-text">Close</span>
          </button>
</div>

 In the above code, this copied from lightning css for alert. Just remember you need to use <lightning:icon> tag as it is a alternate tag for <svg>



Visualforce Page:-

<apex:page controller="linkforLightning">
<apex:includeLightning />
<apex:outputPanel id="twest" rendered="true">

 <div style="width:100%;height:100px;" id="Containers" />

 <script>
 $Lightning.use("AnkushTest:DemoLightningContApp", function() {
 $Lightning.createComponent("AnkushTest:GlobalAlert",
 { Link:"{!link}"
  
 },
 "Containers",
 function(cmp) {
 console.log('Component created');
 });
 });
 </script>
 </apex:outputPanel>
</apex:page>

To call Lighning Component I have to add a function in a script tag. 

$Lightning.use("AnkushTest:DemoLightningContApp", function() {
 $Lightning.createComponent("AnkushTest:GlobalAlert",
 { Link:"{!link}"

Above code creates and initializes the lightning component by using $lightning.use("You component name",function()).

link is my attribute through whoch I can dynamically create an alert .

This Way you can reuse your alert component in dfiferent visualforce pages.

Happy Lightning!!

😊