Novo Template HTML

Neste tópico vou explicar como funciona o novo formato de Template HTML usado no Latromi.

E quando eu digo “novo” é porque já existia um formato mais simples, usado nos campos do tipo HTMLElement, onde o sistema de substituições de marcações (SESSION, PARAM, VAR e etc) é utilizado.

Pensando na evolução do sistema, a na implementação de novos recursos no futuro, decidimos experimentar um novo formato.

Visão Geral

Um template é uma estrutura predefinida, com espaços (variáveis) que podem ser substituídos por alguns valores.

Um exemplo de template na vida real, seria um formulário de inscrição impresso com “_______” nos locais onde você deve colocar os seu dados a caneta.

No caso de um template HTML funciona da mesma maneira, mas o invés do papel temos o código, e ao invés “_______” temos alguns caracteres que delimitam os espaço onde os dados devem ser preenchidos.

Variáveis

Existe dois tipos de espaços onde os dados podem ser inseridos no templates. Um deles é usado para inserir texto e outro para inserir HTML.

As variáveis disponíveis na utilização do template dependem do contexto onde o template está sendo utilizado.

Por exemplo, no caso do campo do tipo TagSelector temos as propriedades:

Nome Descrição
text Texto do item
value Valor do item
data Dados vinculados ao item (colunas do banco de dados)

Inserindo texto

Ao inserir como texto, qualquer caractere HTML será codificado para ser apresentado como um texto.

Por exemplo, se o valor fosse <div>A</div>, este valor seria convertido para &lt;div&gt;A&lt;/div&gt;, o que iria exibir exatamente <div>A</div>.

Se os caracteres não fossem codificados, um element div contendo a letra “A” seria criado na página. Isso evita que um HTML indesejado seja gerado na página.

O espaço reservado para a inserção de variáveis de texto começa com #: e termina #. Por exemplo:

<!-- insere a propriedade "text" -->
<div> #: text #</div>
<!-- Insere o valor da coluna "nome_da_empresa" -->
<div> #: data.nome_da_empresa #</div>

Inserindo HTML

Ao inserir como HTML, nenhuma codificação será realizada no texto, e caso contenha um código HTML, este código será renderizado na página.

O espaço reservado para a inserção de variáveis de texto começa com #= e termina # . Por exemplo:

<!-- Insere o código HTM da coluna "observacao_html" -->
<div> #= data.observacao_html #</div>

Formatação

Dependendo do tipo de dados que será usado no espaço reservado, é possível especificar o formato com que ele será apresentado.

O formato só pode ser especificado dentro de espaços reservados para inserção de textos (#: #). Para especificar um formato, basta adicionar um | (pipe) seguido do formato antes de fechar o espaço reservado.

Por exemplo:

<!-- Formata a data assim: DD/MM/AAAA -->
<div> #: data.data_de_emissao | dd/MM/yyyy #</div>

Também é possível informar caracteres literais no formato. Basta informar o texto entre aspas simples (')

Por exemplo:

<!-- Formata a data assim: DIA de MÊS de ANO -->
<div> #: data.data_de_emissao | dd' de 'MMMM' de 'yyyy #</div>

Segue abaixo os tipos de dados que suportam formatação e os respectivos formatos suportados:

Os caracteres usados nos formatos são sensíveis à maiúsculas e minúsculas (case sensitive).

Data / Hora

Seguem abaixo as formatações de data/hora disponíveis.

Nos exemplos, será usada a seguinte data: 2021-03-02T15:56:02Z

Formato Descrição Exemplo
yyyy Ano 2021
yy Ano com 2 dígitos 21
MMMM Mês por extenso março
MMM Mês abreviado mar.
MM Mês com 2 dígitos 03
M Mês 3
dd Dia com 2 dígitos 02
d Dia 2
HH Hora (24h) com 2 dígitos 12
mm Minutos com 2 dígitos 56
ss Segundos com 2 dígitos 02
D Data completa 02/03/2021
T Hora no formato HH:mm:ss 12:56:02
t Hora no formato HH:mm 12:56

Editor

O editor é divido em duas áreas: Editor HTML e Propriedades.

Abaixo estão algumas características do editor:

  • Ao dar um duplo clique na propriedade, ela será inserida no código HTML

  • Os espaços reservados para variáveis ficaram com cor de fundo amarelo.

  • Ao digitar “data.” (“data” seguido de ponto), será exibida uma caixa de sugestões com a listagem das colunas.

    image

Suporte à Template

Os Templates HTML podem ser utilizados nos seguintes locais:

  • Nos itens do campo TagSelector, do Formulário Dinâmico,

  • Nas colunas da Consulta com saída em Grid.

  • Nas colunas do Browser Dinâmico, em modo Popup.

3 Curtidas