Lightning Component markup

Lightning Component markup resides in the .cmp file. In this Salesforce Lightning Tutorial, we will learn how to build our first working Lightning Component and also explore the basic building blocks of the Lightning Component framework, which includes Component Markup, the JavaScript controller, and helper. We will also learn how to wire a server-side Apex controller to client-side JavaScript. By the end of this Salesforce tutorial, we will have a Lightning Component that allows users to input a search string and search YouTube content.

Lightning Component markup

Lightning Component markup resides in the .cmp file. Markup consists of HTML elements, aura components, and other custom child components, that start with the default namespace c. Salesforce provides User Interface and components with the Lightning namespace are referred to as base components.

aura:component defines the root of the hierarchy. An access attribute defines whether a component is available globally or is just public. Global components can be accessed outside the namespace. If an AppExchange vendor allows subscriber organizations to use components, they will be marked as global.

Component Syntax 

<aura:component access="global">
   <!-- Optional coponent attributes here -->
   <!-- Optional HTML markup -->
</aura:component>

Providing description to the component

Providing a description of the component is helpful when our component is previewed in the document previewer. we can define the description as shown below:

<aura:component access="global" description="Youtube Search Component">
 <!-- Optional coponent attributes here -->
<!-- Optional HTML markup -->
 </aura:component>

Lightning component Interfaces

An interface defines where Lightning components are available. We can use a comma-separated list of interfaces as shown below example:

<aura:component access="global" description="Youtube Search Component"
implements="flexipage:availableForAllPageTypes,flexipage:availableForRecord
Home,force:appHostable">
<!-- Optional coponent attributes here -->
<!-- Optional HTML markup -->
</aura:component>
  • force:appHostable : Creates a component for use as a navigation element in the Lightning Experience.
  • forceCommunity:availableForAllPageTypes: Creates a component that’s available for drag and drop in the Community Builder.
  • flexipage:availableForAllPageTypes: Creates a component for use in Lightning pages or the Lightning App Builder.
  • flexipage:availableForRecordHome: Creates a component for use on a record Homepage in Lightning Experience.
  • force:LightningQuickAction: Creates a component that can be used with a Lightning-quick action.
  • Lightning:actionOverride: Overrides a standard action in Lightning Experience.

Attributes

Value providers hold data and provide a way to access that data. Lightning Components have two types of value providers they are v (view) and c (controller). An attribute is a placeholder to hold data like Java variables.

Example:-

<aura:component>
<aura:attribute name="searchString" type="String" default="lighnting
components"/>
</aura:component>

Name and data type are mandatory when defining attributes. An attribute can be one of the following types: primitive (string, integer, decimal, Boolean, double, date, dateTime), arrays (sets, list, maps), objects, custom Apex, functions, or Salesforce sObject.

How to display a value from an attribute

Using expression syntax, we can display a value from an attribute. The expression syntax can be used inside the component markup. The syntax for the expression is {! expression}.

<aura:application>
    <aura:attribute name="searchString" type="String" default="www.crmsalesforcetraining.com"/>
    <p>{!v.searchString}</p>
</aura:application>

Different Expression syntax examples:

  • Expression to reference a value from an attribute.
<aura:component>
<aura:attribute name="searchString" type="String" default="lighnting components"/>
<p>{!v.searchString}</p>
</aura:component>
  • Expression for calling client-side controller actions.
<Lightning:button label="Framework Button" onclick{!c.handleClick}"/>
The client-side JavaScript controller will be as following
({
handleClick : function(component, event)
{
}
})
  • Expression Operator
<aura:component>
<aura:attribute name="searchString" type="String" default="lighnting components"/>
  <p>{!'Hello' + v.searchString}</p>
</aura:component>
  • Function expression
<aura:component>
<aura:attribute name="searchString" type="String" default="lighnting
components"/>
  <p>{!concat('Hello',v.searchString)}</p>
</aura:component>
Scroll to Top