Lightning components are the basic building blocks of developing an application in the Salesforce1 platform. They intertwine each other and form an app in the Salesforce1 platform.
So, Let’s look at how to build a basic lightning component.
Below are the Steps to be followed to build your lightning component.
- Go to the Developer Console.
- Go to File –> New –> Lightning Component.
- Provide a Name and Description to your Component.
- Click Submit.
- Your Lightning component has now been created.
Put the below snippet in your component and Save the Component.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"> Welcome to the world of Lightning ! ! ! </aura:component>
The above code simply prints the text “Welcome to the world of Lightning”. Note that I have implemented two interfaces in this component. The force:appHostable and flexipage:availableForAllPageTypes interfaces. They are used for the below purposes.
- force:appHostable – Allows a Lightning Component tab to be created against this component. This allows the component to be created as a stand-alone tab in the Salesforce UI.
- flexipage:availableForAllPageTypes – This allows the component to be made accessible in the Lightning App builder. If this interface is not implemented, then the component cannot be accesses in Lightning App builder.
Now, follow the below steps so that your component appears in the Salesforce1 Navigation tab.
- Goto Setup > tabs > Create new tab in the Lightning Component tabs section
- Create the new tab as seen in the screenshot below.
Now that we have created a tab for the component, let’s go ahead and follow the below steps to add the tab into a custom app.
- Goto Setup –> App Manager –> New Lightning App
- Select the appropriate Lightning tab and then assign it to the appropriate profile.
- In our case, just select the FirstLightningComponent and assign it to System administrator profile.
- Click Save.
Now, simply go to the App Launcher in your lightning interface and select the Lighting app which you have just created.
It should be rendered as seen in the below screenshot.