Add Lightning Components In UI

Add Lightning Components In UI

In my Last post we learn the basic of lightning and components. Today we will continue with where we can use them.

We can use lightning component in 4 places.

  1. Lightning App
  2. Salesforce 1
  3. Lightning Experience
  4. Visualforce

We all know how to use Lightning component in Lightning App. Today we learn to use lightning component in all remaining places.

Add Lightning Components to Salesforce1

Make your Lightning components available for Salesforce1 users.

In the component you wish to add, include implements=”force:appHostable” in your

aura:component tag and save your changes.

<aura:component implements=”force:appHostable”>

The appHostable interface makes the component available as a custom tab.

Use the Developer Console to create Lightning components.

Include your components in the Salesforce1 navigation menu by following these steps.

  1. Create a custom Lightning component tab for the component. From Setup, enter Tabs in the Quick Find box, then select Tabs.

Note: You must create a custom Lightning component tab before you can add your component to the Salesforce1 navigation menu. Accessing your Lightning component from the full Salesforce site is not supported.

  1. Add your Lightning component to the Salesforce1 navigation menu.
  2. From Setup, enter Navigation in the Quick Find box, then select Salesforce1 Navigation.
  3. Select the custom tab you just created and click Add.
  4. Sort items by selecting them and clicking Up or Down.

In the navigation menu, items appear in the order you specify. The first item in the Selected list becomes your users’ Salesforce1 landing page.

  1. Check your output by going to the Salesforce1 mobile browser app. Your new menu item should appear in the navigation menu.

Add Lightning Components to Lightning Experience

In the components you wish to include in Lightning Experience, add

implements=”force:appHostable” in the aura:component tag and save your

changes.

<aura:component implements=”force:appHostable”>

Use the Developer Console to create Lightning components.

Follow these steps to include your components in Lightning Experience and make them available to users in your organization.

  1. Create a custom tab for this component.
  2. From Setup, enter Tabs in the Quick Find box, then select Tabs.
  3. Click New in the Lightning Component Tabs related list.
  4. Select the Lightning component that you want to make available to users.
  5. Enter a label to display on the tab.
  6. Select the tab style and click Next.
  7. When prompted to add the tab to profiles, accept the default and click Save.
  8. Add your Lightning components to the App Launcher.
  9. From Setup, enter Apps in the Quick Find box, then select Apps.
  10. Click New. Select Custom app and then click Next.
  11. Enter Lightning for App Labeland click Next.
  12. In the Available Tabs dropdown menu, select the Lightning Component tab you created and click the right arrow button

to add it to the custom app.

  1. Click Next. Select the Visible checkbox to assign the app to profiles and then Save.

Using Components Add Lightning Components to Lightning Experience

  1. Check your output by navigating to the App Launcher in Lightning Experience. Your custom app should appear in theApp Launcher.

Click the custom app to see the components you added.

Use Lightning Components in Visualforce Pages

Add Lightning components to your Visualforce pages to combine features you’ve built using both solutions. Implement new functionality

using Lightning components and then use it with existing Visualforce pages.

There are three steps to add Lightning components to a Visualforce page.

  1. Add the <apex:includeLightning /> component to your Visualforce page.
  2. Reference a Lightning app that declares your component dependencies with $Lightning.use().
  3. Write a function that creates the component on the page with $Lightning.createComponent().

Adding <apex:includeLightning>

Add <apex:includeLightning /> at the beginning of your page. This component loads the JavaScript file used by Lightning

Components for Visualforce.

Referencing a Lightning App

To use Lightning Components for Visualforce, define component dependencies by referencing a Lightning dependency app. This app

is globally accessible and extends ltng:outApp. The app declares dependencies on any Lightning definitions (like components)

that it uses. Here’s an example of a simple app called lcvfTest.app. The app uses the <aura:dependency> tag to indicate

that it uses the standard Lightning component, ui:button.

<aura:application access=”GLOBAL” extends=”ltng:outApp”>

<aura:dependency resource=”ui:button”/>

</aura:application>

To reference this app, use the following markup where theNamespace is the namespace prefix for the app. That is, either your org’s

namespace, or the namespace of the managed package that provides the app.

$Lightning.use(“theNamespace:lcvfTest”, function() {});

If the app is defined in your org (that is, not in a managed package), you can use the default “c” namespace instead, as shown in the

next example. If your org doesn’t have a namespace defined, you must use the default namespace.

Creating a Component on a Page

Finally, create your component on a page using $Lightning.createComponent(String type, Object attributes,

String locator, function callback). This function is similar to $A.createComponent(), but includes an additional

parameter, domLocator, which specifies the DOM element where you want the component inserted.

Let’s look at a sample Visualforce page that creates a ui:button using the lcvfTest.app from the previous example.

<apex:page>

<apex:includeLightning />

<div id=”lightning” />

Using Components Use Lightning Components in Visualforce Pages

$Lightning.use(“c:lcvfTest”, function() {

$Lightning.createComponent(“ui:button”,

{ label : “Press Me!” },

“lightning”,

function(cmp) {

// do some stuff

});

});

</apex:page>

This code creates a DOM element with the ID “lightning”, which is then referenced in the $Lightning.createComponent()

method. This method creates a ui:button that says “Press Me!”, and then executes the callback function.

Important: You can call $Lightning.use() multiple times on a page, but all calls must reference the same Lightning dependency app.