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.
| Bloco de código |
|---|
|
<input type="zoom" id="campo" name="campo" data-zoom="..."> |
| Bloco de código |
|---|
|
<input type="zoom" id="campo" name="campo" zoomvalue="campoIdDoDataset" data-zoom="..."> |
Atributos
zoomvalue
Uma string com o nome de um campo do dataset que pode ser armazenado além do texto visível em tela.
...
Importante: O campo definido no zoomvalue deve estar entre os campos listados em fields no atributo data-zoom
...
O atributo data-zoom recebe um objeto 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. Consulte mais sobre ele neste documentação.
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
| Bloco de código |
|---|
|
<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
| Bloco de código |
|---|
|
<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> |
| Bloco de código |
|---|
|
<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> |
| Bloco de código |
|---|
|
<div class="form-group">
<label for="zoomfield0">Usuário</label>
<input type="zoom" class="form-control" id="user" name="user" zoomvalue="colleagueId" data-zoom="
{
'displayKey':'colleagueName',
'datasetId':'colleague',
'fields':[{
'field':'colleagueId',
'label':'colleagueId',
'visible': 'false'
},{
'field':'colleagueName',
'label':'colleagueName',
'standard':true
},{
'field':'mail',
'label':'mail'
}]
}">
<input type="hidden" class="form-control" id="hidden_user" name="hidden_user"> <!-- este campo irá armazenar o campo 'collegueId' -->
</div> |
| Bloco de código |
|---|
|
<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> |
| Bloco de código |
|---|
|
<div class="form-group">
<label for="process">Selecione o processo</label>
<input type="zoom" class="form-control" id="process" name="process" data-zoom="
{
'displayKey':'processId',
'placeholder': 'Selecione o processo',
'datasetId':'processDefinition',
'fields':[{
'field':'processId',
'label':'Código do Processo'
},{
'field':'processDescription',
'label':'Descrição',
'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',
'fields':[{
'field':'processInstanceId',
'label':'Solicitação',
'standard':true
},{
'field':'active',
'label':'Em andamento?'
}]
}">
</div> |
| Bloco de código |
|---|
|
function setSelectedZoomItem(item) {
if(item.inputId == "user") {
reloadZoomFilterValues("solicitacaoRelacionada","process," + item.processId);
}
}
function removedZoomItem(item) {
if(item.inputId == "user") {
reloadZoomFilterValues("solicitacaoRelacionada","");
}
} |
| Bloco de código |
|---|
|
<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> |
| Bloco de código |
|---|
|
<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> |
| Bloco de código |
|---|
|
<div class="form-group">
<label for="zoomfield0">Usuário</label>
<input type="zoom" class="form-control" id="user" name="user" zoomvalue="colleagueId" data-zoom="
{
'displayKey':'colleagueName',
'datasetId':'colleague',
'fields':[{
'field':'colleagueId',
'label':'colleagueId',
'visible': 'false'
},{
'field':'colleagueName',
'label':'colleagueName',
'standard':true
},{
'field':'mail',
'label':'mail'
}]
}">
<input type="hidden" class="form-control" id="selected_userCode" name="selected_userCode"> <!-- este campo irá armazenar o campo 'collegueId' -->
</div> |
| Bloco de código |
|---|
|
function setSelectedZoomItem(item) {
if(item.inputId == "user") {
$("#selected_userCode").val(item.colleagueId);
}
}
function removedZoomItem(item) {
if(item.inputId == "user") {
$("#selected_userCode").val("");
}
} |
Outros exemplos de uso em nossos repositórios
Um exemplo com 3 campos zooms interagindo uns com os outro, modificando os valores atribuídos nos demais conforme a seleção de dados
Um exemplo simples consultando datasets personalizados.
Um exemplo consultando datasets personalizados onde a seleção de um dado no campo de pesquisa filtra os resultados do campo pesquisa seguinte.
...