Skip to main content

How to Create Manual Round Robin ID in Salesforce

Alert in Lightning Component

How to show Alerts in Lightning Component.

So today we'll learn to use alerts in lightning component. In lightning component we have multiple alerts.

1.  Info Alerts




To use info alerts copy and paste below code in your component.

<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_info" role="alert"> <span class="slds-assistive-text">info</span> <span class="slds-icon_container slds-icon-utility-user slds-m-right_x-small" title="Description of icon when needed"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#user"></use> </svg> </span> <h2>Logged in as John Smith (johnsmith@acme.com). <a href="javascript:void(0);">Log out</a> </h2> <div class="slds-notify__close"> <button class="slds-button slds-button_icon slds-button_icon-small slds-button_icon-inverse" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> </div>

___________________________________________________________________________


2. Warning Alerts






<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_warning" role="alert"> <span class="slds-assistive-text">warning</span> <span class="slds-icon_container slds-icon-utility-warning slds-m-right_x-small" title="Description of icon when needed"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use> </svg> </span> <h2>Your browser is outdated. Your Salesforce experience may be degraded. <a href="javascript:void(0);">More Information</a> </h2> <div class="slds-notify__close"> <button class="slds-button slds-button_icon slds-button_icon-small" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> </div>

___________________________________________________________________________

3. Error Alerts






<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert"> <span class="slds-assistive-text">error</span> <span class="slds-icon_container slds-icon-utility-error slds-m-right_x-small" title="Description of icon when needed"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use> </svg> </span> <h2>Your browser is currently not supported. Your Salesforce may be degraded. <a href="javascript:void(0);">More Information</a> </h2> <div class="slds-notify__close"> <button class="slds-button slds-button_icon slds-button_icon-small slds-button_icon-inverse" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> </div>

______________________________________________________________________________



You can use these alerts on click of a button or on any event you want. You just have
to use <aura:if> tag to show and hide these alerts.

Note : If the svg icons doesn't work for you so please use <lightning:icon> tag to
show icons.

Share this article with your friends if this helps you somehow.

Source : www.lightningdesignsystem.com

Comments

  1. How to enable this to work? I have created my component but this is still not visible on the home page

    ReplyDelete

Post a Comment

Popular posts from this blog

How to send WhatsApp from Lightning Component Salesforce ?

Send WhatsApp from Lightning Component SalesforceHi folks, in this article I will explain how you can send WhatsApp from Lightning Component using https://wa.me/
In this example I will create a Quick Action button on Contact which will be connected with my Lightning Component.
Please follow the steps below : 
Step 1 : Create a Lightning Component & Apex as shown below
WhatsApp.cmp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action…

Send WhatsApp and Save Chat using Lightning Component Salesforce | Salesforce Tutorials

Hello folks,
In this article you will learn to send WhatsApp and Save the Chat using Lightning Component Salesforce. 
Prerequisite : 
Create a custom object WhatsApp__c
Create custom fields as shown below : 


Please follow the code below : 

WhatsAppComponent 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action="{!c.doInit}"value="{!this}"/><articleclass="slds-card"><divclass="slds-card__header…

Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app

How to Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app ?
In this blog I will explain how you can get Parent Id when overriding standard actions with a lightning component.
For example I have changed my Opportunity New button action with a custom Lightning Component. 
Let's create a new account and from the related tab try creating the new Opportunity. Have you noticed any change in URL ?
Let me share the URL with you :  _________________________________________________________________________ https://kapilbatra1-dev-ed.lightning.force.com/lightning/o/Opportunity/new?recordTypeId=0127F000000htlpQAA&additionalParams=accid%3D0017F00002S6g9H%26&inContextOfRef=1.eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7Im9iamVjdEFwaU5hbWUiOiJBY2NvdW50IiwicmVjb3JkSWQiOiIwMDE3RjAwMDAyUzZnOUhRQVIiLCJhY3Rpb25OYW1lIjoidmlldyJ9LCJzdGF0ZSI6e319&count=3 _________________________________________________________________________
In above URL you …