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
Luciano RobertoLuciano Roberto 

Pass value of Class from controller component Salesforce Lightning

Hi Folks,

I have the following code which displays an alert on my component:

 

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem" access="GLOBAL" controller="AlertController">   
     
    <aura:attribute name="Alert" type="Alert__c" default="{'sobjectType': 'Alert__c',
                         'Tipo_de_Alerta__c': '',
                         'Name': '',
                         'Alerta1__c': ''
                          }"/>
    
    
    <!-- Alert -->
<div  aura:id="divToast"  class="demo-only" style="height: 4rem;"> 
  <div class="slds-notify_container slds-is-relative">
      
      <div  class="slds-notify slds-notify_toast slds-theme_warning" role="status">
          
      <span class="slds-assistive-text">Warning</span>
      <span class="slds-icon_container slds-icon-utility-warning slds-m-right_small slds-no-flex slds-align-top" title="">  
        
      </span>
      <div class="slds-notify__content">
        <h2 class="slds-text-heading_small ">Alerta 1</h2> 
          
           <lightning:buttonIcon iconName="utility:close" variant="bare" alternativeText="Close"
        iconClass="{!v.type == 'warning' ? 'light' : 'dark'}" size="large"
        class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse"
        onclick="{!c.close}"/>      
      </div>
    </div>
  </div>     
</div>
    
  
   
</aura:component>

In line <div  class="slds-notify slds-notify_toast slds-theme_warning" role="status">,  class can be variable, the value of class, being:

<div  class="slds-notify slds-notify_toast slds-theme_warning" role="status">
<div class="slds-notify slds-notify_toast slds-theme_error" role="status">
<div class="slds-notify slds-notify_toast slds-theme_success" role="status">

 

I need to pass the value of the class through the Controller.js of the component.
It would be something of the type :

<div  class="{!v.Alert.Tipo_de_Alerta__c}" role="status">

 

and in Controller.js according to the condition, pass the class:

doInit : function(component, event, helper)
    {
if (Condition== true)
{
component.set("v.Tipo_de_Alerta__c", "slds-notify slds-notify_toast slds-theme_warning" );
}

if (Another Condition == true)
{
component.set("v.Tipo_de_Alerta__c", "slds-notify slds-notify_toast slds-theme_error" );
}
}
...

Does anyone know how to tell me?

 

Thanks

 

Best Answer chosen by Luciano Roberto
Maharajan CMaharajan C
Hi Luciano,

Yes you can set the Class from Controller by Using aura:id   and   $A.util.addClass

1. Declare the Aura:Id in div Like Below:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem" access="GLOBAL" controller="AlertController">   
     
    <aura:attribute name="Alert" type="Alert__c" default="{'sobjectType': 'Alert__c',
                         'Tipo_de_Alerta__c': '',
                         'Name': '',
                         'Alerta1__c': ''
                          }"/>
    
    <!-- Alert -->
<div  aura:id="divToast"  class="demo-only" style="height: 4rem;"> 
  <div class="slds-notify_container slds-is-relative">
      
      <div  aura:id="divNotific" class="slds-notify" role="status">
          
      <span class="slds-assistive-text">Warning</span>
      <span class="slds-icon_container slds-icon-utility-warning slds-m-right_small slds-no-flex slds-align-top" title="">  
        
      </span>
      <div class="slds-notify__content">
        <h2 class="slds-text-heading_small ">Alerta 1</h2> 
          
           <lightning:buttonIcon iconName="utility:close" variant="bare" alternativeText="Close"
        iconClass="{!v.type == 'warning' ? 'light' : 'dark'}" size="large"
        class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse"
        onclick="{!c.close}"/>      
      </div>
    </div>
  </div>     
</div>
      
</aura:component>

2. From Controller use the $A.Util.addClass:

doInit : function(component, event, helper)
{
if (Condition== true)
{
    $A.util.addClass(component.find("divNotific"), "slds-notify_toast slds-theme_warning");
}

if (Another Condition == true)
{
    $A.util.addClass(component.find("divNotific"), "slds-notify_toast slds-theme_error");
}
....

Reference Link :
http://www.biswajeetsamal.com/blog/tag/adding-and-removing-styles/​​​​​​​

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!

Thanks,
Maharajan.C

All Answers

Raj VakatiRaj Vakati
Can u share the AlertController class also ?? i will rewrite the code 
Luciano RobertoLuciano Roberto
Thank you so much, I really need it.
Luciano RobertoLuciano Roberto

The Controller is empty, I need to write it

 

  doInit : function(component, event, helper)
    {

        
      // var alerta = "slds-notify slds-notify_toast slds-theme_warning";
      //  component.set("v.Tipo_de_Alerta__c", alerta );
        
    },
Raj VakatiRaj Vakati
Do it like this
  
public class AlertController  {
    @AuraEnabled
    public static void getEntity(String alertMessag){
       // do you work here 
    }

}
  
doInit : function(component, event, helper)
 {
	if (Condition== true)
	{
component.set("v.Tipo_de_Alerta__c", "slds-notify slds-notify_toast slds-theme_warning" );
}

if (Another Condition == true)
{
component.set("v.Tipo_de_Alerta__c", "slds-notify slds-notify_toast slds-theme_error" );
}


  var action = component.get('c.getEntity'); 
        action.setParams({
            "alertMessag" :  YOURCONDTION 
        });
        action.setCallback(this, function(a){
            var state = a.getState(); // get the response state
            if(state == 'SUCCESS') {
             
            }
        });
        $A.enqueueAction(action);
}

 
Maharajan CMaharajan C
Hi Luciano,

Yes you can set the Class from Controller by Using aura:id   and   $A.util.addClass

1. Declare the Aura:Id in div Like Below:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem" access="GLOBAL" controller="AlertController">   
     
    <aura:attribute name="Alert" type="Alert__c" default="{'sobjectType': 'Alert__c',
                         'Tipo_de_Alerta__c': '',
                         'Name': '',
                         'Alerta1__c': ''
                          }"/>
    
    <!-- Alert -->
<div  aura:id="divToast"  class="demo-only" style="height: 4rem;"> 
  <div class="slds-notify_container slds-is-relative">
      
      <div  aura:id="divNotific" class="slds-notify" role="status">
          
      <span class="slds-assistive-text">Warning</span>
      <span class="slds-icon_container slds-icon-utility-warning slds-m-right_small slds-no-flex slds-align-top" title="">  
        
      </span>
      <div class="slds-notify__content">
        <h2 class="slds-text-heading_small ">Alerta 1</h2> 
          
           <lightning:buttonIcon iconName="utility:close" variant="bare" alternativeText="Close"
        iconClass="{!v.type == 'warning' ? 'light' : 'dark'}" size="large"
        class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse"
        onclick="{!c.close}"/>      
      </div>
    </div>
  </div>     
</div>
      
</aura:component>

2. From Controller use the $A.Util.addClass:

doInit : function(component, event, helper)
{
if (Condition== true)
{
    $A.util.addClass(component.find("divNotific"), "slds-notify_toast slds-theme_warning");
}

if (Another Condition == true)
{
    $A.util.addClass(component.find("divNotific"), "slds-notify_toast slds-theme_error");
}
....

Reference Link :
http://www.biswajeetsamal.com/blog/tag/adding-and-removing-styles/​​​​​​​

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!

Thanks,
Maharajan.C
This was selected as the best answer
Luciano RobertoLuciano Roberto
Thank you very much Maharajan C, it worked perfectly !!