Lightning Strikes Code

Lightning Everywhere

Lightning Components were announced at Dreamforce 2014 with the promise of being a mechanism for creating functionality in a single place that could be used in many different contexts.  With the Winter 16 release, Lightning Components were made generally available and can be used in many different places throughout Salesforce. This post examines different contexts in which an Lightning Component can be used (quick read: skip to the table summary). Contexts that Lightning Components can be used which require membership in a nominated pilot, like Lightning Extensions, are out of scope.

Example Lightning Component

A component that shows the current time is used as an example in this post.

The Lightning Component
The Lightning Component

A format string to be applied to the current time can be specified as part of the component configuration and when a user clicks on the output, the component refreshes the current time.

Enable Lightning Components

Before you start with Lightning Components, you must enable My Domain. After you successfully register it you must then come back to the My Domain setup and click to Deploy to Users. Also, make sure you are logged in through the My Domain URL.

Lightning App

It is fairly straightforward to use a component in a Lightning App. Create the app and then place the component in it. Here is a minimal implementation of a timeSampleApp.

The app can be navigated to by going to its URL of https://yourdomain.lightning.force.com/c/timeSampleApp.app.

Lightning Pages

To make the component available to the Lightning App Builder for Lightning Pages it must implement flexipage:availableForAllPageTypes and have its access attribute set to GLOBAL.

It will then show up in the Custom section of the Lightning Components panel in the page editor where it can then be dragged onto the page. Once it is dragged on to the page, the properties can be set that have been defined in the design file.  Note that if the component has required attributes with no default value and they are not able to be set through the property editor because they are not in the design file, an error will be generated.

App Builder
App Builder

Another thing to note is that the icon for the component in the Lightning Components sidebar panel is a star. This is the svg that is specified in the component bundle’s svg file.

After the page is saved, it can be made available to Salesforce1 by creating a Lightning Page Tab. It also needs to be added to the mobile navigation via Mobile Administration | Salesforce1 Navigation. The Lightning Page will only be visible in the navigation menu in the Salesforce1 App, not in the Lightning Experience (LEX).

Lightning Component Tabs

A component can be made available in the navigation menu of LEX by creating a Lightning Component tab and then adding that tab to the App from which it should be launched.

Create Lightning Component Setup
Create Lightning Component Setup

The component must implement the force:appHostable interface. The same component can implement multiple interfaces, so the component can appear in many different places.

After custom tab is created, add it to an App and then it will be available from the App Launcher in LEX under that app, or leave it out of an App and see it only in the Other Items launcher.

In LEX App Launcher
In LEX App Launcher

If the component needs to show up in the Salesforce1 navigation menu it needs to be added in Mobile Administration | Salesforce1 Navigation just like a Lightning Page Tab.

Community Pages

The component must implement the forceCommunity:availableForAllPageTypes to be available to be added to Community pages in the Community Builder. It can then be added to the community page by dragging it on to the appropriate page (same as in Lightning App Builder).

Community Builder
Community Builder

Lightning Experience Record Home Pages

This is a pilot that is available in all dev orgs that allows the record home page to be customized with the Lightning App Builder. The component must implement the flexipage:availableForAllPageTypes, or to be the more restrictive the flexipage:availableForRecordHome which will limit the component to be used in record home pages when using the Lightning App Builder.

The home page editor is the Lightning App Builder. The simplest way to edit the current record home page is to click the Edit Page menu button when viewing a record of the page. Also, the ability to create custom Lightning Experience Record Pages from scratch in the Lightning App Builder has been added in Spring 16.

Edit Record Home Page
Edit Record Home Page

If the component needs the record ID it must implement force:hasRecordId. If it needs the object’s name it needs to implement force:hasSObjectName. Each one instructs the framework to provide the record’s ID or sObject name in corresponding attributes of recordId and sObjectName which can be accessed through the attribute value provider (e.g., v.recordId) as is the case with any other attribute. If the component is not executing in the context of the record home page those values will not be set, so it is up to the developer to code appropriately for that.

The simple time example component does not do anything with a record, so it doesn’t need to implement any of those interfaces.

Home Page Editor
Home Page Editor

The ability to create custom tab sets by using the Tab component on record home pages is available in Spring 16 (pilot). Components can then be added to the desired tabs, using the App Builder.

Lightning Components for Visualforce

I blogged in more detail about this in this previous post. The component does not need to implement any special interfaces; however, a global Lightning App that declares it as a dependency must implement the ltng:outApp.

The Visualforce page then includes the Salesforce Lightning Out library with the <apex:includeLightning/> standard component and uses the $Lightning.use and createComponent methods to create the component. The <apex:includeLightning/> standard component abstracts away the location of the Lightning Out library JS so that individual pages don’t need to depend on its where it is located.

Lightning Components for Visualforce
Lightning Components for Visualforce

The ability to run Lightning Components anywhere with Lightning Out is beta in Spring ’16. It is similar to Lightning Components for Visualforce, but more setup is involved to handle credentialing and connecting to Salesforce since the pages are not hosted in Salesforce like Visualforce pages, but are instead hosted outside of Salesforce.

Example Lightning Everywhere Component

After implementing all of those interfaces, the component looks the same as it did before but it implements a few interfaces and its access level is GLOBAL.

Lightning Components Context Summary

Lightning Components in different contexts
Context Interface to Implement LEX Setup Salesforce1 Setup Use From
App n/a n/a n/a URL (/c/theApp.app)
Lightning Pages flexipage:availableForAllPageTypes n/a
  • Create a Lightning Page Tab
  • Mobile Administration | Salesforce1 Navigation
Salesforce1 Navigation
Lightning Component Tabs force:appHostable
  • Create a Lightning Component Tab
  • Add to App(s) as desired
  • Create a Lightning Component Tab
  • Mobile Administration | Salesforce1 Navigation
  • LEX App Launcher
  • Salesforce1 Navigation
Community Pages forceCommunity:availableForAllPageTypes Community Builder for a Community template n/a Authenticated Community User
Lightning Experience Record Home Page
  • force:hasRecordId
  • force:hasSObjectName
  • flexipage:availableForRecordHome OR
  • flexipage:availableForAllPageTypes
Edit the Record Home page or navigate through App Builder (Spring 16) n/a Replaces LEX Record Home Page
Lightning Components for Visualforce Dependency Lightning App must implement ltng:outApp Can add the containing VF page if “Available for Salesforce mobile apps and Lightning Pages” checked Can add the containing VF page if “Available for Salesforce mobile apps and Lightning Pages” checked Normal VF page with <apex:lightningInclude/> and $Lightning.use

More

This article gave an overview of different contexts in which Lightning Components can be used. If you want an introduction to the Lightning Experience I recommend the Develop for Lightning Experience Trailhead module. If you want to learn about Lightning Component development I recommend the Lightning Components Trailhead module and Quick Start. Also, check out the Lightning Components Developer’s Guide and refer to the auradocs (https://yourdomain.lightning.force.com/auradocs) app.

4 thoughts on “Lightning Everywhere

  1. Thank you Peter for this!

    I have a question regarding lightning components, communities and Visualforce pages. For a community that uses the Salesforce Tabs + Visualforce template, what is the best way to implement a lightning component for the desktop and teh Salesforce1 app? Do we have to resort to add the lightning component to a VIsualforce tab?

    Our users are all community users and I have been struggling to find a way to make one of my component available to them.

    Thank you for your help,

    Max

    1. Hey Max, I haven’t tried it out yet to see if the component tabs can be added to a VF template community. If they cannot you could use Lightning Components For Visualforce, create a Visualforce tab and add that as you stated, though ideally you’d just be able to use the Lightning Component tab.

  2. Hi Peter,

    I ended up using a lightning page for the Community on mobile device (it does not show on the desktop version) and created a Visualforce page and made sure it was not available on mobile device.

    Not crazy about this solution but it works so….

Leave a Reply

Your email address will not be published. Required fields are marked *