O campo de pesquisa (ou campo zoom) é uma ferramenta poderosa para otimizar a seleção e visualização de dados em formulários. Com um simples campo, o usuário passa a ter acesso à dados de uma forma ágil, podendo filtrar e selecionar valores de outros componentes e formulários do Fluig ou mesmo de aplicativos externos através de Datasets.
Essa documentação é indicada para desenvolvedores familiarizados com html e javascript, e com o uso de Datasets no Fluig.
<input type="zoom" id="campo" name="campo" data-zoom="..."> |
<input type="zoom" id="campo" name="campo" zoomvalue="campoIdDoDataset" data-zoom="..."> |
O atributo data-zoom é onde a maior parte das configurações possíveis para o campo pesquisa são feitas. Ele é um objeto complexo onde é definido qual o dataset, qual campo deste dataset será usado para preencher o campo, se permite mais de uma item selecionado e quais os campos podem ser usados de filtro.
{
'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'
}]
} |
Uma string que define id do dataset que o campo pesquisa vai consultar
Uma string que define qual o campo do dataset que será usado como exibição no campo pesquisa após a seleção
(opcional)
Um número inteiro que indica um limite de itens do dataset que podem ser selecionados (múltipla escolha)
Caso não seja informado, será utilizado o valor padrão que é 1, ou seja, permite que apenas um registro selecionado.
(opcional)
Um número inteiro que indica um limite de itens retornado por consulta no campo pesquisa
Caso não seja informado, será utilizado o valor padrão que é 300. Não é recomendável usar um número grande por questões de performance e processamento de dados.
(opcional)
Um texto para user usado como place holder, ou seja, uma instrução quando não tiver nenhum item selecionado
Caso não seja informado, o campo não exibirá nenhum texto quando não tiver nenhum item selecionado
(opcional)
Uma string complexa composta por um ou mais campos que serão usados como filtro prévio do campo de pesquisa e valores esperados.
Caso não seja informado, nenhum filtro prévio será utilizado.
Uma lista de objetos que configuram quais são os campos ('field') do dataset que serão exibidos, qual o label ('label') que será utilizado, qual será usado para ordenação ('standard': 'true') e se será visível ou não ('visible': 'false') para o usuário final.
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.
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.
Esta função é chamada sempre que um item é removido do campo pesquisa. Normalmente é usado em conjunto com setSelectedZoomItem para "desfazer" as ações.
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.
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> |
<div class="form-group">
<label for="user">Usuário</label>
<input type="zoom" class="form-control" id="user" name="user" data-zoom="
{
'displayKey':'colleagueName',
'placeholder': 'Selecione o usuário do Fluig',
'datasetId':'colleague',
'fields':[{
'field':'colleagueName',
'label':'colleagueName',
'standard':true
}]
}">
</div> |
<div class="form-group">
<label for="user">Usuário</label>
<input type="zoom" class="form-control" id="user" name="user" data-zoom="
{
'displayKey':'mail',
'placeholder': 'Selecione o usuário do Fluig',
'datasetId':'colleague',
'fields':[{
'field':'colleagueName',
'label':'colleagueName',
'standard':true
}]
}">
</div> |
<div class="form-group">
<label for="solicitacaoRelacionada">Solicitação relacionada</label>
<input type="zoom" class="form-control" id="solicitacaoRelacionada" name="solicitacaoRelacionada" data-zoom="
{
'displayKey':'processInstanceId',
'placeholder': 'Selecione a solicitação relacionada',
'datasetId':'workflowProcess',
'filterValues': 'processId,FLUIGADHOC',
'fields':[{
'field':'processInstanceId',
'label':'Solicitação',
'standard':true
},{
'field':'active',
'label':'Em andamento?'
}]
}">
</div> |
<div class="form-group">
<label for="user">Usuário</label>
<input type="zoom" class="form-control" id="user" name="user" data-zoom="
{
'displayKey':'colleagueName',
'datasetId':'colleague',
'maximumSelectionLength': 5,
'fields':[{
'field':'colleagueId',
'label':'colleagueId'
},{
'field':'colleagueName',
'label':'colleagueName',
'standard':true
},{
'field':'mail',
'label':'mail'
}]
}">
</div> |
<div class="form-group">
<label for="zoomfield1">Solicitação anterior</label>
<input type="zoom" class="form-control" id="solicitacaoAnterior" name="solicitacaoAnterior" data-zoom="
{
'displayKey':'processInstanceId',
'placeholder': 'Selecione o chamado que você irá avaliar',
'datasetId':'workflowProcess',
'resultLimit': 10,
'fields':[{
'field':'processInstanceId',
'label':'Solicitação',
'standard':true
},{
'field':'processId',
'label':'Código do processo'
},{
'field':'active',
'label':'Em andamento?'
}]
}">
</div> |