Getting Acquainted with Aura Components in Salesforce – Dive In Now

/ apex, Salesforce / By

In this blog post, we will delve into the subject of Aura Components within Salesforce.

Let’s initiate our exploration by examining the Aura Components programming model:

  • Offers pre-built components “out of the box”
  • Adopts an Event-Driven Architecture
  • Framework designed for optimal performance
  • Flourishes in a Rich Component Ecosystem
  • Facilitates Rapid Development
  • Exhibits Device Awareness and Cross Browser Compatibility

Aura Components manifest as self-contained and reusable building blocks of an application. The framework provides a collection of ready-made components that can be assembled and configured to create new components within the application. These components can encapsulate other components as well as include HTML, CSS, JavaScript, or any other web-enabled code.

Aura Component Bundle

Component – The indispensable resource within a bundle. It holds the markup for the component or app. Each bundle contains precisely one component or app resource.

CSS Styles – Defines the styles for the component.

Controller – Encompasses client-side controller methods tasked with managing events in the component.

Design – Mandatory for components integrated into the Lightning App Builder or Lightning Pages.

Helper – JavaScript functions accessible from any JavaScript code within the component’s bundle.

Documentation – Comprises a description, sample code, and one or more references to exemplar components.

Renderer – Acts as a client-side renderer, allowing the override of default rendering for a component.

SVG – Custom icon resources designed for components employed in the Lightning App Builder.

Framework of Four Languages

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

What Constitutes a Component?

A Component is a package comprising a defining resource constructed in markup and potentially accompanied by additional optional resources such as a controller, stylesheet, and more.

Syntax: 

<aura:component > 
<p> My First Lightning Aura Component </p> 
</aura:component><span data-ccp-props="{"201341983":0,"335551550":6,"335551620":6,"335559685":0,"335559731":720,"335559739":160,"335559740":259}"> </span>

What Constitutes an Application?

An application is essentially a distinct type of Component. Differentiating an app from a component involves just two significant distinctions: An App employs the aura:application tag in contrast to the aura:component tag. Exclusive to an app is the presence of a preview button within the Developer Console.

Syntax: 

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

Data Interconnection Among Components

Incorporating a Component within the markup of another component, often referred to as a container component, is possible. An expression can be employed to set attribute values within the component, taking into account the attribute values of the container component. Two distinct forms of expression syntax exist, each demonstrating varied behaviors when it comes to data binding between the components.

Dual Approaches to Data Binding

  • Unbounded Expressions 

                Syntax 

                           {#expression} 

  • Bounded Expressions 

                Syntax 

                          {!expression} 

Illustration of Unrestricted Expression

<!--c:parent--> 
<aura:component> 
<aura:attribute name=”parentAttr” type=”String” 
default=”parent attribute”/> 
<c:child childAttr =”{#v.parentAttr}”/> 
</aura:component/><span data-ccp-props="{"201341983":0,"335551550":6,"335551620":6,"335559685":0,"335559739":160,"335559740":259}"> </span>

Explanation 

  • {#v.parentAttr} represents an unbounded expression.
  • Modifications to the childAttr attribute’s value within c:child do not impact the parentAttr attribute in c:parent, and vice versa.

Illustration of a Bound Expression

<!--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. 

Related Posts