Histórico da Página
...
Informações |
---|
A utilização da PK nos filtros ao utilizar dataset de Grupo, Papel ou Colaborador é opcional, porém o mesmo valor utilizado definição do zoom deve ser utilizado para a obtenção do valor selecionado, conforme exemplo abaixo. |
Visualização e resgate destes valores
Para utilizar filtros a chamada é similar ao de dataFields.
Bloco de código | ||
---|---|---|
| ||
window.open("/webdesk/zoom.jsp?datasetId=preCad&dataFields=codigo, Código, descricao, Descrição&resultFields=descricao&type=precad&filterValues=metadata_active, false","zoom" , "status, scrollbars=no, width=600, height=350, top=0, left=0"); |
Neste exemplo, o zoom irá retornar somente os registros de formulários inativos.
Setar valor baseado na troca de valor de outro campo/zoom
Para realizar a busca de um valor em um campo de tipo zoom, com valores obtidos de outros campo zoom, deve-se ser utilizada primeiramente a função setSelectedZoom, que por parâmetro receberá o item selecionado pelo usuário no campo (selectedItem).
Bloco de código |
---|
function setSelectedZoomItem(selectedItem) {} |
Dentro desta função, verificaremos o campo no qual vai pegar o valor do primeiro zoom, que no caso complementará o segundo:
Bloco de código |
---|
if(selectedItem.inputId == "id do campo"){} |
Os id's dos campos de tipo zoom serão retornados em selectedItem.inputId, por este motivo devemos inserir esta validação, para que apenas o valor do campo certo seja retornado. Após o valor do campo estiver de acordo com sua opção, deverá ser utilizada a função reloadZoomFilterValues dentro da validação do nome do campo, que aplicará o filtro e recarregará o zoom.
Aplicando os valores:
Bloco de código |
---|
reloadZoomFilterValues("id_do_campo_de_zoom_que_receberá_o_filtro",
"campo_a_ser_filtrado," + selectedItem["valor_que_ira_filtrar"]); |
Informações | ||
---|---|---|
| ||
Espera-se um valor literal separado por vírgula após o campo a ser filtrado. |
Código do exemplo completo:
Bloco de código |
---|
function setSelectedZoomItem(selectedItem) {
if(selectedItem.inputId == "id do campo"){
reloadZoomFilterValues("id_do_campo_de_zoom_que_receberá_o_filtro",
"campo_a_ser_filtrado," +
selectedItem["valor_que_ira_filtrar"]);
}
}
|
Limpar valor baseado na troca de valor de outro campo/zoom
Para limpar valores que foram atribuídos por outro zoom, deverá ser criada uma função com as seguintes propriedades:
Bloco de código |
---|
filter_id_do_campo.on('fluig.autocomplete.itemRemoved',
function(ev) {
filter_id_do_campo.removeAll();
}); |
O nome da função fica a critério, no exemplo foi utilizada removeZoomFields:
Bloco de código |
---|
removeZoomFields(){
filter_idDoCampo.on('fluig.autocomplete.itemRemoved', function(ev) {
filter_idDoCampo.removeAll();
});
} |
Para que os registros sejam removidos, esta função deve ser chamada na função onde os campos são selecionados, este exemplo pode ser complementado com o item de Setar valor baseado na troca de valor de outro campo/zoom:
Bloco de código |
---|
function setSelectedZoomItem(selectedItem) {
if(selectedItem.inputId == "id do campo"){
reloadZoomFilterValues("id_do_campo_de_zoom_que_receberá_o_filtro",
"campo_a_ser_filtrado," + selectedItem["valor_que_ira_filtrar"]);
}
removeZoomFields();
} |
Esta função será chamada sempre que o algum registro do zoom for removido.
Evento que limpa o valor
Para remover itens selecionados no zoom, uma função deve ser criada, de modo que possa ser chamada por todo o fonte do formulário. Para implementar a remoção de limpeza de valor, deve-se criar uma função com o seguinte código:
Bloco de código |
---|
filter_idDoCampo.removeAll(); |
E então os campos serão totalmente limpos.
Qual a diferença entre os componentes Filter e Autocomplete?
Autocomplete e filters possuem o mesmo propósito, fornecem o preenchimento automático, porém com comportamentos diferentes. Filters possibilitam combinar informações onde o usuário pode comparar resultados através de uma datatable, podendo então selecionar os registros de seu interesse. Já o Autocomplete, gerenciam o preenchimento automático de registros e tags.
Exemplos de utilização de Filter e Autocomplete
- O usuário necessita de uma consulta rápida de registros de um dataset, um Autocomplete é o ideal para esses casos, já que possui uma consulta rápida e resultados objetivos.
- Caso o usuário necessite de mais informações e maior customização da datatable ele pode utilizar o filter.
Bloquear e Habilitar zoom novo baseado em algum campo
Para bloquear e desbloquear um campo de tipo zoom, com base em outro campo, devemos implementar no campo a ser validado, o evento onBLur no HTML apontando para uma função que fará toda a validação e realizará o bloqueio dos campos. Como exemplo, faremos a função:
Evento onBlur no input passando na função 'this.value', que vai mandar o valor que foi preenchido no campo para a função:
Bloco de código |
---|
<input type="text" name="fieldName" id="fieldName" class="form-control"
onblur="validateFieldIsNull(this.value)"> |
Dentro desta função, será validado se o valor recebido pela função é nulo, e caso seja, bloqueie o campo zoom. Caso este valor não esteja nulo, deverá ser adicionado a condição else para re-habilitar o campo zoom.
Bloco de código |
---|
function validateFieldIsNull(valor){
if(valor != ""){
window[$("input[name=tagNameDoZoom]").attr("filter-
instance")].disable(false);
} else {
window[$("input[name=tagNameDoZoom]").attr("filter-
instance")].disable(true);
}
} |
Dica | ||
---|---|---|
| ||
É possível definir manualmente um valor para campos do tipo zoom utilizando a técnica demonstrada neste exemplo, que está disponível em nosso repositório Git. |
Informações | ||
---|---|---|
A antiga técnica para zoom ainda é suportada pela plataforma. Porém, recomendamos a utilização da técnica descrita acima que está de acordo com os padrões do fluig Style Guide e permite maior fluidez utilizando o componente. | ||
Dica | ||
| ||
É possível definir manualmente um valor para campos do tipo zoom utilizando a técnica demonstrada neste exemplo, que está disponível em nosso repositório Git. |
...
Zoom Externo
Em situações aonde os dados dos elementos externos ao fluig são muito volumosos é recomendada a construção de uma aplicação externa ao fluig que fará o papel de zoom para o usuário. Abaixo será descrita uma técnica JavaScript aonde será possível chamar uma aplicação externa e a mesma poderá devolver o dado solicitado pelo usuário para um campo do formulário do fluig.
...