$A.util In Aura Component
$A.util provides the utility methods which we can use in our JavaScript code.
What is $A over here?
It’s a namespace that gives the entry point for using the framework in JavaScript code.
Let’s explore util functions one by one:
addClass()
It adds a CSS class to a component
Signature:
addClass(Object element, String newClass)Snippet:
var myCmp = component.find("myCmp");
$A.util.addClass(myCmp, "myClass");hasClass()
It checks whether a component has a specified CSS class.
Signature:
hasClass(Object element, String className)Snippet:
var myCmp = component.find("myCmp");
var hasClass = $A.util.hasClass(myCmp, "myClass");removeClass()
It removes a class from a component
Signature:
removeClass(Object element, String newClass)Snippet:
var myCmp = component.find("myCmp");
$A.util.removeClass(myCmp, "myClass");toggleClass()
It toggles (adds or removes) a CSS class from a component.
Signature:
toggleClass(Object element, String className)Snippet:
var myCmp = component.find("myCmp");
$A.util.toggleClass(myCmp, "myClass");isEmpty()
Checks if the object is empty. An empty object’s value is undefined, null, an empty array, or an empty string.
Signature:
isEmpty(Object obj)Snippet:
var myCmp = component.find("myCmp");
var isEmpty = $A.util.isEmpty(myCmp);isUndefined()
It checks if the object is undefined.
Signature:
isUndefined(Object obj)Snippet:
var myCmp = component.find("myCmp");
var isUndefined = $A.util.isUndefined(myCmp);isUndefinedOrNull()
It checks if the object is undefined or null.
Signature:
isUndefinedOrNull(Object obj)Snippet:
var myCmp = component.find("myCmp");
var isUndefinedOrNull = $A.util.isUndefinedOrNull(myCmp);isArray()
It checks whether the specified object is an array.
Signature:
isArray(Object obj)Snippet:
var myCmp = component.find("myCmp");
var isArray = $A.util.isArray(myCmp);getBooleanValues()
It returns a native boolean for truthy and falsy values.
Signature:
getBooleanValue(Object val)Snippet:
var myCmp = component.find("myCmp");
var booleanValue = $A.util.getBooleanValue(myCmp);Please create an aura component with the name – MyUtilComponent to play around with the util methods 🙂
<aura:component>
<aura:attribute name="message" type="String" default="Success is the sum of small efforts, repeated." />
<lightning:card title="MyUtilComponent">
<aura:set attribute="actions">
<lightning:button label="Add Class" onclick="{!c.addClass}"/>
<lightning:button label="Has Class" onclick="{!c.hasClass}"/>
<lightning:button label="Remove Class" onclick="{!c.removeClass}"/>
<lightning:button label="Toggle Class" onclick="{!c.toggleClass}"/>
<lightning:button label="Is Emtpy" onclick="{!c.isEmpty}"/>
<lightning:button label="Is Undefined" onclick="{!c.isUndefined}"/>
<lightning:button label="Is Undefined Or Null" onclick="{!c.isUndefinedOrNull}"/>
<lightning:button label="Is Array" onclick="{!c.isArray}"/>
<lightning:button label="Get Boolean Values" onclick="{!c.getBooleanValue}"/>
</aura:set>
<p class="slds-p-horizontal_small" aura:id="p1">
<p>{!v.message}</p>
</p>
</lightning:card>
</aura:component> ({
addClass : function(component, event, helper) {
var obj = component.find("p1");
$A.util.addClass(obj, "myClass");
component.set('v.message', 'myClass has been added.');
},
hasClass : function(component, event, helper) {
var obj = component.find("p1");
var hasSpecifiedClass = $A.util.hasClass(obj, "myClass");
if(hasSpecifiedClass) {
component.set('v.message', 'Yes, This Component has myClass.');
} else{
component.set('v.message', 'No, This Component has not myClass.');
}
},
removeClass : function(component, event, helper) {
var obj = component.find("p1");
$A.util.removeClass(obj, "myClass");
component.set('v.message', 'myClass has been removed.');
},
toggleClass : function(component, event, helper) {
var obj = component.find("p1");
$A.util.toggleClass(obj, "myClass");
},
isEmpty : function(component, event, helper) {
var element = component.find("p1");
var isElementEmpty = $A.util.isEmpty(element);
if(isElementEmpty) {
component.set("v.message", "Element is empty");
} else {
component.set("v.message", "Element is not empty")
}
},
isUndefined : function(component, event, helper) {
var element = component.find("p1");
var isElementUndefined = $A.util.isUndefined(element);
if(isElementUndefined) {
component.set("v.message", "Element is Undefined");
} else {
component.set("v.message", "Element is not Undefined")
}
},
isUndefinedOrNull : function(component, event, helper) {
var element = component.find("p111"); // aura id - p111 is not specified in the component markup
var isElementisUndefinedOrNull = $A.util.isUndefinedOrNull(element);
if(isElementisUndefinedOrNull) {
component.set("v.message", "Element is Undefined Or Null");
} else {
component.set("v.message", "Element is not Undefined Or Null")
}
},
isArray : function(component, event, helper) {
var element = component.find("p1");
var isElementArray = $A.util.isArray(element);
if(isElementArray) {
component.set("v.message", "Element is Array");
} else {
component.set("v.message", "Element is not Array")
}
},
getBooleanValue : function(component, event, helper) {
var element = component.find("p1");
var booleanValue = $A.util.getBooleanValue(element);
component.set("v.message", booleanValue);
}
}).THIS .myClass{
border: solid rgb(0, 132, 255) 3px;
padding: 1.2rem;
margin: 3rem;
}Please copy the above code and preview them from an aura app.
On preview, you will be getting an output like below:
We have created individual controller methods for all the util methods.
Feel free to modify the code and play around.
In the next part, we will learn about the Aura Base Components which are provided by Salesforce and speed up the development process.
Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂
