Histórico da Página
...
Informações | ||
---|---|---|
| ||
Foi criado um exemplo (form-smart-filter) de como utilizar o método reloadZoomFilterValues, que você pode acompanhar clicando aqui. |
Definir 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("nome_do_campo_de_zoom_que_receberá_o_filtro", "campo_a_ser_filtrado," + selectedItem["valor_que_ira_filtrar"]); |
Código do exemplo completo:
Bloco de código |
---|
function setSelectedZoomItem(selectedItem) {
if(selectedItem.inputId == "id do campo"){
reloadZoomFilterValues("nome_do_campo_de_zoom_que_receberá_o_filtro", "campo_a_ser_filtrado," + selectedItem["valor_que_ira_filtrar"]);
}
} |
Bloquear e habilitar novo zoom 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. Utilizaremos como exemplo o evento onBlur.
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 for 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["zoomfield"].disable(false);
} else {
window["zoomfield"].disable(true);
}
} |
Informações |
---|
O exemplo do recurso de bloquear e habilitar zoom com base em outro campo somente é suportado para a versão 1.6.1 ou acima. |
Dica |
---|
É possível definir manualmente um valor para campos do tipo zoom utilizando a técnica demonstrada neste exemplo (form-smart-zoom), 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. |