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:
- 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.
Don'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:
- An App uses <aura:application> tag instead of <aura:component> tag.
- 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.
Check 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