Extending the lightning experience

Last week I attended the Lightning NowTour event in Paris. During the 2 days, we had very interesting presentations/demos. One of the coolest features are:

• Navigation/App launcher review. It was messy before.
• Lightning data service to make life easy for developers.
• Bottom Toolbar for a lightning app
• Flow integration in a lightning page.
• Lightning page per record type. My favorite #1.
• Extending the sales path to any object. My favorite #2.
• And a lot of other things

Some of these are already available in the current version Winter17.

I start playing with lightning 6 months ago. I noticed that the Lightning platform is getting more maturity, making life easy for admin by providing a cool app builder; A kind of drag and drop IDE to build your lightning pages with live preview.

But, to build these pages you need components! I think this is an area where Salesforce should invest a lot.

Without a decent set of components, lightning app builder is useless.

On my personal projects I tried to create a record page where you have 2 components:

1. Object information let's say a loyalty program
2. Related list of steps with the ability edit theme from this page.

I spend a reasonable amount of time looking in the documentation, on the app exchange. There was no such component providing inline editing for related list!

With the lightning, if the component is not there, then DIY

What is nice with lightning is the ability to create brand new components and make them available in the app builder. In my case I created 3 components:

• RelatedListDataGridsComponent to display all the related list defined in page layout
• RelatedListDataGridComponent to display a specific related list. The component will reuse the same columns metadata defined in the page layout.
• DataGridCellComponent to display a cell in a related list. This component will display the right input based on the column type(boolean, date, text...).

For instance, here is the markup for the RelatedListGridsComponent

<aura:component controller="RelatedListDataGridController" 
      implements="flexipage:availableForRecordHome,force:hasRecordId"
      ?access="global">
    <aura:attribute name="relatedLists"type="Object[]"/>
    <aura:handler name="init"value="{!this}"action="{!c.doInit}" />
    <aura:handler event="force:refreshView"action="{!c.doInit}" />
    <aura:iteration items="{!v.relatedLists}"var="relatedList">
       <c:RelatedListDataGridComponent 
			recordId="{!v.recordId}" 
			relatedListLabel="{!relatedList.label}" 
			relatedListName="{!relatedList.name}" 
			columns="{!relatedList.columns}"/>
    </aura:iteration>
?</aura:component>

Now how to handle the data exchange between the browser and the server in a fashion and a generic way? Some of the magic capabilities in Salesforce are the Rest API and the metadata layer. To leverage this, I created a generic controller apex class with these API(s):

public with sharing class RelatedListDataGridController {       
    /**
     * Return the list of related metadata information
     * */
    @AuraEnabled
    public static Object[] getReleatedListsMetadata(Id objectId){}
    
    /**
     * Return the metadata of the related list
     * */
    @AuraEnabled
    public static Object getReleatedListMetadata(Id objectId, String relatedListLabel){}
    
    /**
     * Return the the related list items
     * */
    @AuraEnabled
    public static Object[] getReleatedListItems(Id objectId, String relatedlistName){} 
    
    /**
     * Save the related list items
     * */
    @AuraEnabled
    public static boolean saveRelatedListItems(String jsonData){}
} 

Behind the scene, the apex controller:

• Fetch the object metadata like the name, the record type and the fields.
• Call the right Rest API. For this work, I used the Tooling API and Sobjects API.
• @AuraEnaled annotation will handle all the serialization/deserialization stuff.

What's the result of this?

Hold on, here is the result of consultation mode. In this example I have a loyalty program with his steps (for 5 points you free menu).

If we hit the edit pen, we switch to the edit mode with an action bar in the bottom.

As you see it's pretty nice and it's a pure lightning component. Of course all these components are available in the lightning app builder.

The code source of this work is available on GitHub and can be deployed to salesforce instance using the blue magic button!

If someone is not familiar with lightning here a good starting point