Reusable Sidebar

Integrating LPSNG with other applications

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

Include one of our JavaScript files in your HTML header
Define a div in your web page, where our sidebar should live.
Register your application with LPSNG (requires a Pro subscription).
Call our entry point during page initialization
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

Goto Manage Applications
Add your application
Set the Redirect URL to /loginComplete.html
Note the client_id and client_secret

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

Parameter	Description
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:

Parameter	Description
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.