Fluig - Plataforma - WCM - Como resolver quando todos os widgets tem a mesma preferência

Tempo aproximado para leitura: 00:03:43 min

Ocorrência
Como resolver quando todos os meus widgets estão com as mesmas preferências?

Ambiente
TOTVS Fluig Plataforma - Widgets - Versão 1.7.0 Lake e superior.

Causa
Geralmente isso ocorre quando há mais de um elemento com o mesmo "id" na página. O risco de isso ocorrer é maior quando, montando uma pagina, use-se mais de uma instância de um widget que não esteja com os "ids" de seus elementos nomeados corretamente.

Saiba mais!

O conceito de instância está geralmente ligado a um widget. Cada vez que um widget é adicionado em uma página, ele é considerado uma "Instância de Widget". Cada instância de widget possui um código único dentro da plataforma e isso permite que, por exemplo, duas instâncias do widget de endereço externo mostrem sites diferentes.

Solução
Dentro dos arquivos .ftl, sempre que é criado um novo elemento, é importante utilizar a variável instanceId como sufixo na hora de nomeá-lo. Abaixo um exemplo:

<div id="TesteQualidade_${instanceId}">
    <form role="form">
        <div id="formForm_${instanceId}">
            <div class="form-group">
                <label for="qualiTitle_${instanceId}">...</label>
                <input type="text" class="form-control" id="qualiTitle_${instanceId}" value="${qualiTitleDataField!}"/>
           </div>
       </div>
    </form>
</div>

Onde:

Usar instanceId como sufixo é bastante produtivo quando é necessário fazer referência a outros objetos dentro do próprio .ftl, pois quando foi inserida a label para o input, bastou usar como referência o identificador único do objeto em questão. Ou seja, quando o input field foi criado, deu-se um "id" único para ele.

<input type="text" class="form-control" id="qualiTitle_${instanceId}" value="${qualiTitleDataField!}"/>

Logo, quando a label para ele foi criada, bastou informar na propriedade "for" o mesmo valor.

<label for="qualiTitle_${instanceId}">

Essa forma de nomear seus elementos também ajudará quando for necessário, dentro do arquivo .js, buscar algum valor na tela. Abaixo um exemplo:

var titulo = $("#qualiTitle_" + this.instanceId).val();

Onde: