Mensagens com formatação (HTML)
Última modificação por FlowFast em 2025/02/12 10:22
Dentro de um tarefa é possível colocar um campo do tipo HTML onde pode ser colocado um conteúdo com HTML com formatação.
Abaixo alguns exemplos para apresentar mensagens para o usuário, conforme imagem.
Mensagem de informação com ícone
1
2
3
4
5
2
3
4
5
<div class="ui-message ui-staticmessage ui-message-info ui-corner-all">
<span class="ui-message-info-icon"></span>
<span class="ui-message-info-summary">INFORMAÇÃO</span>
<span class="ui-message-info-detail">Esta é uma mensagem de informação</span>
</div>
<span class="ui-message-info-icon"></span>
<span class="ui-message-info-summary">INFORMAÇÃO</span>
<span class="ui-message-info-detail">Esta é uma mensagem de informação</span>
</div>
Mensagem de alerta com ícone
1
2
3
4
5
2
3
4
5
<div class="ui-message ui-staticmessage ui-message-warn ui-corner-all">
<span class="ui-message-warn-icon"></span>
<span class="ui-message-warn-summary">ALERTA</span>
<span class="ui-message-warn-detail">Mensagem de alerta</span>
</div>
<span class="ui-message-warn-icon"></span>
<span class="ui-message-warn-summary">ALERTA</span>
<span class="ui-message-warn-detail">Mensagem de alerta</span>
</div>
Mensagem de erro com ícone
1
2
3
4
5
2
3
4
5
<div class="ui-message ui-staticmessage ui-message-error ui-corner-all">
<span class="ui-message-error-icon"></span>
<span class="ui-message-error-summary">ERRO</span>
<span class="ui-message-error-detail">Ocorreu um erro!</span>
</div>
<span class="ui-message-error-icon"></span>
<span class="ui-message-error-summary">ERRO</span>
<span class="ui-message-error-detail">Ocorreu um erro!</span>
</div>
Mensagem de orientação com conteúdo dinâmico
É possível utilizar o conteúdo de outros campos do processo dentro do HTML como variáveis de substituição.
1
2
3
4
2
3
4
<div class="ui-message ui-staticmessage ui-message-info ui-corner-all">
<span class="ui-message-info-detail"
style="white-space: pre-wrap; display: inline-block;">{TXT_ORIENTACAO}</span>
</div>
<span class="ui-message-info-detail"
style="white-space: pre-wrap; display: inline-block;">{TXT_ORIENTACAO}</span>
</div>