Barre latérale réutilisable

Intégration de LPSNG à d'autres applications

Il n'est pas nécessaire de réinventer la roue pour intégrer LPSNG à votre application: notre technologie de barre latérale réutilisable permet pour une intégration extrêmement simple dans d’autres applications (Web ou native).

Il permet également des améliorations futures de la barre latérale avec des fonctionnalités supplémentaires sans modification de votre application.

Technologie éprouvée

Nous avons utilisé cette technologie pour nos compléments d’intégration pour Google Sheets, Microsoft Excel 365 et Microsoft Office 2013.

Comment ça marche

Inclure l'un de nos fichiers JavaScript dans votre en-tête HTML
Définissez un ** div ** dans votre page Web, là où notre sidebar devrait vivre.
Enregistrez votre application auprès de LPSNG (nécessite un abonnement Pro).
Appelez notre point d'entrée lors de l'initialisation de la page
Fournir des fonctions de rappel

Modifications à votre HTML

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

Le code JavaScript est disponible sous forme de source pour vous donner une idée des possibilités de personnalisation.

Exigences

La barre latérale réutilisable est basée sur IFRAME s.

Si vous incluez réellement notre barre latérale à partir d'un IFRAME en bac à sable, les droits suivants sont requis:

permettre-même-origine
permettre-formes
autoriser les scripts
autoriser les popups
permettre-popups-to-escape-sandbox

Enregistrez votre candidature

Accédez à la Gestion des applications .
Ajoutez votre application
Définissez l'URL de redirection sur /loginComplete.html.
Notez les client_id et client_secre

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

Paramètres de configuration obligatoires

Paramètre	Valeur
div	div id pour sidebar
clientId	client_id (de la gestion de l'application)
clientSecret	client_secret (de la gestion des applications)
getData	Fonction en tant que source de données de travail

Personnalisations supplémentaires

La structure de données donnée à window.LpngEmbdded peut inclure des paramètres supplémentaires (facultatifs):

Paramètre	Valeur
debug	Afficher l'état actuel dans la barre latérale. Affiche la communication entre les images dans le journal de débogage.
loginPartner	Nom du partenaire de connexion présélectionné
accessToken	Jeton d'accès
user	ID utilisateur (GUID)
design	Conception sélectionnée (GUID)
loadState	Fonction de restauration de l'état (spécifique à l'utilisateur)
storeState	Fonction de sauvegarde de l'état (spécifique à l'utilisateur)
extensions	Définir des composants d'interface utilisateur supplémentaires
extensions.buttonTitle	Titre devant les boutons personnalisés
extensions.buttons	Définition des boutons personnalisés
extensions.optionTitle	Titre avant les options personnalisées
extensions.options	Définition des options personnalisées
urlBase	Utiliser un site Web différent de LPSNG. Pour les tests internes RSJ
handler	Message inter frame frame. Utilisé uniquement dans des cas particuliers (par exemple, l'intégration de Google Apps Script).

Page d'exemple

Nous avons mis en place une page de test avec cette technologie. Cette page contient de nombreuses informations de débogage qui vous permettent de voir ce qui se passe réellement.

Vous pouvez trouver la page de test ici .