Salesforce Lightning is Salesforce’s new, modern, and sleek UI. Lightning allows the use of Lightning Web Components (LWC) as a way of allowing developers to make Salesforce Components out of pure HTML, CSS, and JavaScript (JS).
Split can work in a lightning web component. You can use the SDK in JS in a LWC just like you would use on any other web page. Split's JavaScript SDK meets all the security requirements for the Lightning Locker so you do not have to worry about any security issues.
Completing this tutorial requires that you have the SFDC CLI, VSCode, and the SFDC Extensions for VSCode all installed.
There are a few steps that are required to make this happen.
It is important to note that you need to upload the SDK JS file to Salesforce as a Static Resource. Remote JS libraries cannot be loaded in Lightning.
You can download the minified version from split's CDN as linked on our JS SDK Help page. Once you have the minified SDK, upload it to Salesforce by clicking the 'new' button and uploading the file. Ensure that cache-control is set to public.
Add https://*.split.io and ensure that the connect-src directive is checked
- In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
- Type SFDX.
- Select SFDX: Open Default Org.
- This opens your Trailhead Playground in a separate browser.
- From the App Launcher (App Launcher), find and select Sales.
- Click Setup gear then select Edit Page.
- Drag the helloWorld Lightning web component from the Custom area of the Lightning Components list to the top of the Page Canvas.
The key part of this code is the helloWorld.js file that contains the logic to load the Split SDK.
Additionally, a usage of the SDK_UPDATE event allows users to get an updated treatment when Feature Flag definitions are updated.
import { LightningElement, api } from 'lwc';
// download the split SDK and put it into a static resource called splitsdk
// also ensure that you have added *.split.io to the content security policy
import splitsdk from '@salesforce/resourceUrl/splitsdk';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
export default class HelloWorld extends LightningElement {
treatment = "new"
treatmentNotLoaded= true;
renderedCallback() {
loadScript(this, splitsdk).then(() => {
// your code with calls to the JS library
var factory = splitio({
core: {
authorizationKey: 'SDK_KEY', // your sdk key
// key represents your internal user id, or the account id that
// the user belongs to.
// This could also be a cookie you generate for anonymous users
key: 'key'
},
storage: {
type: 'LOCALSTORAGE' // needed to handle storage.
}
});
// And get the client instance you'll use
var client = factory.client();
client.on(client.Event.SDK_READY, ()=> {
console.log('SDK_READY')
let treatment = client.getTreatment("demo_split");
console.log('treatment = '+treatment);
this.treatment=treatment;
this.treatmentNotLoaded=false;
});
client.on(client.Event.SDK_UPDATE, ()=> {
console.log('SDK_UPDATE')
let treatment = client.getTreatment("demo_split");
console.log('treatment = '+treatment);
this.treatment=treatment;
});
});
}
}It works with the helloworld.html below
<template>
<template lwc:if={treatmentNotLoaded}>
<lightning-card title="HelloWorld" icon-name="custom:custom14" split-managed="true" >
<div class="slds-m-around_medium" >
<p></p>
</div>
</lightning-card>
</template>
<template lwc:else>
<lightning-card title="HelloWorld" icon-name="custom:custom14" split-managed="true" >
<div class="slds-m-around_medium" >
<p>Treatment={treatment}</p>
</div>
</lightning-card>
</template>
</template>Here we are using an lwc:if directive on the template to display or hide entire templates. You could also do this with information from the treatment. This is a very powerful capability.
Similarly to Lightning - the JavaScript library that we set up as a static resource can also be used by VisualForce. This allows the usage of Split where you may not be able to use Lightning Web Components.
To do this, first go to the Developer Console when in setup mode
Then create a new VisualForce Page
In that page, place the following code, being sure to replace the authorizationKey with your own SDK Key.
Note: that this uses the same splitsdk static resource as the Lightning Web Component example above.
<apex:page>
<!-- Add the static resource to page's <head> -->
<apex:includeScript value="{! $Resource.splitsdk }"/>
<!-- A short bit of Split SDK Code to test it's there -->
<script type="text/javascript">
var factory = splitio({
core: {
authorizationKey: 'SDK_KEY',
// key represents your internal user id, or the account id that
// the user belongs to.
// This could also be a cookie you generate for anonymous users
key: 'key'
}
});
// And get the client instance you'll use
var client = factory.client();
client.on(client.Event.SDK_READY, function() {
var treatment = client.getTreatment("aa_test");
const e = document.getElementById("message");
if (treatment == "on") {
// insert code here to show on treatment
e.innerText="It is On!"
} else if (treatment == "off") {
// insert code here to show off treatment
e.innerText="It is Off!"
} else {
// insert your control treatment code here
e.innerText="Houston, we have a problem"
}
});
</script>
<!-- Where the message will appear -->
<h1 id="message"></h1>
</apex:page>Then, clicking Preview at the top left of the Developer Console will show the final result of the Split treatment.
Split itself does not have an APEX SDK. However you do have a way to get feature flags into APEX code. Using the capabilites of APEX to make HTTP API Calls in concert with a Split Evaluator will allow you to make HTTP requests and return the values of Split feature flags.