Barra lateral reutilizável

Integrando o LPSNG com outros aplicativos

Você não precisa reinventar a roda para integrar o LPSNG com sua aplicação: nossa tecnologia de barra lateral reutilizável permite para integração extremamente simples em outras aplicações (web ou nativa).

Ele também permite melhorias futuras da barra lateral com funcionalidades adicionais sem alterações em seu aplicativo.

Tecnologia comprovada

Usamos essa mesma tecnologia para nossos complementos de integração do Planilhas Google, do Microsoft Excel 365 e do Microsoft Office 2013.

Como funciona

Inclua um dos nossos arquivos JavaScript no seu cabeçalho HTML
Defina um ** div ** em sua página da web, onde nossa barra lateral deve viver.
Registre seu aplicativo com o LPSNG (requer uma assinatura Pro).
Ligue para o nosso ponto de entrada durante a inicialização da página
Fornecer algumas funções de retorno de chamada

Modificações no seu HTML

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

O JavaScript está disponível em formato de fonte para dar uma ideia das possibilidades de personalização.

Requisitos

A barra lateral reutilizável é baseada no IFRAME s.

Se você realmente incluir nossa barra lateral de um IFRAME de área restrita, os seguintes direitos serão necessários:

permitir a mesma origem
permitir formulários
allow-scripts
permitir pop-ups
permitir-popups-para-fuga-sandbox

Registre sua inscrição

Vá para Gerenciar aplicativos
Adicione sua inscrição
Defina o URL de redirecionamento para /loginComplete.html
Observe o client_id e client_secret

código 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);

Parâmetros obrigatórios de configuração

Parâmetro	Valor
div	div id para a barra lateral
clientId	client_id (do gerenciamento de aplicativos)
clientSecret	client_secret (do gerenciamento de aplicativos)
getData	Função como fonte de dados do trabalho

personalizações adicionais

A estrutura de dados fornecida para window.LpngEmbdded pode incluir parâmetros adicionais (opcionais):

Parâmetro	Valor
debug	Exibe o status atual na barra lateral. Exibe a comunicação entre quadros no log de depuração.
loginPartner	Nome do parceiro de login pré-selecionado
accessToken	Token de Acesso
user	ID do usuário (GUID)
design	Design selecionado (GUID)
loadState	Função para restaurar o estado (específico do usuário)
storeState	Função para salvar estado (específico do usuário)
extensions	Definir componentes adicionais da interface do usuário
extensions.buttonTitle	Título à frente dos botões personalizados
extensions.buttons	Definição de botões personalizados
extensions.optionTitle	Título à frente das opções personalizadas
extensions.options	Definição de opções personalizadas
urlBase	Use o site LPSNG diferente. Para testes internos do RSJ
handler	Alinhador de mensagens inter frame. Usado somente em casos especiais (por exemplo, integração com o Google Apps Script).

Página de exemplo

Nós implementamos uma página de teste com essa tecnologia. Esta página mostra muitas informações de depuração que permitem que você veja o que realmente está acontecendo.

Você pode encontrar a página de teste aqui .