Thursday, December 8, 2016

Lightning Out off Platform Example

Due to the limited documentation out there for the BETA Lightning Out functionality I am posting my code for others to benefit.

Please note that after extensive research I have come to the conclusion that off platform functionality is broken, but executing the code from within a naked VF page should work. The issue is that the bootstrapping process does not adjust the URLs for the dynamically loaded scripts and styles sheets - the JS assumes it is still run from within a SF org domain. A case with SF has been filled but if I am incorrect on my conclusion please comment.

Even if one patches the script/style URLs loading at runtime further errors manifest from withing aura_prod.js

Salesforce's 'Lighting Out' Example

Prior to using the below code ensure you have wrapped your lighting component into an App, setup a connected App, and CORS whitelisted your domain - afterwards copy and paste the below into your HTML file to be served from a server.

...
<div id='lightning'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://<REMOVED>.lightning.force.com/lightning/lightning.out.js"></script>
<script>
sAccessToken = location.hash.match(/access_token=([^&]*)/) ? location.hash.match(/access_token=([^d]*)/)[1] : null;
sInstanceURL = location.hash.match(/instance_url=([^&]*)/) ? decodeURIComponent(location.hash.match(/instance_url=([^&]*)/)[1]) : null;
if (sAccessToken ==  null) {
  window.location.href = 'https://login.salesforce.com/services/oauth2/authorize?display=popup&response_type=token&client_id=<YOUR CONNECTED APP'S SECRET KEY>&redirect_uri=https://localhost'
}
//debugger;
$Lightning.use(
  "c:LightningOutTaxonomyLoader"
  ,function() {
    $Lightning.createComponent(
      "c:OrchestraCMS_Sample_Multi_Content_By_Taxonomy_Loader"
      ,{
        ComponentHeading: 'Header',
        <MORE ATTRIBUTES HERE>
      }
      ,"lightning"
      ,function(cmp) {
        //do some stuff
        debugger
      }
    );
  }
  ,sInstanceURL
  ,sAccessToken
);
</script>
......

No comments:

Post a Comment