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

<html>
 <head>
  .....
  <script src="https://lpsng.rsj.de/sidebar/sidebar.js"></script>
 </head>
 <body>
 ......
  <div id="sidebarContents"></div>
 </body>
<html>

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

Requirements

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)
       };

   completion(job);
   };

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
   };

window.LpsngEmbedded(conf);

Mandatory Configuration Parameters

div div id for sidebar
clientId client_id (from application management)
clientSecret client_secret (from application management)
getData Function as job data source

Additional Customizations

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

debug Display current status in sidebar. Display cross frame communication in debug log.
loginPartner Name of pre-selected login partner
accessToken Access Token
user User ID (GUID)
design Selected Design (GUID)
loadState Function to restore (user specific) state
storeState Function to save (user specific) state
extensions Define additional user interface components
extensions.buttonTitle Title ahead of custom buttons
extensions.buttons Definition of custom buttons
extensions.optionTitle Title ahead of custom options
extensions.options Definition of custom options
urlBase Use different LPSNG website. For RSJ internal testing
handler Inter 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

Contact us for more information:

Name
Company
Email
Phone
How can we help you?

Or contact us directly:

RSJ Software GmbH
Holzstrasse 4
82120 Germering
Germany

Phone: +49 89 89 41 42-0
Fax: +49 89 89 41 42-80
E-Mail: info@rsj.de

© Copyright 2011-2023 by RSJ Software GmbH Germering. All rights reserved. - Version:1.12.0554