Best Practice

USB connection to Salesforce

A new project by Arlanis Reply aims to demonstrate the potential of WebUSB in combination with Salesforce's powerful cloud technology.

The Project

Modern browsers now support direct communication between browser technologies and external hardware devices via USB ports. In addition to the commonly known PC accessories, there are a number of USB-enabled devices that can benefit from WebUSB. These allow web applications to interact dynamically with such devices to extend their functionality locally on the user's computer.

This project by Arlanis Reply aims to demonstrate the potential of this bridge in combination with Salesforce's powerful cloud technology. Let's explore the path of uploading data from such a device to the browser, transferring it up to the cloud and then downloading the processed information back to the device.

USB - a success story

The Universal Serial Bus (USB) was invented in 1996 by a consortium of several companies. USB is used to enable the connection of electronic devices to a computer via cables, connectors and a protocol for bidirectional data transfer. USB quickly replaced many other interfaces in the computer world. The USB standard has since evolved over the years as speed and features have increased with each revision. Today, USB is the industry standard for all types of devices and applications.

However, there are challenges that arise when USB becomes a ubiquitous solution in technological environments. For example, compatibility can be an issue when using USB. USB drivers are in most cases only available for Windows or MacOS, but not for Linux. In addition, USB drivers must be downloaded from the Internet and can pose a security risk: If the code is of low quality, it can crash your entire system as the driver runs at system level. Drivers for older devices are sometimes not compatible with newer versions of operating systems and are never updated by the manufacturer.

Web USB - Driver with Javascript

How can we avoid the disadvantages of USB drivers? The solution is to place the driver in Javascript and embed it in the website. This will result in the driver always receiving the latest updates without having to be constantly updated manually. In addition, no older driver code will remain in the system that could expose it to security risks. There is also no need to install a system driver, i.e. no additional administrator authorizations are required on the computer (Beaufort).

WebUSB is a Google draft that has been submitted to the W3C for standardization (Github). While the current implementation only runs in Chrome-based browsers (i.e. Chromium, Google Chrome, Microsoft Edge (Beta)), it is expected that other browser vendors will also adopt WebUSB once it is released as an industry standard in the near future.

Prototype

Selection of a suitable device

USB accessories

Raspberry

Arduino Leonardo

Equipment

Arduino Leonardo

The idea was to create a user-friendly device that simulates logging entries of the two categories “Error” and “Info”. The log entries can then be uploaded by the customer via the device to inform the manufacturer in the cloud. An automatically created support case would allow the manufacturer to respond to the customer's needs. Based on these requirements, we have developed a device with:

Two buttons to simulate log entries of the type error and information;
Two LEDs for status display;
An LCD display to show a ticket number.

Salesforce Org

Implementation

Lightning Web Component

Lightning Web Components (LWC) are Salesforce's latest technology for creating reusable front-end components. LWCs are custom HTML elements created with HTML and modern JavaScript. (Salesforce Developer)

We have implemented a Lightning Web Component that connects to the Arduino device via JavaScript. Access to browser APIs on the Salesforce platform is controlled via a service called Lightning Locker (Salesforce Developer). However, this security feature does not yet support WebUSB and blocks access to the USB device.

Heroku Application

As the implementation of the Lightning Web Component was not successful, an alternative approach was tested. A custom application using the Java framework Spring Boot was created and hosted on Heroku, another Salesforce cloud platform that allows applications to run. We successfully created a support form that connects to the USB device. The user can now press buttons on the device to create log entries in the cloud. To test the functionality, the Web-to-Case feature of Salesforce was used to transfer data to the Salesforce Org without further authentication. The Lightning Design System was used to design the custom application with the familiar Salesforce design.

Aura-Component

The Heroku application was a successful proof of concept, but it still lacked seamless integration into the Salesforce platform. Therefore, the search for a better solution continued.

The Aura Component Framework is an older but widely used framework for front-end components in Salesforce (Salesforce Developer). Aura components are subject to the same Lightning Locker restrictions as LWC, but in addition there is an officially supported way to disable Lightning Locker for a single component (Salesforce Developer). With this solution, the USB function could be called in the browser with JavaScript.

An Aura component with a single “Connect” button has been implemented. The component can be combined with other components in a Salesforce application. It encapsulates all the JavaScript in a user-friendly way. When the user clicks “Connect”, a USB connection to the device is established.

The main advantage of the Aura component compared to the Heroku solution is the ability to create records with the logged-in user's credentials. Users do not have to leave the familiar Salesforce user interface while working with an external tool.

The custom-built device from the outside with a USB cable, two buttons, LCD display and two LEDs.

Arduino Firmware

The firmware on the Arduino is the counterpart to the JavaScript driver. It reads and transmits data according to the commands of the driver. The Arduino IDE was used to develop the firmware (Arduino).

Two-way communication is demonstrated with the following functions:

When the user presses a button on the device, the event is processed in real time in the browser. A pop-up notification on the Salesforce user interface is displayed for immediate feedback. After a record is created in Salesforce, the ID of the record is transferred to the device and displayed on the LCD.

Conclusion

In this article Arlanis Reply shows the advantages of WebUSB for customers and hardware manufacturers. A browser compatible solution was found without the need for an operating system specific application or driver. To demonstrate that communication with a user-defined USB device is possible, an Aura component was built. The web-to-case use case enables more advanced applications.

Arlanis Reply

Arlanis Reply is a consulting company within the Reply Group that specializes in Salesforce solutions. As a long-standing Salesforce partner, Arlanis Reply supports its customers in the successful digitalization and optimization of business processes. The range of services extends from consulting and implementation to integration into complex system landscapes. With a team of certified Salesforce experts, Arlanis Reply implements innovative solutions in the areas of CRM, customer experience (CX) and marketing automation. The company relies on Salesforce technologies such as the Sales Cloud, Marketing Cloud, Service Cloud and Data Cloud as well as Mulesoft. Customers benefit from the company's extensive expertise in various sectors, including the automotive, finance, telecommunications and manufacturing industries.