Como criar um Zoom e um select em um Widget?

TOTVS Fluig Páginas (WCM)
, ,
1

Tenho o seguinte código no meu view.flt de um widget, porém ele não funciona como nos processos criando os componentes e jogando os dados do DataSet, ele até cria porém sem dados. Como faço para funcionar o Zoom e o select no meu view.ftl?


    <div class="col-md-8 content-div">
        <div class="col-md-6 required" data-type="zoomfield">
            <div class="form-group has-error">
                <label class="required-label" for="tipo">Colaborador</label>
                <div class="input-group">
                <input type="zoom" class="form-control" id="colaborador_${instanceId}"
                    data-zoom="{'displayKey':'colleagueName','datasetId':'colleague','fields':[
                            {'field':'colleagueName','label':'Nome','standard': 'true', 'search':'true'}
                        ]}">
                    <div class="input-group-addon zoom-preview">
                        <span class="fluigicon fluigicon-zoom-in"></span>
                    </div>
                </div>
            </div>    
        </div>    

        <div class="col-md-6 required" data-type="combo">
            <div class="form-group has-error">
                <label class="required-label" for="tipo">Departamento</label>
                <select class="form-control" id="dpto_${instanceId}" dataset="dsDepartamento" datasetkey="ID" datasetvalue="NOME">dsDepartamento</select>
            </div>    
        </div>    
    </div>
2

@Guilherme, boa tarde!!

Realmente nas widgets estes itens não são carregados automaticamente como em um formulário de processo!

Para o zoom utilize o filter do fluig style. É exatamente o mesmo utilizado nos formulários.

https://style.fluig.com/miscellaneous.html#filter

Exemplo:


var settings = {
    source: {
        url:  '/api/public/ecm/dataset/search?datasetId=colleague&searchField=colleagueName&',
        contentType: 'application/json',
        root: 'content',
        pattern: '',
        limit: 10,
        offset: 0,
        patternKey: 'searchValue',
        limitkey: 'limit',
        offsetKey: 'offset'
    },
    displayKey: 'colleagueName',
    multiSelect: true,
    style: {
        autocompleteTagClass: 'tag-gray',
        tableSelectedLineClass: 'info'
    },
    table: {
        header: [
            {
                'title': 'Nome',
                'size': 'col-xs-12',
                'dataorder': 'colleagueName',
                'standard': true
            }
        ],
        renderContent: ['colleagueName']
    }
};
var filter = FLUIGC.filter('#Idcampo', settings);

Para o select, será necessário criar um função que consuma o seu dataset e com o retorno fazer um append no select.


$("#dpto_" + this.instanceId).append("<option value='" + value + "'>" + description + "</option>");

Ambos podem ser chamados no método init da sua widget!

3

Cara não to entendendo como esse zoom funciona, tem um exemplo com um dataset pra me ajudar?

4

Adicionei um exemplo com um recurso da API pública para consumo de datasets!

5

Acabei utilizando apenas o Autocomplete mesmo, resolveu meu problema e consegui utilizar mais fácilmente. Obrigado pela ajuda.

6

Se quero gravar a chave (ex: ID) e mostrar o nome, como seria a configuração ? O exemplo acima trabalha somente com um campo nome.

7

@Denis, pode-se ter um campo id do type hidden no seu formulário, e no caso do filter, adicionar o seguinte listener para seu filter


filter.on('fluig.filter.item.added', function(data){
    $("#fieldId").val(data.item.colleagueId); // 
});

Lembrando que teria que adicionar o campo novo no array de header e renderContent.


header: [
	{
		'title': 'ID',
		'size': 'col-xs-2',
		'dataorder': 'colleagueId'
	},
	{
		'title': 'Nome',
		'size': 'col-xs-10',
		'dataorder': 'colleagueName',
		'standard': true
	}
],
renderContent: ['colleagueId','colleagueName']
8

Faz sentido, vou tentar e retorno. forte abraço.