Skip to main content

Taking your Lightning Components Outside Salesforce - Lightning Out

Lightning Out  is a powerful feature where you can take your components built inside SFDC to the external system .The Program is under BETA currently .

I have been building lightning components since last year and this year more than half of my time I have been working with lightning components .In fact this year in one of the community led conferences,SEDreamin in Atalanta ,I along with one my colleague architect at CodeScience INC got opportunity to present on lightning components .

If you are interested on slides ,we have the slides on the slideshare  and also the code on the github repo  .

So in this post ,we will take one of those lightning components to outside salesforce system .We will be pushing this components to heroku .The Heroku app build will be using Node JS .So this article assumes you have knowledge on NodeJS.

Libraries Used

1.nforce - This is a utility that provides ability to obtain access token via oauth (web server flow mechanism) 

2.A free Heroku account .You can install Heroku toolbelt depending on your operating system

3.We are using express and  ejs npm package .Using Express and EJS you can build node applications super fast with minimal effort .Ejs has an awesome templating mechanism with excellent support for javascript

Salesforce Configuration 

1.Create a simple Connected App 


 2.Create a CORS record for your heroku domain 


This is a security feature again and found in security controls

    










Lets take a look at the app.js file which triggers the flow

Here are the key highlight from the code 
  1.  We use the nforce library to request for the oauth token 
  2. We store the oauth token using app local variables so that we can retrieve this in our templates
Here is the code for Homepage of the app


The key points to look for

1.Observe how simple it is to write four lines of code to inject the lightning component into the page
2.The EJS template engine makes our life lot simpler to inject variables .

The entire code is in my github repo if you want to take a peek .  


Lets watch the video of the component running outside SFDC 




Lightning Out from Mohith Kumar Shrivastava on Vimeo.



Please let me know the feedback on this post via twitter or mail . Happy Hacking :)

Popular posts from this blog

TLS 1.0 has been disabled For Sandbox - Salesforce

Salesforce has finally disabled TLS 1.0 in sandboxes .This is in preparation for disablement later in 2017 for PRODUCTION instances .

Now this would have not impacted your integrations in PRODUCTION org but if your integration is broken in your sandbox ,this means you have only few months to sort this and fix before this affects your integration for PROD live users .
Before we deep drive on how to possibly fix this and work with your external systems to figure solution ,lets first understand what is TLS and why did SFDC moved to 1.x and had to disable TLS 1.0
TLS 1.0 Explained























TLS 1.1 Improvements 
Added protection against cipher-block chaining (CBC) attacks. Support for IANA registration of parameters.

Clearly TLS 1.1 is more secure(Compared to 1.0) and protects salesforce resources against CBC attacks .
Identify if this change broke anything .The things that can be affected in your instances are as below Web requests to Salesforce URLs that require authenticationWeb requests to the login pag…

Opening Modal Using Lightning Component Framework of SFDC

One of my friend from India threw a challenge .The challenge was to open a modal by using latest and greatest lightning components framework and modals design from SLDS .For the love of community I thought of sharing the entire code base that I did .

So here we start ..

Business Use Case - Need a handy SalesLeader board component that can be used to display the Sales revenue generated by each sales rep for current year in the order of decreasing total revenue .On click of the tile ,we will show detail opportunity list aggregating the revenue .

The component can be dragged in lightning design experience or in App builder lightning Page .

Video Demonstration-



SalesLeaderBoard from Mohith Kumar Shrivastava on Vimeo.








Frameworks Used -
Lightning Design Systems (SLDS) for CSSLightning Component Framework for client side logicApex aura enabled class for backend logicApproach
The component hierarchy is very important to imagine or mindmap before we dig deeper- SalesLeaderMain
    -SalesLeaderBoard
    …

Invoking Apex Callout From Process Builder

Process builder is GA in Spring 15 and one of the queries I came across was around how to invoke apex callouts from Process builder .

Before process builder came we had two common approaches of calling webservice 

1)We have outbound messages as one of the Actions for workflows.This works if other party implements the WSDL that is generated once Outbound messaging is defined with appropriate end point .

2)Most of times future method invoked through triggers allowed to do apex callouts and invoke external web service provided the future method is annotated with @future(callout=true).This provides lot of flexibility and one of the best approaches .

3)Flow triggers was in BETA and this was also one of the ways we could invoke callouts provided the Flow implements process plugin .To understand in detail how to implement process plugin refer to the below example

The purpose of this blogpost is to demonstrate the new possibility of invoking apex callout through Process Builder 

I tried initi…