RSJ-Labelprinter - follow the QR-Code RSJ-Next Generation Label Printing System - makes workflow easier RSJ-Software, Company Logo

Reusable Sidebar

You don't have to reinvent the wheel to integrate LPSNG with your application: Our reusable sidebar technology allows for extremly simple integration in other applications (web or native).

It also allows future improvements of the sidebar with additional functionalities without changes to your application.

Proven Technology

We used this very technology for our integration Add-Ins for Google Sheets, Microsoft Excel 365 and Microsoft Office 2013.

How it works

  1. Include one of our JavaScript files in your HTML header
  2. Define a div in your web page, where our sidebar should live.
  3. Register your application with LPSNG (requires a Pro subscription).
  4. Call our entry point during page initialization
  5. Provide some callback functions

Modifications to your HTML

  <script src=""></script>
  <div id="sidebarContents"></div>

The JavaScript is available in source form to give you an idea of customization possibilities.


The reusable sidebar is based on IFRAMEs.

If you actually include our sidebar from a sandboxed IFRAME the following rights are required:

  • allow-same-origin
  • allow-forms
  • allow-scripts
  • allow-popups
  • allow-popups-to-escape-sandbox

Register your application

  1. Goto Manage Applications
  2. Add your application
  3. Set the Redirect URL to /loginComplete.html
  4. Note the clientid and clientsecret

JavaScript Code

function getData(completion, options) {

   var data= [
       { barcode:"4012345123456", productName:"Coca Cola", price: "1.42", 
           labelCount: 10},
       { barcode:"4191709413901", productName:"dotnetpro", price: "14.90", 
           labelCount: 5}

   var job= {
       title:"Test Job",
       name: "Test Job",
       description: "Job description",
       data: JSON.stringify(data)


function DoPrint(completion, options) {
   getData(completion, options);

var conf= {
   div: "sidebarContents",        // div id on page
   clientId: "..........",        // client_id from "Manage Applications"
   clientSecret: "............",  // client_secret 
   getData: getData


Mandatory Configuration Parameters

divdiv id for sidebar
clientIdclient_id (from application management)
clientSecretclient_secret (from application management)
getDataFunction as job data source

Additional Customizations

The data structure given to window.LpngEmbdded can include additional (optional)parameters:

debugDisplay current status in sidebar. Display cross frame communication in debug log.
loginPartnerName of pre-selected login partner
accessTokenAccess Token
userUser ID (GUID)
designSelected Design (GUID)
loadStateFunction to restore (user specific) state
storeStateFunction to save (user specific) state
extensionsDefine additional user interface components
extensions.buttonTitleTitle ahead of custom buttons
extensions.buttonsDefinition of custom buttons
extensions.optionTitleTitle ahead of custom options
extensions.optionsDefinition of custom options
urlBaseUse different LPSNG website. For RSJ internal testing
handlerInter frame message hander. Only used in special cases (eg Google Apps Script integration).

Sample Page

We have implemented a test page with this technology. This page shows a lot of debugging information which allows you to see what is actually going on.

You can find the test page here.

Use Cases


Contact us for more information:

How can we help you?

Or contact us directly:

RSJ Software GmbH
Grubmuehl 20
82131 Stockdorf

Phone: +49 89 89 41 42-0
Fax: +49 89 89 41 42-80

© Copyright 2011-2019 by RSJ Software GmbH Stockdorf. All rights reserved. - Version:1.12.0192