Whether you work as a Salesforce developer or architect, you have a JavaScript based app you need to integrate with Salesforce or you are a company creating third party services for the Appexchange ecosystem, you will find this article very useful.
As a trusted PDO provider, Nubessom has wide experience helping ISV Partners to efficiently create and market impactful products on the Appexchange.
JavaScript applications like React have become increasingly popular for building dynamic and interactive user interfaces. Salesforce, a leading customer relationship management (CRM) solution has also evolved to provide developers with more flexibility and options to build and integrate custom apps.
Combining the power of React with the robust features of Salesforce can help developers create powerful and engaging apps that deliver a seamless user experience.
There are two ways on how you could integrate these technologies:
During this guide we will explore the second option mentioned above. We will divide it into three simple steps to help you do it on your own.
Salesforce Lightning Out is a feature of the Salesforce Lightning Platform that allows developers to embed Salesforce components and functionality into external websites and applications. This allows developers to create a seamless user experience by integrating Salesforce data and functionality into their own custom-built applications.
Lightning Out doesn’t handle authentication. Instead, you manually provide a Salesforce session ID or authentication token when you initialize a Lightning Out app.
In our example we’ll be using Visualforce and session ID using the expression {! $Api.Session_ID } for simplicity:
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<form>
<input type="hidden" name="session" id="session" value="{! $Api.Session_ID }"/>
</form>
<!-- reactjs -->
<div id="app" />
<script src="http://localhost:7777/index.js"/>
</body>
</html>
</apex:page>
Lightning Out requires an Aura Application that extends ltng:outApp and lists all components that we are planning to use as dependencies:
<aura:application extends=”ltng:outApp” access=”global”>
<!–Lightning component–>
<aura:dependency resource=”c:exampleLWCComponent”/>
</aura:application>
In this example we are defining c:exampleLWCComponent LWC component as a dependency.
Now lets create a simple LWC that accepts one parameter:
HTML
<template>
<p>Hello World</p>
<p>{additionalInfo}</p>
</template>
JS
import { LightningElement, api } from 'lwc';
export default class ExampleLWCComponent extends LightningElement {
@api additionalInfo;
}
Finally, we’ll now need to create a react component which will render our LWC
import _ from "lodash";
import React from "react";
export class App extends React.Component{
componentDidMount() {
const componentName = 'c:exampleLWCComponent';
const appName = 'c:exampleLWCDependencyApp';
const token = JSON.stringify(document.getElementById("session").getAttribute("value"));
const orgUrl = 'https://your-org.my.salesforce.com';
//you can pass any data you may need to the LWC component
const additionalInfo = 'Whatever info that needs to be passed to LWC';
this.loadScript(componentName, appName, token, orgUrl, additionalInfo);
}
loadScript(componentName, appName, token, orgUrl, additionalInfo ) {
const script = document.createElement("script");
script.src = orgUrl + "/lightning/lightning.out.js";
script.async = true;
script.onload = () => {
$Lightning.use(appName, function() {
$Lightning.createComponent(componentName, { additionalInfo : additionalInfo }, 'lightning', function() {
});
}, orgUrl ,token);
};
document.body.appendChild(script);
}
render() {
return (<div id="lightning"></div>);
}
}
export default App;
Above React component will import LightningOut JavaScript framework and render our LWC component within div tag with id “lighitning”.
We can also pass any additional information from React to LWC via additionalInfo variable in this sample.
Now you can use Salesforce data within your React app and render the same React App within Salesforce instance to allow seamless user experience.
You can find all code referenced in this article available here: https://github.com/Nubessom/react-in-salesforce
If you have a JavaScript based app and you need help integrating it to Salesforce or distribute your app through AppExchange to millions of existing Salesforce customers, get in touch here, we are excited to hear from you and your challenge.
Highly motivated and result oriented professional with extensive SW development expertise and good customer facing communication skills. Strong understanding of agile development methodology, experienced working with SCRUM.
© 2024 Nubessom Consulting All Rights Reserved