Category: lightning

Value Provider and Global value providers in Salesforce lightning

In this Salesforce tutorial, we are going to learn about value provider and global value providers in Salesforce lightning Components. In our previous Salesforce lightning, we learned about expressions in lightning components.

What is a value provider?

Value Providers in lightning Component encapsulate related values together and used to access data. In Salesforce lightning, we have two value providers for a component they are v (View) and c (Controller).

v (View) Value Provider.

Using this Value provider, user can access the values of a lightning components attribute in the component markup.

Example

As shown above, the name of the attribute is defined as “prasanth”, where v is the value provider for a component attribute which represent the view.

c (Controller) Value Provider.

c (Controller) Value Provider enables us to wire up event handlers and action for the component. Client side controller handles events within a component. It’s a JavaScript resource that defined the functions for all of the components actions.

What are global Value providers in lightning components?

Global Value providers in lightning components are global values and methods that a component can use in expression.

In Salesforce, we have five global value providers they are

Global value providerDescription
globalIDIt returns global ID for a component and every component will have unique globalId.
$BrowserThis return information about system hardware and Operating system.
$LabelThe $Label global value provider enables you to access labels stored outside your code.
$LocaleIt returns the information about current user’s preferred locale.
$Resource This provider lets you reference images, style sheets and JSP.

Lightning component

Output

Value Provider and Global value providers

Salesforce Lightning Expression : If Component

In this Salesforce tutorial, we will talk about Salesforce lightning Expression. In our previous tutorial we learn about Aura:attribute and how we can use aura attribute in Salesforce lightning app and lightning component.

What is Salesforce Lightning Expression ?

Salesforce lightning Expression allows you to make calculations and access property values and is evaluated and dynamically replaced when component is evaluated.

Expression syntax :

  • Syntax is {!<expression>}

When ever we have an expression, that expression will not be written on the screen the value of the expression is written on the screen.

Rules to use Expression.

  • Only use the {!} syntax in the markup in .app file or .cmp resources.
  • If we using an expression inside a javascript, use string syntax to evaluate an expression.

Example

As shown above, we have a variable called theLabel and we getting a component attribute whose named is label. Here we have not used any ! symbol.

Attributes

Attributeattribute typeRequired
bodyComponentDefRef[]yes
elseComponentDefRef[]
isTrueBoolean yes

Lightning Component

In this example we are going to learn about how to use an expression in Lightning component and lightning application using If else statement.

Lightning Application.

  • Click on Preview button.

Salesforce Lightning Expression

From above, we have added <aura:component> and included a nested component called <aura:attribute> and the name of the attribute is Edit, attribute type is Boolean and the default value is “false”. Now there is another component available called <aura:if>. Using this attribute we can check the value of  {!v.Edit} expression. If the value of this expression is True, it will display “Submit” button. Then if the statement is “false” then the following string is displayed.

Output

Salesforce Lightning Expression

When the expression is True then “Submit” button will appear.

Salesforce Lightning Expression

Switch to Lightning Experience | Navigation and Setup

Salesforce classic and Lightning experience are the two desktop user interfaces developed in Salesforce.com. Now we are will learn how to switch to Lightning experience from Salesforce classic desktop UI and also we will learn about navigation and Setup in Lightning experience.

What is Salesforce Lightning Experience?

Salesforce  Lightning experience is  a modern,  fast,  and  intelligent  user interface  built  with  proven  Salesforce1 Mobile  App  technology.  It  is  a  new generation  productive  user  interface designed  for  Sales  team  and  Support teams  in  Salesforce.com.

How to Switch to Lightning Experience from Salesforce Classic?

Every Salesforce user is required to switch to Lightning Experience from Salesforce Classic to experience new User Interface and improves setup.

  • Navigate to Setup | Your Name | Switch to Lightning Experience.Switch to lightning Experience

When we click on Switch to Lightning experience we will be redirected to new lightning experience user interface as shown below.

Salesforce lightning experience

Navigation and Setup.

In Salesforce.com, developers and administrators spend lot of their time using Setup. Now we learn how to customize, configure and setup lightning experience.

Navigation Bar in Lightning Experience.

Navigation bar in Lightning experience is totally different from Salesforce classic UI. It provides an efficient and consistent interface to navigate through various Salesforce organization Apps. Every application will have their own navigation bar at the top of the page which helps to find records, list and items.

Navigation bar in Lightning experience

  1. App Launcher Icon : Here user can access items and Salesforce applications.
  2. Application name.
  3. Salesforce items like Files, reports, opportunities, Accounts, Dashboards. Using this section we can upload files, can create records directly from the navigation bar.
  4. In files, we can upload files to salesforce directly from navigation bar.

Salesforce classic contains standard objects, custom objects, visualforce tabs, chatter feets, groups, people and many more. In Salesforce lightning experience we can add multiple items like lightning page tabs and utilities in the navigation menu bar .

App Launcher in Lightning Experience.

In Salesforce Classic UI, users can switch from one App to another App using App launcher. In Salesforce classic, navigate to Force.com App Menu | App Launcher.

app launcher

In Salesforce lightning Experience, to get App Launcher simply click on  icon as shown above. Now every Salesforce standard App, custom app and connected apps like Gmail, Google Drive will be listed in App Launcher.

Salesforce user can drag titles to sort their personal view of the App launcher as shown below.

app launcher in sfdc

How to search records in Lightning experience?

To search for a record in Salesforce lightning, click on the search bar and enter the record name that you are looking for.

How to Search records in Lightning Experience

Help Menu in Salesforce Lightning Experience

Help Menu in Salesforce Lightning Experience is different when compared with Salesforce classic. In lightning experience, each page has a contextual help menu with links to resources, help topics, walkthroughs, videos, developer guides and PDF manuals relates to that specific page.

Help menu in Lightning experience

Salesforce Lightning Design System (SLDS)

Salesforce released an user interface called Salesforce Lightning Design System as open source. This  provides all CSS (Cascading Style Sheets) and Images to create the Standard lightning Component instead of write CSS again for lightning Components. We can build rich enterprise experience and custom applications with the patterns using Salesforce Lightning Design System.  To build an application using SLDS we need four types of resources they are

Salesforce lightning design system

CSS framework

We can defines User Interface components using CSS framework like headers, labels, form elements, layouts, size and other visual adjustments.

Icons.

It includes PNG and SVG (both individual and spritemap) versions of our action, custom, doctype, standard and utility icons.

Font

New Salesforce Sans font is designed to give distinct visual voice bad personality to a product.

Design Tokens

These design variables allow you to tailor aspects of the visual design to match your brand. Customizable variables include colors, fonts, spacing, and sizing.

Who can use Salesforce Lightning Design System?

The new lightning design systems can be used in Visualforce pages, Lightning pages, Lightning components, Mobile Apps and other web applications. Salesforce lightning design system can be used by various Salesforce users like

Designers

The Lightning Design System reflects the patterns and components that underpin the Salesforce product. These patterns and components provide a unified language and consistent look and feel when designing apps and products within the Salesforce ecosystem.

=> Download Design System (2.4.1)

Developers

The Salesforce Lightning Design System (SLDS) component library is actively developed for Salesforce developers to create a uniform look and feel across all Salesforce  applications while adhering to CSS best practices and conventions

Lightning

Salesforce Lightning Design System is made available to Salesforce lightning components running in Salesforce lightning experience and Salesforce1 mobile application with out adding static resources for lightning components.

What is Process Builder Salesforce

Process Builder Salesforce is the advanced version of workflow rules which is simple and powerful. In this Salesforce tutorial, we will learn about different between Workflow, Visual Workflow and process builder Salesforce.

What is Process Builder Salesforce?

Process Builder Salesforce is the advanced version of workflow rules which is simple and has a powerful design. Process builder in Salesforce allows user to :

  • Create your processes using a convenient layout with point-and-click efficiency.
  • Create your whole process in one place rather than using multiple workflow rules.
  • Create processes by collaborating with different teams in your business.
  • Stop using Apex code to automate simple tasks.

Process builder Salesforce

Process Builder salesforce or Visual workflow tools allow users to create customized processes and wizard-like user experiences. Both tools offer a large selection of actions they can perform based on criteria defined by the user. Available actions can be extended by packages installed in the org. This provides another way in which you can expose your functionality for building customized scenarios. This approach does not require the user to write any code.

What is Workflow in Salesforce?

Workflow in Salesforce enables you to set up workflow rules. A workflow rule identifies what kinds of record changes or additions trigger specified workflow actions, such as sending email alerts and updating record fields. Workflow rules and actions are associated with a specific object (and can cross objects only to update fields on a related master record).
  • Workflows are fast, easy and button-click friendly.
  • Workflow rules will be triggered based on a set of criteria.

What is Visual Workflow in Salesforce?

Visual Workflow enables you to create flows, which are triggered by users rather than events. Unlike Workflow, which always executes rules and actions behind the scenes, Visual Workflow offers screens for displaying and collecting information from the user running the flow.

  • Flows aren’t tied to any one object.
  • They can look up, create, update, and delete records for multiple objects.

What is lightning Component Attribute : Aura:attribute

Lightning Component Attribute (aura:attribute) are like member variables on a class in Apex. <aura:attribute>tag is used to add an attribute to the lightning component and Salesforce lightning App.

  • Each attribute must have “name” and “type“.
  • To make attribute as required use required=”true” in the tag.
  • To make default value use default=”string or integer“.

Attribute naming Rules.

An attribute name must follow these naming rules.

  • Must begin with a letter or an underscore.
  • Must contain only alphanumeric or underscore characters.

What is lightning Component Attribute : Aura:attribute

In this Salesforce tutorial, we are going to learn about Lightning Component attributes and how can to use <aura:attribute> tag in Salesforce lightning app and lightning component.

In this Salesforce example, we are going to create an application and a component called “addition”. Here we will add two integers and will find the sum of two integers. And also we add styling to the Salesforce lightning component.

Here we have to define two tags they are <aura:component> and <aura:attribute>. This lightning Component Attribute will have name and type.

lightning Component Attribute

As shown above, we have selected type as integer because we are storing numbers. And if we want to provide default values enter default=”value”. To display two numbers we have to use particular expression like {!v.num1} + {!v.num2} = {!v.sum}.

  • We also defined a button called submit. When a submit button is clicked the result will be displayed on the screen.
  • The sum value will not be displayed in the output when we click on submit because we have not defined what should happen when submit button is clicked.

lightning Component Attribute

Here we have to add a call a method called {!c.add}. Now click on controller in the component and add the controller as shown below.

lightning Component Attribute

When we click on Controller, Controller file will be created automatically. We want to call {!c.add} function.

  • Click on Save button.

lightning Component Attribute output.

When we preview the lightning application, the output will be as follow.

lightning Component Attribute

The look and feel of the output will be changes by adding style to lightning component. Click on Style and add the following css code given below.

Output :

lightning Component Attribute

Conclusion : In this Salesforce tutorial, we have learned about lightning Component Attribute and created Salesforce lightning component for addition of two integer. In our upcoming Salesforce training, we will learn about Salesforce lightning Component composition with an example.

Styling Salesforce lightning Application using Bootstrap

Styling Salesforce lightning Application means adding text colour, font size, padding, border, background colour and applying all other CSS  properties. Styling lightning application or Lightning component is done by downloading external static resources like Bootstrap Style sheets and upload to Static resources. Application is the top-level component whose markup is in .app resources. CSS (Cascade Style Sheets)can be used in its bundle in a resource called <appName>.css.

Styling Salesforce lightning application can be done through CSS (Cascade Style Sheets) and bootstrap style sheets (external static resources).

Styling Salesforce lightning Application using CSS.

In this process, we have to add CSS to compound bundle by clicking the STYLE button in the developer console sidebar. Styling Salesforce lightning Application can be done using Salesforce Lightning Design System in Apps, using external CSS, using Join expression and styling lightning Application using design tokens.

In our previous Salesforce Tutorial, we have created Salesforce Lightning Components and created Salesforce lightning Application. Here in this tutorial, we are add background colour, borders, text colour, font size for the Salesforce Lightning app called “firstlightning.app

  • Navigate to developer console and create new lighting Component.

Here we have created a new component called “tutorialkart”.  As shown above we have inserted H1 tag for the title and used paragraph. And next we have used division using <div> tag. We have defined classed in style. So we have used classed for Salesforce user as shown above.Now go to the application that we created.

Styling Salesforce lightning Application using Bootstrap

Now I want some background colour and border to this component. Click on Style and we can ay styling as shown above.

For adding background colour we have added white, padding is 10px, margin: auto; width: 50%; border: 1px solid green; padding: 10px; font-family:Arial, Helvetica, sans-serif.

  • Now click on preview button for output.

Styling Salesforce lightning Application using Bootstrap

Instead of using this CSS that we defined, we can use the existing CSS from external static resource called Bootstrap. We have to download external static bootstrap style sheet and upload to Static resources in Salesforce.com.

Styling lightning Application using external static resource.

External Static resource bootstrap Style Sheets can be downloaded at developer.salesforce.com form the following http://developer.salesforce.org/bootstrap-sf1/ Download to your local system and upload to Static resources as shown below.

  • Navigate to Setup | Build | Develop | Static resources.

Styling Salesforce lightning Application using Bootstrap

  • Click on New button to add new external static resources bootstrap file.

Styling Salesforce lightning Application using Bootstrap

  • Enter name and choose the file.
  • Click on Upload button and click on Save button.

How to use bootstrap css in Salesforce lightning component.

ltng is the tag required and we have provide the resource and name of the file as shown below.

Styling Salesforce lightning Application using Bootstrap

The above code is to use bootstrap style sheets.

  1. ltng is short form and the tag called require is used.
  2. Resource is the path of the file.
  3. Bootstrap is the name of the file.

Creating first Salesforce Lightning App

Salesforce Lightning App is a special top level component whose markup is in a .app resource. To build Salesforce lightning application, we use many Lightning components, JavaScript, Lightning data service, CSS and HTML language.

In this Salesforce Tutorial, we will learn how to create Salesforce lightning Components and will create our own simple Salesforce lightning application using components.

How to create Salesforce lightning Components?

To Create Salesforce lightning Components, login to Salesforce developer account and navigate to developer console.

  • Now go to File | New | Lightning Component.Creating Salesforce lightning component
  • Enter name and description for the lightning component.
  • Here we have named lightning component as hello and second component as hello1.
  • Lightning component has .cmp extension as shown below.

how to create salesforce lightning component

  • As shown above, lightning component has opening and closing tags. Simply we have added H1 tag with message.

how to create salesforce lightning component

  • This is the second lightning component that created with name hello1. The component is named as hello1.cmp.

Creating our first Salesforce Lightning App.

In this example, we are going to create Salesforce lightning app from developer console and we named that application as “firstlightning“.

  • Navigate to Developer console | File | New | Lightning Application.

how to create salesforce lightning app

  • Click on Submit button.

how to create salesforce lightning app

  • As shown above, we have created our first Salesforce lightning app using two lightning components.
  • <c : is a standard name space. We can create our own namespace.
  • We have to use component file name in the application.
  • <c:hello/> displays the components hello and <c:hello1> displays hello1 component in Salesforce lightning app.
  • Now click on Save button.

How to preview Salesforce lightning app?

To preview Salesforce lightning app output click on the preview as shown below.

how to create salesforce lightning application

  • Click on Preview, now a new tab will be opened that displays Salesforce lightning application output.

 salesforce lightning app

As shown above, we observe that Salesforce lightning application name is in the URl and the output.

Conclusion : In this Salesforce tutorial, we have learned about how to create Salesforce lightning components and lightning application. In our next Salesforce tutorial, we will learn how to add styling to lightning application using external static resources.