- Lightning App Builder (Drag & Drop; no code required)
- Lightning Component Framework (programmatically)
We need to use the latter for 3rd party UI integration.
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
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.
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