...

{
 	'datasetId':'colleague',
    'displayKey':'colleagueName',
    'placeholder': 'Selecione o usuário do Fluig',
    'filterValues': 'campo1,valorDoCampo1,campo2,valorDoCampo2',
 	'fields':[{
		'field': 'colleagueName',
		'label': 'colleagueName',
		'standard': 'true'
	},{
		'field': 'colleagueId',
		'label': 'colleagueId',
		'visible': 'false'
	}]
}

Parâmetros

datasetId

Uma string que define id do dataset que o campo pesquisa vai consultar

...

Este campo é válido para os datasets internos do Fluig. Em datasets personalizados, vale lembrar que é necessário implementar os filtros a partir das constraints recebidas.

Métodos

O campo zoom invoca algumas funções que podem ser sobrescritos para uma maior personalização do formulário.

...

Esta função é chamada sempre que um item é selecionado em um campo pesquisa. Pode ser utilizado para armazenar outra informação do item de dataset selecionado em outro campo, validações ou mesmo para atualizar os filtros de outros componentes e campos pesquisa do formulário.

Sintaxe

function setSelectedZoomItem(selectedItem) {}

Exemplos de uso

ATENÇÃO: Este parâmetro só é válido para datasets internos. Datasets desenvolvidos sobre a plataforma não permitem a utilização de filtros a menos que sejam desenvolvidos utilizando constraints para realizar estas ações.

Para o caso de alguns datasets que o nome dos campos são compostos de duas partes com separação por ponto, somente deve ser usado o nome da parte após o ponto. Por exemplo, no dataset de colleagueGroup aonde será o filtrado pelo campo "colleagueGroupPK.colleagueId" o código ficaria dessa maneira:

removedZoomItem

Esta função é chamada sempre que um item é removido do campo pesquisa. Normalmente é usado em conjunto com setSelectedZoomItem para "desfazer" as ações.

reloadZoomFilterValues

Esta função é usada para atualizar o filterValues da configuração realizada no atributo data-zoom, e pode ser utilizado para adicionar filtros extras conforme outros dados do formulário ou outras opções selecionadas em outros campos pesquisa. Por exemplo, o usuário selecionou um cliente em um campo pesquisa e eu posso adicionar esta seleção como um novo filtro no campo de pedido.

Dependências

Para o funcionamento correto do componente, o seu formulário deve carregar as seguintes bibliotecas

<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide.min.css">
<script src="/resources/js/jquery/jquery.js"></script>
<script src="/resources/js/jquery/jquery-ui.min.js"></script>
<script src="/style-guide/js/fluig-style-guide.min.js"></script>

Exemplos de uso

Consulta simples ao cadastro de usuários buscando e ordenando pelo nome

		<div class="form-group">
			<label for="zoomfield0">Usuário</label>
			<input type="zoom" class="form-control" id="user" name="user" data-zoom="
				{
					'displayKey':'colleagueName',
					'datasetId':'colleague',
					'fields':[{
						'field':'colleagueName',
						'label':'colleagueName',
						'standard':true
					}]
				}">
		</div>

Consulta simples ao cadastro de usuários buscando e ordenando pelo nome, mas exibindo o e-mail após a seleção

		<div class="form-group">
			<label for="zoomfield0">Usuário</label>
			<input type="zoom" class="form-control" id="user" name="user" data-zoom="
				{
					'displayKey':'mail',
					'datasetId':'colleague',
		

<input
  type="zoom" 
  id = "nome"
  name="nome"
  data-zoom="{
			'displayKey':'colleagueId',
			'datasetId':'colleagueGroup',
			'maximumSelectionLength':'1',
			'placeholder':'Selecione o solicitante',
			'fields':[{
				{
					'field':'colleagueIdcolleagueName',
						'label':'UsuáriocolleagueName',
						'standard':true
										}]
				}">
				]
		}"  
/></div>

Para obter outros atributos do registro selecionado pelo usuário, pode ser adicionada a seguinte função JavaScript ao formulário do processo:

...