Barra laterale riutilizzabile

Integrazione di LPSNG con altre applicazioni

Non devi reinventare la ruota per integrare LPSNG con la tua applicazione: la nostra tecnologia della barra laterale riutilizzabile consente per un'integrazione estremamente semplice in altre applicazioni (web o native).

Consente inoltre miglioramenti futuri della barra laterale con funzionalità aggiuntive senza modifiche all'applicazione.

Tecnologia collaudata

Abbiamo utilizzato questa stessa tecnologia per i nostri add-on di integrazione per Fogli Google, Microsoft Excel 365 e Microsoft Office 2013.

Come funziona

Includi uno dei nostri file JavaScript nella tua intestazione HTML
Definisci un ** div ** nella tua pagina web, dove dovrebbe essere la nostra barra laterale.
Registra la tua applicazione con LPSNG (richiede un abbonamento Pro).
Chiama il nostro punto di ingresso durante l'inizializzazione della pagina
Fornire alcune funzioni di callback

Modifiche al tuo HTML

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

JavaScript è disponibile in formato sorgente per darti un'idea delle possibilità di personalizzazione.

Requisiti

La barra laterale riutilizzabile è basata su ** IFRAME ** s.

Se in realtà includi la nostra barra laterale da un ** IFRAME ** in sandbox, sono richiesti i seguenti diritti:

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

Registra la tua applicazione

Vai a Gestisci applicazioni
Aggiungi la tua applicazione
Imposta ** URL di reindirizzamento ** su ** / loginComplete.html **
Annota ** client_id ** e ** client_secret **

Codice JavaScript

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

Parametri di configurazione obbligatori

Parametro	Valore
div	ID div per barra laterale
clientId	client_id (dalla gestione delle applicazioni)
clientSecret	client_secret (dalla gestione delle applicazioni)
getData	Funziona come fonte di dati di lavoro

Ulteriori personalizzazioni

La struttura dati fornita a window.LpngEmbdded può includere parametri aggiuntivi (facoltativi):

Parametro	Valore
debug	Mostra lo stato corrente nella barra laterale. Visualizza la comunicazione cross frame nel log di debug.
loginPartner	Nome del partner di accesso preselezionato
accessToken	Token di accesso
user	ID utente (GUID)
design	Disegno selezionato (GUID)
loadState	Funzione per ripristinare (stato specifico dell'utente)
storeState	Funzione per salvare (utente specifico) stato
extensions	Definire ulteriori componenti dell'interfaccia utente
extensions.buttonTitle	Titolo davanti ai pulsanti personalizzati
extensions.buttons	Definizione di pulsanti personalizzati
extensions.optionTitle	Titolo davanti alle opzioni personalizzate
extensions.options	Definizione di opzioni personalizzate
urlBase	Utilizzare un sito Web LPSNG diverso. Per i test interni di RSJ
handler	Interlock message hander. Utilizzato solo in casi speciali (ad es. Integrazione con Google Apps Script).

Pagina di esempio

Abbiamo implementato una pagina di test con questa tecnologia. Questa pagina mostra molte informazioni di debug che ti permettono di vedere cosa sta realmente accadendo.

Puoi trovare la pagina di test qui .