Approach  :– Salesforce Lightning Out components embedded in the mobile application.

What does the Approach mean – The lightning components(UI + JS + CSS as a bundle)  will be developed in Salesforce which will serve a specific purpose, This lightning components then can be embedded in any 3^rd party application .

Pre-Requisites/Implementation Steps  :

a.       To embed the lightning components in the Mobile App/3rd party App, the Salesforce instance in which the components have been build/developed should have My Domain Enabled.(to know more about Salesforce My domain refer - https://releasenotes.docs.salesforce.com/en-us/winter16/release-notes/rn_lightning_cruc.htm)

b.       Create a lightning App in Salesforce that extends  lightning out and which calls the lightning component which we needs to be embedded in the Mobile Centris App

The above code is the Lightning App code and ‘TestComponent’ is the component which we have to embed in the 3rd party application.

c.       The third party application should consume salesforce SDK to get the salesforce session Id/OAuth Token which will be used as a parameter to load the lightning component .

In our case we already had Salesforce SDK been consumed in the mobile app which we uses as is.

d.       Create a connected app from which we will get the Consumer Key.

e.       Add the below JS file in  the 3rd party application HTML file.

<script src=” ORGBASEURL /Lightning/lightning.out.js”></script>              ------------ IMP

Note*  In the above script src ORGBASEURL should be the base URL of the lightning experience instance of Salesforce.

f.        Embed the below JS code in the 3rd party application HTML file where we need to embed the lightning component.

               

MobileSpeakerFlowApp = The lightning App developed in Salesforce and which host the lightning component.

TestComponent = The lightning component that we need to embed in the 3rd party App.

mainContent123 = The Div ID in the 3rd party App UI/HTML where we need to embed the lightning component.

https://***  the blurred part = base URL for the lightning experience instance of Salesforce(where the lightning components are developed).       

credsData.clientId = Salesforce Session Id

Limitations :

1.       MyDomain needs to be created/enabled for the salesforce instance in which we are developing lightning components and to access the salesforce data from the Mobile Centris App.

Note* We are in process in identifying more limitations as we come across.