Skip to content

Instantly share code, notes, and snippets.

@kafkahw
Last active October 23, 2018 16:22
Show Gist options
  • Save kafkahw/1ebdc1b77a5808c92434770e1358b501 to your computer and use it in GitHub Desktop.
Save kafkahw/1ebdc1b77a5808c92434770e1358b501 to your computer and use it in GitHub Desktop.
Salesforce Lightning integration with 3rd party UI

3rd party UI in Lightning

Two ways to build UI in SF Lightning

  1. Lightning App Builder (Drag & Drop; no code required)
  2. Lightning Component Framework (programmatically)

We need to use the latter for 3rd party UI integration.

Lightning Component Framework

Document page: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_framework.htm

Short description: it's a SF home-grown UI framework that provides a set of built-in components (each component in encapsulated similar to React component). It has it own markup files with extension .cmp

Lightning style UI library: https://www.lightningdesignsystem.com/components/accordion/

Known limitations:

  • Performance and scrolling issues with the use of iFrames.
  • Not designed for multi-page model
  • Not integrated with browser navigation history
  • Can’t load static resource from another namespace
  • High restrict on CSP (Content Security Policy) on iFramed content. Content can be loaded only from the lightning domain

NOTE: can’t use <iframe> directly in Lightning Components because it doesn’t come with the Static Resource Content Access token - _CONFIRMATIONTOKEN

Lightning Container Component (LCC)

Document page: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/container_overview.htm

Usage: Upload an app developed with a third-party framework as a static resource, and host the content in a Lightning component using lightning:container. Use lightning:container to use third-party frameworks like AngularJS or React within your Lightning pages. Therefore, we have to use LCC to embedded our external app and upload the whole app as static resource into Salesforce.

Why needed: Lightning Compnent doesn't allow using <iframe> tag directly in their markup and it also puts a strict CSP (Content Security Policy) on embedded conent which means we can't load static resource from a different namespace.

How to integrate

Document page: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/container_js.htm

Examples for LLC with React: https://github.com/developerforce/LightningContainerExamples

React-lightning-boilderplate: https://github.com/jefflombard/react-lightning-boilerplate How to use the above boliderplate: https://medium.com/eigen-x/how-to-use-react-webpack-for-front-end-development-in-salesforce-lightning-9c68405cd8a2

Methods LLC provides to embedded page: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/container_api_reference.htm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment