Folks,


In the Salesforce Lightning Design System portal, show an example of a toast usage as per link below:

https://www.lightningdesignsystem.com/components/toast/


I used this example as the basis for setting it up in an environment.
The environment is configured as described below:

I have an object, called Alert, where the user can include as many alerts as he wants.
Each record of the object is an alert.

Fields of the Alert__c object:

- Name (Alert ID)
- Alert_Type__c (Example: Success, Info, Error, Warning) - User selects the type of alert you want to display
- Alert1__c (Alert message to be displayed)

 

-------------------------------------------------------------------------------

 

I created a component to display the alert on a certain page as per the code below:

 

Alert.cmp
-----------------


<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem" access="GLOBAL" controller="AlertController">   

    
<aura:attribute name="html" type="List" />
    
    
<aura:attribute name="showToast" type="boolean" default="false"/>
    
<aura:attribute name="Alert" type="Alert__c" default="{'sobjectType': 'Alert__c',
                         'Tipo_de_Alerta__c': '',
                         'Name': '',
                         'Alerta1__c': ''
                          }"/>
    
    
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    
<aura:if isTrue="{!v.showToast}">
    
           <aura:iteration items="{!v.html}" var="lista">        
					<div class="demo-only" style="height: 4rem;">
		
   							 <div class="slds-notify_container slds-is-relative">    
				
        							<div aura:id="alerta" role="status"> 
                                 
                                 <!--  <div id="{!Lista.Name}" role="status">   -->
													<div  class="slds-notify__content">
                            
                                                                <h2 class="slds-text-heading_small ">                
                                                                     <aura:unescapedHtml value="{!lista.Alerta1__c}" />  
                                                                </h2>
                            
                                                    <lightning:buttonIcon iconName="utility:close" variant="bare" alternativeText="Close"
                                                     iconClass="{!v.type == 'warning' ? 'light' : 'dark'}" size="small"
                                                     class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse"
                                                     onclick="{!c.close}"/>      
    
													</div>
									</div>
							</div>
					</div>
			</aura:iteration>
    
    
    
    
   

</aura:if>
    
    
    
</aura:component>

AlertController.js
-----------------------





({


   doInit : function(component, event, helper)
    {

  var action = component.get( "c.getMsgs" );

         action.setCallback(this, function(response) 
                           {                               
                             
                               var state = response.getState();

                               if(state == 'SUCCESS')
                               {                                   
                                   var alertMsgList = response.getReturnValue();
                                   var lista = [ ];                                  
                                   
                                   
                                   if(alertMsgList.length > 0)
                                   {                                       
                                       component.set("v.showToast", true);                             
                                   }
                                 
                                   
                                   
                                   for(var i = 0; i < alertMsgList.length; i ++) 
                                   {                                       
                                     
                                       /*
                                       var alerta = alertMsgList[ i ].Alerta1__c;
                                       var tipo = alertMsgList[ i ].Tipo_de_Alerta__c;
                                       var titulo = alertMsgList[ i ].Name;                                       
                                       */
                                       
                                      lista.push(alertMsgList[i]);

      						       }
                                   
                                   
                                   component.set("v.html",lista);
                                 
                                   var tipoAlerta = component.find( "alerta" );
                                   
                                   
                              //     var tipoAlerta = document.getElementById("!v.Alert.Name");
                              
                                                                      
                                              $A.util.addClass( tipoAlerta, "slds-notify" );
                                              $A.util.addClass( tipoAlerta, "slds-notify_toast" );  
                                              $A.util.addClass( tipoAlerta, "slds-theme_success" );  
   
                                   
     }
                               
               
                          else {
                                   console.log("Failed with state: " + state);
                               }
                           }); 
        
        
        $A.enqueueAction(action);
        
  
        
    },

   
    
   close: function(cmp, event, helper) 
    {
   $A.util.addClass(cmp.find('alerta'), "slds-hide");
    //  $A.util.addClass(document.getElementById('{!v.lista.Name}'), "slds-hide");
    },
   
   
       
    
})

AlertController.apxc
-------------------------------------




public class AlertController {
    
    
       
    
 @AuraEnabled
    public static List<Alert__c> getMsgs() {
        
        List<Alert__c> lst = new List<Alert__c>();
        lst = [select Tipo_de_Alerta__c, Name, Alert_Style__c,  Alerta1__c from Alert__c where Data_inicial__c <= :system.now() and Data_final__c >= :system.now()];
        return lst;
    }
    

    
}

What happens is that for every alert found, it needs to display it according to its characteristics:
- Type of alert
- Identification of each alert (For each alert, your type configuration and the close button will be checked)
- Alert message: This setting is the only one that is working, need to interact for each alert by formatting your type to receive the appropriate CSS and the close button for it.

In the Controller.js I put the part that configures the CSS and the separate close button just to test its operation, so it works only for one record, I need to put it to work in each interaction and to each of the records that are found .
That's what I can not do, if anyone can help me, I'll be very grateful.
Thank you