...
| 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.
O campo de pesquisa pode ser usado para armazenar uma informação para o usuário (como nome de uma pessoa ou empresa) mas a solicitação precisa de um código de identificação (como id do usuário, cpf, cnpj) para alguma integração ou mesmo mecanismo de atribuição. Quando não utilizado o atributo zoomvalue, apenas o valor que é exibido após a seleção é gravado.
...
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.
...
Métodos
O campo zoom invoca algumas funções que podem ser sobrescritos para uma maior personalização do formulário.
setSelectedZoomItem (Object item)
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.
removedZoomItem (Object item)
Esta função é chamada sempre que um item é removido do campo pesquisa. Normalmente é usado em conjunto com setSelectedZoomItem para "desfazer" as ações.
reloadZoomFilterValues (String inputName, String filterValues)
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
| 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> |
Consulta simples ao cadastro de usuários buscando e ordenando pelo nome, mas exibindo o e-mail após a seleção
| 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> |
Consulta ao cadastro de usuários buscando e exibindo o nome do usuário selecionado e o código em outro campo
| 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> |
Consulta à solicitação de um determinado processo
| 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> |
Consulta à solicitação de um determinado processo, após selecionar um processo em outro campo pesquisa
Sintaxe do data-zoom
| Bloco de código |
|---|
|
{
'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 do data-zoom
datasetId
Uma string que define id do dataset que o campo pesquisa vai consultar
displayKey
Uma string que define qual o campo do dataset que será usado como exibição no campo pesquisa após a seleção
maximumSelectionLength
(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.
resultLimit
(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.
placeholder
(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
filterValues
(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.
fields
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.
Métodos
O campo zoom invoca algumas funções que podem ser sobrescritos para uma maior personalização do formulário.
setSelectedZoomItem (Object item)
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.
removedZoomItem (Object item)
Esta função é chamada sempre que um item é removido do campo pesquisa. Normalmente é usado em conjunto com setSelectedZoomItem para "desfazer" as ações.
reloadZoomFilterValues (String inputName, String filterValues)
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
| 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
...
| Bloco de código |
|---|
|
<div class="form-group">
<label for="user">Usuário<process">Selecione o processo</label>
<input type="zoom" class="form-control" id="userprocess" name="userprocess" data-zoom="
{
'displayKey':'colleagueNameprocessId',
'placeholder': 'Selecione o usuário do Fluigprocesso',
'datasetId':'processDefinition',
'fields':[{
'field':'processId',
'datasetIdlabel':'colleagueCódigo do Processo',
'fields':[},{
'field':'colleagueNameprocessDescription',
'label':'colleagueNameDescrição',
'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
| Bloco de código |
|---|
|
<div class="form-group">
<label for="usersolicitacaoRelacionada">Usuário<>Solicitação relacionada</label>
<input type="zoom" class="form-control" id="usersolicitacaoRelacionada" name="usersolicitacaoRelacionada" data-zoom="
{
'displayKey':'mailprocessInstanceId',
'placeholder': 'Selecione oa usuáriosolicitação do Fluigrelacionada',
'datasetId':'colleagueworkflowProcess',
'fields':[{
'field':'colleagueNameprocessInstanceId',
'label':'colleagueNameSolicitação',
'standard':true
}]
,{
'field':'active',
}">
</div> |
Consulta ao cadastro de usuários buscando e exibindo o nome do usuário selecionado e o código em outro campo
'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","");
}
} |
Consulta aos usuários permitindo selecionar até 5 usuários
| 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 |
| 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',
'labeldatasetId':'colleagueNamecolleague',
'standardmaximumSelectionLength':true 5,
},'fields':[{
'field':'mailcolleagueId',
'label':'mail'
'colleagueId'
},{
}]'field':'colleagueName',
}">
<input type="hidden" class="form-control" id="hidden_user" name="hidden_user"> <!-- este campo irá armazenar o campo 'collegueId' -->
</div> |
Consulta à solicitação de um determinado processo
'label':'colleagueName',
'standard':true
},{
'field':'mail',
'label':'mail'
}]
}">
</div> |
Consulta à solicitação limitando a quantidade de registros retornados
| 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 |
| 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',
'labelplaceholder':'Solicitação 'Selecione o chamado que você irá avaliar',
'standard':true
},{
'fielddatasetId':'activeworkflowProcess',
'label':'Em andamento?''resultLimit': 10,
}]'fields':[{
}">
</div> |
Consulta aos usuários permitindo selecionar até 5 usuários
| 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="
'field':'processInstanceId',
'label':'Solicitação',
'standard':true
},{
'displayKeyfield':'colleagueNameprocessId',
'datasetIdlabel':'colleagueCódigo do processo',
'maximumSelectionLength': 5,},{
'fieldsfield':[{'active',
'fieldlabel':'colleagueIdEm andamento?',
}]
'label':'colleagueId'
}">
</div> |
Consulta ao cadastro de usuários buscando e exibindo o nome do usuário selecionado e o código em outro campo via métodos
| 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="
{
},{
'field':'colleagueName',
'label':'colleagueName',
'standarddisplayKey':true
},{
'colleagueName',
'fielddatasetId':'mailcolleague',
'labelfields':'mail'
}]
}">
</div> |
Consulta à solicitação limitando a quantidade de registros retornados
| 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="
[{
'field':'colleagueId',
'label':'colleagueId',
'visible': 'false'
},{
'displayKeyfield':'processInstanceIdcolleagueName',
'placeholderlabel': 'Selecione o chamado que você irá avaliar'colleagueName',
'datasetIdstandard':'workflowProcess',true
'resultLimit': 10,
},{
'fieldsfield':[{'mail',
'fieldlabel':'processInstanceId','mail'
}]
}">
'label':'Solicitação',
'standard':true
},{
'field':'processId',
'label':'Código do processo'
},{
'field':'active',
'label':'Em andamento?'
}]
}">
</div><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("");
}
} |