Adding lightning components to lightning experience

Cheers everyone , Lets have a look at one of newly introduced pilot feature in winter 16 release. 

You build your awesome lightning component with the taste of Lightning design system. Now you want to expose that lightning component in a lightning record detail page in newly introduced lightning experience (According to the time you read this post).

The following changes are required in order to display your lightning component in lightning experience.

  1. Enable the feature,
  2. Add the interfaces and
  3. Add the lightning component to your record page layout.

Enable the feature

To enable this feature navigate to your setup --> Lightning app builder and enable  Enable App Builder for Lightning Experience (PILOT)

WARNING!  Any record home pages you create as part of this pilot will revert back to the default page experience after Winter '16.

Always have that warning in your mind , you will lose all the changes you have made after winter 16.

Add the interfaces

We enabled this feature,  Now we will make these tweaks in your lightning component code.

Implements the flexipage:availableForRecordHome  interface and you are good to go. This will expose your component for lightning record page.

If you want to know more about your record like what's its Id and Sobject name then implement the following interfaces.

force:hasRecordId

This will add an attribute named recordId in the component.

<aura:attribute name="recordId" type="String" />

force:hasSObjectName

​This will add an attribute named sObjectName in the component.

<aura:attribute name="sObjectName" type="String" />

Use the above attributes to get these info. Here is sample component code for you. Just copy paste the code for learning purpose.

<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome,
                            force:hasSObjectName">

    <!-- Implemented the required interfaces.-->
    <h1>
        Hello Geeky developers :)
        <br/>
        I am from lightning.
    </h1>
    <br/>
    <!-- recordId and sObjectName attributes will be available for use.-->
    <h2> This is the record id : {!v.recordId}</h2>
    <br/>
    <h2> This is the SObject name of the current record : {!V.sObjectName }</h2>
</aura:component>

Add the lightning component to your record page layout

Switch to your lightning experience.

Go to your desired record detail page.

In the right top click on the gear icon and select Edit page as shown in the below image.

Now your lightning layout will open in lightning app builder which looks like this.

Now locate your custom developed lightning component in left side pane under custom section.

Drag the component to desired location in the page layout.

Click Save in the.

Now click on Activate in order to reflect the changes in the lightning page layout.

Now a pop up will be displayed for you to select the page layout. Select the required one and click save.

Hurrah !!! yes Go back to your respective record detail page which reflects the changes.Which looks like this if you used the above component code.

Let me know your thoughts or suggestions in comments.

Happy coding!!! laugh

 

Rating: 
No votes yet