Aura Components

Introduction to Aura Components in Salesforce - Learn Here

In this blog, we are going to study the topic of Aura Components in Salesforce. 

Let's begin with the Aura Components programming model: 

Advertisement

  • provides out-of-the-box components 
  • Event-Driven Architecture 
  • Framework optimized for performance 
  • Rich Component Ecosystem 
  • Fast Development 
  • Device aware and Cross Browser Compatibility 

Aura Components are self-contained and reusable units of the app. Its framework includes a set of prebuilt components. We can combine and configure components to form new components in-app. A component can contain other components, as well as HTML, CSS, JS or any other web-enabled code. 

Aura Component Bundle

Component – The only required resource in a bundle. Contains markup for the component or app. Each bundle contains only one component or app resource. 

CSS Styles – Styles for the component. 

Controller – Client-side controller methods to handle events in the component. 

Design – Required for components used in the lightning app builder or lightning pages. 

Helper – JavaScript functions can be called from any JavaScript code in a component’s bundle. 

Documentation – A description, sample code, and one or multiple references to example components. 

Renderer – Client-side renderer to override default rendering for a component. 

SVG – Custom icon resources for components used in the lightning App builder. 

dont miss out iconDon't forget to check out: Use Aura Component in Screen Flow | Salesforce Flow Builder Tutorial

Four Language Framework

  • XML (XML Component Definition) 
  • CSS (Styling Components) 
  • JS (JS Controller, Helper and Renderer) 
  • Apex (Apex Controller) 

What is a Component?

A Component is a bundle that includes a definition resource written in markup and may include additional, optional resources like a controller, stylesheet and so on. 

Syntax: 

<aura:component > 
<p> My First Lightning Aura Component </p> 
</aura:component> 

What is an Application?

  • An application is just a special kind of Component. 
  • You can think of an app as being different from a component in only two meaningful ways: 
  1. An App uses <aura:application> tag instead of <aura:component> tag.
  2. Only an app has a preview button in the Developer Console.

Syntax: 

<aura:application extends = "force:slds"> 
<c:DemoComponent/> 
</aura:application>

Data Binding between Components

  • We can add a component in the markup of another component (also known as a container component). 
  • We can use an expression to initialize attribute values in the component based on the attribute values of the container component. 
  • There are two forms of expression syntax, which exhibit different behaviour for data binding between the components. 

Two Ways of Data Binding

  • Unbounded Expressions 

                Syntax 

                           {#expression} 

  • Bounded Expressions 

                Syntax 

                          {!expression} 

Unbounded Expression Example

<!--c:parent--> 
<aura:component> 
<aura:attribute name=”parentAttr” type=”String” 
default=”parent attribute”/> 
<c:child childAttr =”{#v.parentAttr}”/> 
</aura:component/> 

Explanation 

  • {#v.parentAttr} is an unbounded expression. 
  • Any change to the value of the childAttr attribute in c:child does not affect the parentAttr attribute in c:parent and vice versa. 

dont miss out iconCheck out another amazing blog by Bhawana here: Organization Wide Default (OWD) Sharing Settings in Salesforce

Bounded Expression Example 

<!--c:parent--> 
<aura:component> 
<aura:attribute name=”parentAttr” type=”String” 
default=” parent attribute”/> 
<c:child childAttr = “{!v.parentAttr}”/> 
</aura:component/>

Explanation 

  • {!v.parentAttr} is a bounded expression. 
  • Any change to the value of the childAttr attribute in c:child affects the parentAttr attribute in c:parent and vice versa. 

Responses

Popular Salesforce Blogs