Ir para o conteúdo

Transforme as suas conexões em um bônus de fim de ano com o nosso novo Programa de Indicação de Clientes! Saiba mais

✕

Esta documentação é para a versão 4 e posterior do App Builder, o novo nome do Vinyl. Acesse a documentação do Vinyl aqui.

✕

Crie e use modelos HTML no Jitterbit App Builder

Os modelos HTML podem ser usados de muitas maneiras diferentes para adicionar estilo ou funcionalidade exclusivos e específicos a um aplicativo. Há vários motivos para usar modelos HTML, mas o objetivo principal de usar um modelo HTML é ser criativo com ele. Os modelos HTML permitem que você use HTML, CSS e JavaScript para funcionalizar e estilizar seu modelo.

Nota

Se você quiser ter uma visão geral sobre HTML, CSS ou JavaScript, recomendamos https://www.w3schools.com/html/html_intro.asp.

Criando um modelo HTML

Siga estas etapas para criar um modelo HTML.

  1. Comece navegando para Look & Feel
  2. Clique na navegação Templates
  3. Selecione a Collection à qual deseja adicionar o modelo
  4. Clique no botão +Template
  5. Atribua um Name para o modelo. Por exemplo: Home Signup
  6. Se quiser que o conteúdo do modelo HTML seja traduzido, marque para habilitar Translations
  7. Clique em Save

Agora você verá dois campos onde pode inserir o conteúdo do modelo HTML apropriado: Editor e Source. O Editor usa um WYSIWYG (What You See Is What You Get) que atualiza as tags HTML no conteúdo a ser exibido no seu modelo.

editor.png

Quando você começar a digitar na área do Editor, o HTML e o CSS subjacentes que aparecerão no modelo serão gerados abaixo na área de Fonte. Aqui está um exemplo:

sourceview.png

Continue adicionando qualquer conteúdo necessário ao modelo HTML usando o Editor ou a visualização Source, conforme apropriado. A visualização Editor permite que você aproveite o estilo WYSIWG. Se desejar adicionar algo mais complexo do que o que a visualização Editor acomoda (por exemplo, HTML, CSS, JavaScript), você vai querer trabalhar na visualização Source.

sourceexample.png

Substituição do Dynamic App Builder

Nesta seção, daremos uma olhada no uso de substituição dinâmica em modelos HTML. Como exemplo, você pode ter uma página usando um painel Tile e quer que os nomes dos funcionários tenham uma aparência melhor. Você pode criar um modelo HTML que concatene as colunas TitleOfCourtesy, FirstName, e LastName juntos e estilizam o texto, bem como colocam o Title abaixo do nome do funcionário em um texto menor.

employeeboard.png

Em seguida, criaremos um modelo HTML com substituição dinâmica de colunas no App Builder.

  1. Navegue ou crie um modelo no aplicativo no qual deseja implementar seu modelo

  2. Já temos um modelo criado que tem o tamanho, peso (negrito) e alinhamento (centralizado) adequados. Podemos alterar o texto de "Hello World!" para {{TítuloDeCortesia}} {{PrimeiroNome}} {{Sobrenome}}em Conteúdo (texto) para exibir as informações adequadas

    Importante

    Certifique-se de escolher colunas que existam no Objeto de Negócio na página em que você está colocando o modelo.

    employeetemplatesource.png

  3. Em seguida, precisamos colocar {{Título}} abaixo do nome completo, centralizado e em um texto menor. Para fazer isso, inseriremos um novo </span> tag seguindo o conteúdo existente porque o conteúdo existente tem um tamanho de fonte de 25px e criaremos um novo intervalo com um tamanho de texto menor

  4. Então, podemos inserir uma tag de quebra <br> para indicar que queremos ir para a próxima linha

  5. Agora podemos criar um novo intervalo com tamanho de fonte 15px e inserir o {{Título}} coluna, feche o intervalo e feche o negrito

    <div style="text-align: center;"><strong style="font-size: 25px;">{{TítuloDeCortesia}}{{PrimeiroNome}}{{Sobrenome}}<br>
<span style="font-size: 15px;">{{Título}}`</span></span></strong></div>

    employeepreview.png

  6. Após criar o modelo, precisamos informar à página quais colunas usar, então precisamos adicioná-las ao modelo conforme definido em Parâmetros do modelo

  7. Agora podemos adicionar o modelo à página e ao painel desejados como um controle HTML com a visibilidade do rótulo da coluna definida como Oculto
  8. Outra maneira de vincular o modelo ao painel é clicar no ícone de vinculação do modelo na página Painel (Opções de dados) do controle HTML e inserir as mesmas colunas que você digitou nos Parâmetros do modelo.

Agora o painel do Quadro de Funcionários parece melhor e você está mais familiarizado com o uso de modelos HTML no App Builder.

employeetemplatedone.png

Exemplo de modelo HTML

Aqui está um Painel de Quadro com dois Modelos HTML. Um mostra o número de pessoas na fila e o outro fornece as informações do hospital na parte inferior.

Modelo HTML 1

Referência

Veja o W3Schools Referência de Elementos HTML guia para mais informações sobre a sintaxe HTML adequada.