Salesforce Integration Guide

This guide describes how to integrate STRICH into Salesforce Lightning Web Components.

The information in this guide is BETA, please contact us directly if you wish to integrate with Salesforce.

Loading the SDK from Static Resources

Due to restrictions on loading of third-party ES6 modules, a non-modular build of STRICH needs to be uploaded to Static Resources.

Uploading non-modular STRICH build to Static Resources

At the time of writing, Lightning Web Components can not import ES6 modules from arbitrary URLs such as from a CDN. They can import from other components, but the file size is limited to 128 KB, making it unsuitable for STRICH, which currently bundles WebAssembly.

Upload the file strich_noesm.js as a static resource, do not add it to a zip archive beforehand:

Name: strich_noesm
Description: Non-modular build of STRICH SDK
File: <uploaded file>

After uploading, the static resource should look like this:

Configuring Content-Security Policies (CSP)

CSP are accessed by entering Setup, then navigating to Settings > Security > Trusted URLs in the sidebar.

Data URLs

STRICH embeds images and sounds, as well as WebAssembly code into its JavaScript bundle and loads these assets via Data URLs.

To enable loading from Data URLs, add a Trusted URL:

URL: data:
Directives: connect-src, img-src and media-src

License Service

To allow connections to the license service, add a Trusted URL:

URL: https://license.strich.io
Directives: connect-src

After setting up the trusted URLs, the dialog should look like similar to the screenshot below:

Strict Security

If you run into CSP issues, please check that the Security Level setting for Content-Security Policies is set to Strict CSP (see screenshot below).

Security and Privacy settings screenshot

Sample Code

WebComponent Template

<template>
    <div class="strich-container">

    </div>
    <div class="strich-footer">
        <div class="strich-result">
            <label for="barcode_input">Barcode: </label>
            <input id="barcode_input" type="text" value={barcodeValue}>
            <p>SDK state: {sdkState} <span lwc:if={sdkVersion}>(version: {sdkVersion})</span></p>
            <p class="sdk-error-message" lwc:if={errorMessage}>Error: {errorMessage}</p>
        </div>
        <div>
            <img src="https://raw.githubusercontent.com/pixelverse-llc/strich-partner-link/main/strich_light.svg" height="24" width="auto" alt="STRICH Logo">
            <p>Salesforce LWC PoC</p>
        </div>
    </div>
</template>

WebComponent Logic

For production code, we recommend removing the console logging statements, but they can be useful during integration.

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';

import strich_noesm from '@salesforce/resourceUrl/strich_noesm';

export default class Scanner extends LightningElement {
    
    errorMessage = null;
    barcodeValue = '';
    barcodeReader = null;
    sdkState = '-';
    sdkVersion = null;

    constructor() {
        super();
    }

    async connectedCallback() {
        try {
            // load STRICH SDK from static resources, requires non-modular build ('script tag')
            await loadScript(this, strich_noesm);
            this.sdkState = 'SDK loaded';
            console.log(`Successfully loaded STRICH (noesm) from static resources`);

            // from here on, global variable 'strich' is defined
            await this.initializeSDK();
            this.sdkState = 'SDK initialized';

            const hostElem = this.template.querySelector('.strich-container');
            this.barcodeReader = await this.initializeBarcodeReader(hostElem);
        }
        catch (error) {
            console.error('STRICH SDK initialization failed', error);
            this.errorMessage = error.message;
        }  
    }

    async disconnectedCallback() {
        if (this.barcodeReader) {
            await this.barcodeReader.destroy();
            this.barcodeReader = null;
            this.sdkState = 'BarcodeReader destroyed';
        }
    }

    async initializeSDK() {
        const licenseKey = '<your license key>';
        await strich.StrichSDK.initialize(licenseKey);
        this.sdkVersion = strich.StrichSDK.version();
    }

    async initializeBarcodeReader(hostElem) {
        const barcodeReader = new strich.BarcodeReader({
            selector: hostElem,
            frameSource: {
                resolution: 'full-hd'
            },
            engine: {
                symbologies: ['code128']
            }
        });
        barcodeReader.detected = (detections) => {
            this.barcodeValue = detections[0].data;
        };
        await barcodeReader.initialize();
        this.sdkState = 'BarcodeReader initialized';
        await barcodeReader.start();
        this.sdkState = 'BarcodeReader started';
        return barcodeReader;
    }
}

WebComponent Styling

.strich-container {
    min-height: 240px;
    height: 240px;
    background-color: black;
    position: relative;
}

.strich-footer {
    padding: 4px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.sdk-error-message {
    color: red;
    font-weight: bold;
}

Last modified: 27 August 2024