Salesforce Lightning Container Overview


Earlier with Visualforce we have a way of exposing an external App using "iframe". Now with Lightning Component Development we have a similar functionality available with Lightning Container which hosts all external App content in an "iframe" which makes Lighting Container a powerful way of rendering external apps within our Lightning Components. In order to use external App within Lighting Container, we will just need to upload our App to a Static Resource and reference it under Lightning Container.

Lightning Container in action: Lets go ahead and use a simple JavaScript App (Source Link) and save it under Static Resource and see how it is rendered when used in Lightning Container.

Step 1: Copy paste below Code in a new text editor and save it as ".html" file.
 <!DOCTYPE html>  
 <html>  
 <head>  
  <meta charset="UTF-8">  
  <title>Countries CRUD</title>  
  <style>  
   input[type='submit'], button, [aria-label]{  
    cursor: pointer;  
   }  
   #spoiler{  
    display: none;  
   }  
  </style>  
 </head>  
 <body>  
 <h1>Sample App!</h1>  
 <form action="javascript:void(0);" method="POST" onsubmit="app.Add()">   
  <input type="text" id="add-name" placeholder="New country">  
  <input type="submit" value="Add">  
 </form>  
 <div id="spoiler" role="aria-hidden">  
  <form action="javascript:void(0);" method="POST" id="saveEdit">  
   <input type="text" id="edit-name">  
   <input type="submit" value="Edit" /> <a onclick="CloseInput()" aria-label="Close">&#10006;</a>  
  </form>  
 </div>  
 <p id="counter"></p>  
 <table>  
  <tr>  
   <th>Name</th>  
  </tr>  
   <tbody id="countries">  
   </tbody>  
 </table>  
 <script>  
 var app = new function() {  
  this.el = document.getElementById('countries');  
  this.countries = ['France', 'Germany', 'England', 'Spain', 'Belgium', 'Italy', 'Portugal', 'Irland', 'Luxembourg'];  
  this.Count = function(data) {  
   var el  = document.getElementById('counter');  
   var name = 'country';  
   if (data) {  
    if (data > 1) {  
     name = 'countries';  
    }  
    el.innerHTML = data + ' ' + name ;  
   } else {  
    el.innerHTML = 'No ' + name;  
   }  
  };  
  this.FetchAll = function() {  
   var data = '';  
   if (this.countries.length > 0) {  
    for (i = 0; i < this.countries.length; i++) {  
     data += '<tr>';  
     data += '<td>' + this.countries[i] + '</td>';  
     data += '<td><button onclick="app.Edit(' + i + ')">Edit</button></td>';  
     data += '<td><button onclick="app.Delete(' + i + ')">Delete</button></td>';  
     data += '</tr>';  
    }  
   }  
   this.Count(this.countries.length);  
   return this.el.innerHTML = data;  
  };  
  this.Add = function () {  
   el = document.getElementById('add-name');  
   // Get the value  
   var country = el.value;  
   if (country) {  
    // Add the new value  
    this.countries.push(country.trim());  
    // Reset input value  
    el.value = '';  
    // Dislay the new list  
    this.FetchAll();  
   }  
  };  
  this.Edit = function (item) {  
   var el = document.getElementById('edit-name');  
   // Display value in the field  
   el.value = this.countries[item];  
   // Display fields  
   document.getElementById('spoiler').style.display = 'block';  
   self = this;  
   document.getElementById('saveEdit').onsubmit = function() {  
    // Get value  
    var country = el.value;  
    if (country) {  
     // Edit value  
     self.countries.splice(item, 1, country.trim());  
     // Display the new list  
     self.FetchAll();  
     // Hide fields  
     CloseInput();  
    }  
   }  
  };  
  this.Delete = function (item) {  
   // Delete the current row  
   this.countries.splice(item, 1);  
   // Display the new list  
   this.FetchAll();  
  };  
 }  
 app.FetchAll();  
 function CloseInput() {  
  document.getElementById('spoiler').style.display = 'none';  
 }  
 </script>  
 </body>  
 </html>  
Step 2: Now lets go ahead and upload above file to our Static Resource.









Step 3: Now we create our Lightning Component and reference above uploaded Static Resource (Lightning_Container_App) within Lightning Container.

Lightning_Container.cmp:
 <aura:component access="global" implements="flexipage:availableForAllPageTypes">  
   <lightning:container aura:id="id1" src="{!$Resource.Lightning_Container_App}" />  
 </aura:component>  

Step 4: We create a Lighting App to use above created Component. Once we create a an app using below lines of Code, click "Preview" to view our external JavaScript App rendered within a Lightning Component hosted in an iframe!

Lightning_Container_App.app:
 <aura:application >  
  <c:Lightining_Container />  
 </aura:application>  














Please refer to below links for additional information on Lightning Container Component.

1. Lighting Components Developers Guide
2. Salesforce Developer Blog Post

Lightning Container Component Limits:
  • Lightning:container Component is available as a developer preview. This feature is available in Developer Edition orgs only
  • Lightning:container Component isn’t designed for the multi-page model, and it doesn’t integrate with browser navigation history
  • If we navigate away from the page a lightning:container component is on, the component doesn’t automatically remember its state. The content within the iframe doesn’t use the same offline and caching schemes as the rest of Lightning Experience

  • Hope you like reading this and any feedback or comments are really appreciated - Tks!

    Comments

    Popular posts from this blog

    Displaying Toast Message from Modal in Lightning Components

    Lightning Component to display dynamic sObject data

    Lightning RecordForm - An enhanced Lightning Data Service