Overview of Aura Parts in Salesforce | The Developer Information

Aura

The modular, reusable elements of an app are known as aura parts. From a single line of textual content to an entire app, they stand for a reusable portion of the consumer interface. Many laptop languages and frameworks, together with JavaScript and Java Swing, leverage event-driven programming. 

The useful models of Aura are known as parts, and so they encompass reusable, modular UI elements. They may even have HTML markup or different parts. A part’s properties and occasions are its public parts. Aura gives pre-built parts within the UI and aura namespaces. 

Each factor belongs to a namespace. The button part, for example, is preserved as a button. The syntax <ui:button label=”Submit”/> can be utilized to consult with cmp in one other part, the place label=”Submit” is an attribute setting. 

To create a part, observe this syntax. 

<aura:part> 
  <!-- Non-compulsory part attributes right here --> 
  <!-- Non-compulsory HTML markup --> 
  <div class="container">  
    Whats up world! 
    <!-- Different parts --> 
  </div> 
</aura:part>

The next additional properties can be found for the aura: part tag.   

Remember to take a look at: Aura Vs LWC: Why You Should Learn LWC? | Salesforce Lightning Tutorial

Attribute Kind Description

• Entry – string – Whether or not a part can be utilized exterior of its personal namespace is indicated by the string. Public (the default) and worldwide are choices. 
• controller – String – The part’s server-side controller class within the format namespace. myController, or, if utilizing the default namespace, myController. 

• Description – String – The part’s description. 
• Extends – Part – the half that must be expanded. 
• Extensible – Boolean – If the part could also be prolonged, set true. True is the default. 
• Implements – String – a listing of interfaces that the part implements, separated by commas. 
• IsTemplate – Boolean – If the part is a template, set it to true. True is the default. A template’s aura:part tag will need to have isTemplate=”true” set. 

• template – Part – The mannequin for this factor. A template bootstraps the framework and utility loading. Aura:template is the default template. By creating your personal part that goes past the commonplace template, you possibly can alter the template. 

Module 1 – Create a fundamental aura part

Launch the developer console and choose New > Lighting Part. 

Title the part, and ensure each field is checked. 

<aura:part implements=”power:appHostable, flexipage: availableForAllPageTypes, flexipage: availableForRecordHome,power:hasRecordId, forceCommunity: availableForAllPageTypes,power:lightningQuickAction” entry=” world”> 
<h1>Whats up world</h1> 
</aura:part>

 Module 2- View Aura part 

For creating the aura utility. New->lighting utility 

<aura:utility extends=”power:slds” > 
<c:Whats up/> 
</aura:utility>

Module 3: Aura Interfaces

By specifying a part’s properties, interfaces set up the part’s form. Create an interface to allow the usage of a part in varied settings, comparable to in Lightning App Builder or on a document web page. 

ex: flexipage:availableForRecordHome,power:hasRecordId 

Module 4: Qualities

That is nothing greater than a kind of lighting part variable that we make the most of to movement knowledge. The 2 required arguments are type and Title. Entry signifies how variables will be accessed. 

 Word: v is a supplier of worth, whereas c is a supplier of actions. 

Take a look at one other wonderful weblog by Ashutosh right here: Salesforce Mobile Application – All You Need to Know About

Module 5: Movement of information utilizing Attributes

Knowledge will be flowed utilizing this attribute: 

<aura:part implements=”power:appHostable, flexipage: availableForAllPageTypes,flexipage:availableForRecordHome, power: hasRecordId,forceCommunity:availableForAllPageTypes, power:lightningQuickAction” entry=” world” > 
<h1>Whats up Part</h1> 
<aura:handler identify=”init” motion=”{!c.myAction}” worth=”{!this}”/><aura:attribute sort=”string” identify=”identify”/>Whats up  {!v.identify} 
</aura:part>

That is the controller:

({ 
myAction : operate(part, occasion, helper) {part.set(‘v.identify’,’World’);} 
})

Word Each aura: handler wants identify, worth (for part occasions), occasion (for utility occasions), and motion with the intention to operate. System occasions like init or change have predefined names known as identify. This instructs the aura: handler which occasion to hitch. The occasion specifies a special occasion that must be hooked up, which might be a customized occasion. The present part (“{!this}”) is specified as the item to which the occasion is hooked up for an init. 

Occasions 

An occasion of a part can fireplace a part occasion. The part that fired the occasion or a part within the containment hierarchy that receives the occasion can each reply to part occasions.