Overview of Aura Components in Salesforce | The Developer Guide
Aura
The modular, reusable parts of an app are called aura components. From a single line of text to a whole app, they stand for a reusable portion of the user interface. Many computer languages and frameworks, including JavaScript and Java Swing, leverage event-driven programming.
The functional units of Aura are called components, and they consist of reusable, modular UI parts. They might also have HTML markup or other elements. A component's properties and events are its public components. Aura offers pre-built components in the UI and aura namespaces.
Every element belongs to a namespace. The button component, for instance, is preserved as a button. The syntax <ui:button label="Submit"/> can be used to refer to cmp in another component, where label="Submit" is an attribute setting.
To create a component, follow this syntax.
<aura:component> <!-- Optional component attributes here --> <!-- Optional HTML markup --> <div class="container"> Hello world! <!-- Other components --> </div> </aura:component>
The following extra properties are available for the aura: component tag.
Don't forget to check out: Aura Vs LWC: Why You Should Learn LWC? | Salesforce Lightning Tutorial
Attribute Type Description
- Access - string - Whether a component can be used outside of its own namespace is indicated by the string. Public (the default) and worldwide are options.
- controller – String - The component's server-side controller class in the format namespace. myController, or, if using the default namespace, myController.
- Description - String - The component's description.
- Extends – Component - the part that has to be expanded.
- Extensible – Boolean - If the component may be extended, set true. True is the default.
- Implements – String - a list of interfaces that the component implements, separated by commas.
- IsTemplate – Boolean - If the component is a template, set it to true. True is the default. A template's aura:component tag must have isTemplate="true" set.
- template - Component - The model for this element. A template bootstraps the framework and application loading. Aura:template is the default template. By developing your own component that goes beyond the standard template, you can alter the template.
Module 1 - Create a basic aura component
Launch the developer console and select New > Lighting Component.
Name the component, and make sure every box is checked.
<aura:component implements=”force:appHostable, flexipage: availableForAllPageTypes, flexipage: availableForRecordHome,force:hasRecordId, forceCommunity: availableForAllPageTypes,force:lightningQuickAction” access=” global”> <h1>Hello world</h1> </aura:component>
Module 2- View Aura component
For creating the aura application. New->lighting application
<aura:application extends=”force:slds” > <c:Hello/> </aura:application>
Module 3: Aura Interfaces
By specifying a component's properties, interfaces establish the component's shape. Create an interface to enable the use of a component in various settings, such as in Lightning App Builder or on a record page.
ex: flexipage:availableForRecordHome,force:hasRecordId
Module 4: Qualities
This is nothing more than a type of lighting component variable that we utilize to flow data. The two required arguments are kind and Name. Access indicates how variables can be accessed.
Note: v is a provider of value, while c is a provider of actions.
Check out another amazing blog by Ashutosh here: Salesforce Mobile Application - All You Need to Know About
Module 5: Flow of data using Attributes
Data can be flowed using this attribute:
<aura:component implements=”force:appHostable, flexipage: availableForAllPageTypes,flexipage:availableForRecordHome, force: hasRecordId,forceCommunity:availableForAllPageTypes, force:lightningQuickAction” access=” global” >
<h1>Hello Component</h1>
<aura:handler name=”init” action=”{!c.myAction}” value=”{!this}”/><aura:attribute type=”string” name=”name”/>Hello {!v.name}
</aura:component>
This is the controller:
({
myAction : function(component, event, helper) {component.set(‘v.name’,’World’);}
})
Note Every aura: handler needs name, value (for component events), event (for application events), and action in order to function. System events like init or change have predefined names called name. This instructs the aura: handler which event to join. The event specifies a different event that should be attached, which could be a custom event. The current component ("{!this}") is specified as the object to which the event is attached for an init.
Events
An instance of a component can fire a component event. The component that fired the event or a component in the containment hierarchy that receives the event can both respond to component events.
Responses