Imprimir uma etapa

Neste artigo, você aprenderá:

• Como imprimir todos os seus dados quando um aplicativo for concluído
• Como projetar uma etapa com formatação adequada para impressão
• Como incluir a impressão de widgets personalizados em uma etapa

À medida que sua empresa começa a automatizar processos em papel e a digitalizar formulários no chão de fábrica, talvez você ainda precise imprimir os resultados de diferentes operações para compartilhar os dados adequadamente.

Imprimir etapas do aplicativo

Se você deseja imprimir dados de um aplicativo Tulip em tempo real (ou salvar em um PDF local), há quatro coisas que você precisa fazer:

1. Configure uma etapa (ou várias etapas) para corresponder ao tamanho de impressão desejado.
2. Crie uma etapa que fique organizada e compreensível quando impressa.
3. Adicione um botão com o gatilho “Imprimir”.
4. Personalize as configurações de impressão para que o tamanho da etapa ocupe o máximo possível da página.

Com a ação do gatilho “Imprimir etapas”, você pode imprimir uma única etapa ou um grupo inteiro de etapas de uma só vez. Cada etapa será impressa em uma página separada.

Configurar a resolução das etapas

Para começar, muitos usuários preferem criar um grupo de etapas chamado “Relatórios” e adicionar a esse grupo todas as etapas que gostariam de imprimir de uma só vez.

Fica assim:

Em seguida, é importante configurar adequadamente as etapas desse grupo para que sejam impressas na resolução desejada. No aplicativo, acesse a guia “Etapa” no Painel de Contexto e selecione “Resolução da Etapa”.

No painel lateral, selecione a resolução desejada para corresponder ao tamanho de papel desejado.

No caso de PDFs, geralmente é melhor usar o formato carta na orientação retrato. Ajustar o tamanho do papel garantirá que a visualização do aplicativo seja impressa como uma página inteira.

Crie uma etapa

Você pode estar usando um “Layout Básico” no seu aplicativo com muitas cores sólidas. Embora isso funcione bem para comunicar informações a um operador, provavelmente você não quer desperdiçar tinta da impressora em etapas coloridas.

Em vez disso, remova todos os elementos do Layout Básico das etapas do Relatório e concentre-se no texto.

Aqui está um exemplo de uma etapa otimizada para impressão:

Esta etapa inclui 7 dados do aplicativo, além de 5 resultados de teste. Os botões “Imprimir” e “Menu”, no canto superior esquerdo e no canto inferior direito, têm fundo branco, de modo que não exigem tinta colorida.

Ele utiliza os seguintes recursos do Tulip:

• Widget de grade para criar um layout visual simples
• Texto variável para incorporar os valores de diferentes variáveis na etapa
• Botão com coloração personalizada

Adicionar um botão de impressão

Um botão de impressão requer uma ação de gatilho. Ele costuma ser combinado com a conclusão do aplicativo, mas isso não pode ocorrer no mesmo gatilho. É necessário criar um botão separado para acionar a conclusão do aplicativo.

Portanto, aqui está um exemplo de um gatilho que permite que um operador imprima uma etapa e vá para a etapa após o grupo de etapas “Relatórios”, onde poderá concluir o aplicativo:

• “Imprimir Etapas” “Relatórios”
• “Ir para a etapa” “Próximo”

Você também pode colocar o botão “Imprimir” em uma etapa normal e usá-lo para imprimir um grupo inteiro de etapas sem nem mesmo mostrá-las ao operador.

Isso abrirá as opções padrão de impressão do computador.

Personalizar configurações de impressão

Caixa de diálogo de impressão

Os operadores utilizam o Tulip Player em telas de todos os tamanhos. Portanto, você precisará fazer o seguinte em cada computador que esteja executando o Tulip Player e que exija que uma etapa seja impressa ou salva:

1. Altere o layout da página para corresponder à resolução das etapas a serem impressas. Ex.: Carta, retrato.
2. Salve essas configurações localmente como uma “predefinição” para que os operadores possam selecioná-la facilmente no futuro:

Para verificar se o aplicativo imprimirá corretamente, você deve usar a opção “Visualizar” na caixa de diálogo de impressão para ver como o aplicativo ficará antes de imprimir.

Preencher campos em um PDF

Você também pode imprimir um PDF “preenchido” incorporando o PDF em uma etapa e, em seguida, colocando widgets de texto variável sobre o PDF nos locais apropriados. A etapa será impressa conforme exibida no Tulip Player.

Veja como fazer isso:

1. Incorpore um PDF em uma etapa com o tamanho adequado à resolução correta.
2. Adicione widgets de texto variável sobre os campos apropriados do PDF. Eles serão preenchidos dinamicamente quando o aplicativo for usado no Player.
3. Se o PDF tiver várias páginas, adicione uma nova etapa no Tulip para cada página do PDF e repita o procedimento acima.

Salve os dados do aplicativo localmente em um PDF

A caixa de diálogo de impressão também é a melhor maneira de salvar os dados do aplicativo em um computador local como PDF. Em vez de clicar em “Imprimir” na caixa de diálogo do sistema, selecione “Salvar como PDF” para salvar a etapa e os dados em tempo real em um arquivo local.

Notas técnicas

Regras para as quais o conteúdo do aplicativo não funcionará bem quando impresso.

• Quaisquer referências à “Etapa Atual” em um widget de texto “Variável” funcionarão apenas na etapa que estiver aberta quando o botão “Imprimir” for pressionado.
• Os gatilhos “Ao entrar na etapa ” não são acionados em etapas impressas; portanto, certifique-se de que os dados corretos já estejam inseridos antes de clicar em “Imprimir”.
• Widget de Atributos da Máquina: Eles raramente funcionarão corretamente. Um padrão melhor para um relatório que deseja capturar a última saída conhecida é ter um gatilho na saída da máquina que armazene a saída em uma variável local, que é então exibida por meio de um widget personalizado.
• Vídeos: Para vídeos do YouTube, a imagem de banner não será carregada.

Imprimir widgets personalizados

Ao imprimir uma etapa do Player, cada widget personalizado é incluído como um instantâneo estático de seu conteúdo atual. Ao capturar um instantâneo, os widgets são impressos de forma confiável, mesmo quando o navegador não consegue imprimir diretamente o quadro incorporado.

Comportamento do instantâneo do widget

• O instantâneo reflete o estado do widget no momento em que a impressão começa, incluindo o texto, o layout, as cores, os valores dos formulários, as imagens e o conteúdo padrão da tela bidimensional que estão na tela.
• Se o mesmo widget personalizado for colocado mais de uma vez em uma etapa, cada instância do widget imprime seu próprio instantâneo.
• O instantâneo impresso é estático: o JavaScript do widget não é executado novamente durante a impressão. Qualquer alteração que dependa de um manipulador beforeprint ou de outro JavaScript de tempo de impressão não aparecerá. As alterações feitas no widget antes do início da impressão são mantidas.
• Para manter a visualização de impressão estática, o instantâneo é limpo. Scripts embutidos, atributos de manipuladores de eventos embutidos (como onclick, onerror e onload) e URLs javascript: são removidos. Isso não afeta texto comum, layout, estilos, imagens ou valores de formulário.
• As próprias folhas de estilo do widget são capturadas e reaplicadas, de modo que seu estilo é preservado. CSS direto, incluindo regras @media print, afeta o instantâneo impresso; portanto, use CSS para quaisquer alterações de apresentação que você queira ver na impressão.

O widget impresso é renderizado isoladamente: assim como na tela, ele não afeta o estilo do restante da página impressa nem herda estilos dela. A visualização de impressão também parte de uma linha de base de estilo limpa; portanto, se seu widget depender de fontes ou cores específicas, defina-as explicitamente no próprio CSS do widget, em vez de assumir os padrões.

O que esperar

A impressão tem como objetivo reproduzir o que o widget exibe da melhor maneira possível.

Para obter um resultado mais previsível:* Mantenha o conteúdo essencial a ser impresso no documento principal do widget* Use CSS direto para o estilo de impressão* Certifique-se de que imagens e dados importantes estejam visíveis antes do início da impressão* Garanta que as informações essenciais a serem impressas não dependam de elementos gerados no momento da impressão, como JavaScript, manipuladores de eventos embutidos, quadros de vídeo ou WebGL, páginas da Web aninhadas ou estilos importados externamente.

Limitações

O widget personalizado impresso não é uma captura perfeita, e o conteúdo que depende de recursos externos ou de renderização específica do navegador pode apresentar diferenças.

• Apenas o conteúdo do documento principal do widget é capturado: widgets que renderizam sua interface de usuário visível por meio de Web Components, elementos personalizados ou shadow DOM (por exemplo, Lit) não são capturados e serão impressos em branco, mesmo que apareçam corretamente na tela. Widgets criados com bibliotecas comuns (por exemplo, Chart.js, D3 e jQuery) são renderizados no documento principal e não são afetados. Iframes aninhados também não são capturados.
• CSS diretamente legível, incluindo regras @media print, é preservado. Folhas de estilo externas e regras @import do CSS são tratadas com o melhor esforço possível e podem não ser carregadas.
• O instantâneo do widget é carregado pela página de impressão do Player e deve estar em conformidade com sua política de segurança:
• Um recurso (por exemplo, uma imagem, fonte, estilo, imagem de plano de fundo ou arquivo de mídia) que é carregado dentro do próprio quadro do widget pode, portanto, ser bloqueado ao ser impresso.
• A autenticação vinculada ao quadro do widget, regras de conteúdo misto, URLs com prazo de validade e URLs relativas também podem impedir o carregamento de um recurso.
• Recursos externos lentos podem estar ausentes: a impressão aguarda brevemente pelos ativos, mas não garante que todos os recursos tenham concluído o carregamento.
• Telas bidimensionais são impressas quando seus pixels podem ser capturados: telas de origem cruzada (contaminadas) podem ficar em branco, e telas WebGL geralmente não são capturadas.
• O quadro atual de um vídeo não é capturado: não há garantia de que vídeos, áudios, páginas da Web aninhadas, animações, seleção de texto, foco, estado de passar o mouse e posição de rolagem apareçam.
• Se um instantâneo atual não puder ser capturado, o widget é impresso usando seu HTML e CSS configurados inicialmente, em vez de seu estado atual.

A tabela abaixo resume as diferenças comuns na impressão de widgets e suas causas prováveis:

Leitura complementar

• Como imprimir todas as etapas de um aplicativo

{{snippet.Você encontrou o que estava procurando?}}