Crie e Use Modelos HTML¶

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.

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.

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 Origem. Aqui está um exemplo:

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

Dinâmico App Builder substituição¶

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.

A seguir, criaremos um modelo HTML com dinâmica App Builder substituição de coluna.

1. Navegue até ou crie um modelo no aplicativo em que deseja implementar seu modelo

2. Já temos um modelo criado com 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.

   

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>
   

   

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 parte da vinculação real do modelo ao painel é clicar no ícone de vinculação do modelo na página Painel (Opções de dados) para o controle HTML e trazer 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 em App Builder.

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.

Referência¶

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