Reusable Sidebar

Integration von LPSNG in andere Anwednungen

Sie müssen das Rad nicht neu erfinden, wenn Sie LPSNG in Ihre Anwendung integrieren wollen: Unsere Reusable Sidebar Technologie erlaubt eine extrem einfache Integration in Ihre Anwendungen (Web oder nativ).

Ein Vorteil dieser Form der Integration ist, dass Verbesserungen und Erweiterungen der Technologie ohne Änderung Ihrer Anwendung automatisch genutzt werden können.

Bewährte Technologie

RSJ verwendet die Reusable Sidebar Technologie in den neuen Versionen der Add-Ins für Google Sheets, Microsoft Excel 365 und Microsoft Office 2013.

Was Sie machen müssen

Laden Sie ein JavaScript von uns in Ihrem HTML Header
Definieren Sie ein div auf Ihrer Web Seite, in dem unser Sidebar angezeigt werden soll.
Registrieren Sie Iher Anwendung in LPSNG (Hinweis: Dazu benötigen Sie ein Pro Abo)
Rufen Sie unseren Code in der Initialisierung Ihrer Web Seite auf
Implementieren Sie eine (oder mehrere) einfache Callback Funktionen

HTML Einbindung

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

Hinweis: Die JavaScript Datei kann in Source Form geladen und angezeigt werden um die Anpassungsmöglichkeiten besser zu verstehen.

Anforderungen an die Web Seite

Der Reusable Sidebar beruht auf der Nutzung von IFRAMEs.

Wenn Sie unseren Code selbst aus einem sandboxed IFRAME aufrufen benötigen wir folgende Rechte:

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

Registrierung Ihrer Applikation

Gehen Sie auf Application Management
Fügen Sie Ihre Applikation hinzu
Setzen Sie die Redirect URL auf /loginComplete.html
Notiren Sie bitte client_id und 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 fuer sidebar
   clientId: "..........",        // client_id aus "Application Managements"
   clientSecret: "............",  // client_secret 
   getData: getData
   };

window.LpsngEmbedded(conf);

Verpflichtende Konfigurationsparameter

Parameter	Beschreibung
div	div id des Sidebars
clientId	client_id aus Applikation Management
clientSecret	client_secret aus Applikation Management
getData	Datenquelle für Jobs

Weitere Konfigruationsparameter

Die an window.LpsngEmbedded übergebenen Konfigurationsparameter erlauben es den Sidebar noch besser an Ihre Anwendung anzupassen:

Parameter	Beschreibung
debug	Anzeige des Sidebar Statuses und der Kommunikation zwischen den Frames im Debug Log
loginPartner	Name des Login Partners
accessToken	Access Token
user	User ID (GUID)
design	Ausgewähltes Design (GUID)
loadState	Funktion um die (User spezifischen) Sidebar Einstellungen zu Laden
storeState	Function um die (User spezifischen) Sidebar Einstelllungen zu speichern
extensions	Definition zusätzlicher UI Element
extensions.buttonTitle	Titel vor den Buttons
extensions.buttons	Beschreibung der Buttons
extensions.optionTitle	Titel vor den Optionen
extensions.options	Definition der Optionen
urlBase	Basisadresse einer anderen LPSNG Webseite. Wird für RSJ interne Tests genutzt.
handler	Handler für Interframe Messages. Nur für besondere Einsatzfälle (zB die Google Apps Script Integration).

Test Seite

Wir haben eine Testseite erstellt. Diese zeigt auch eine Vielzahl zusätzlicher Debug Informationen an.

Sie finden die Testseite hier.