Preencher campos conforme zoom

Como posso pegar mais de um valor listado em um zoom e preencher automaticamente os campos? Ex: em um zoom é listado a matricula, nome e filial. Porém, na query é selecionada as colunas listadas no zoom, mais centro de custo e cargo. Como pegar o valor cargo e centro de custo, que não são listados no zoom, e preencher em seus respectivos campos?

Thiago, toda vez que vc adiciona um zoom em uma página um objeto filter é criado. Por exemplo, se vc adicionou um zoom com o nome "zoomMatricula", automaticamente um objeto chamado filter_zoomMatricula será criado. Este objeto possui o método getSelectedItems() que devolve um vetor com todos os objetos selecionados. Então, o seu código html e javascript ficaria algo assim.

HTML:


<div id="zoomMatricula-div">
<input class="form-control" type="zoom" id = "zoomMatricula" name="zoomMatricula"
                        data-zoom="{
                            'displayKey':'MATRICULA',
                            'datasetId':'DATASETMATRICULAS',
                            'maximumSelectionLength':'1',
                            'placeholder':'',
                            'fields':[
                                {
                                'field':'MATRICULA',
                                'label':'Matricula',
                                'standard':'true'
                                },{
                                'field':'NOME',
                                'label':'Nome'
                                },{
                                'field':'FILIAL',
                                'label':'Filial'
                                }
                            ]
                        }"
                    />
</div>

<input name="inputNome" id="inputNome">
<input name="inputFilial" id="inputFilial">

Javascript:


function preencherAutomaticamente(){
    document.getElementById("inputNome").value = filter_zoomMatricula.getSelectedItems()[0].NOME;
    document.getElementById("inputFilial").value = filter_zoomMatricula.getSelectedItems()[0].FILIAL;
}

//EventListener que será acionado no momento que o usuario escolher um valor para o zoom
document.getElementById("zoomMatricula-div").addEventListener("click",preencherAutomaticamente);

EDIT:

Caso sua versão do fluig não possua o elemento filter_nomeDoZoom você pode utilizar a função setSelectedZoomItem. Esta função, por padrão do fluig, é acionada sempre que algum elemento zoom é selecionado. Portanto usando o html anterior, temos o seguinte código em javascript


function setSelectedZoomItem(selectedItem) {
    document.getElementById("inputNome").value = selectedItem["NOME"];
    document.getElementById("inputFilial").value = selectedItem["FILIAL"];
}

Boa tarde Hiago, tentei implementar conforme orientado, porém não funcionou como filter_nomeDoZoom. Funcionou como nomeDoZoom.getSelectedItems, porém ele não lista os campos definidos no final da linha. Coloquei como document.getElementById(“cargo_funcionario”).value = nome_funcionario.getSelectedItems()[0].RA_MAT para testar, e não tive sucesso, exibindo apenas “undefined”. Retirando o RA_MAT, funcionou trazendo apenas o resultado selecionado anteriormente. Consultando o console e sem especificar o campo no fim da linha, no console é apenas exibido um array com o valor selecionado no zoom.

Oi Thiago. Acho que sua versão do fluig não possui o filter_ … a que eu testei isso foi a 1.5.13. Mas sem problemas, existe uma outra solução! Acabei de editar a minha resposta. Da uma conferida lá. Caso não funcione eu tenho uma terceira solução!

Perfeito. Muito obrigado.