Histórico da Página

...

Para elaborar a máscara é possível utilizar:

                     
                     Data: "00/00/0000"
                  Horário: "00:00:00"
              Data e Hora: "00/00/0000 00:00:00"
                      CEP: "00000-000"
                 Telefone: "0000-0000"
            Telefone(ddd): "(00) 0000-0000"
Telefone(ddd + 9ºdígitos): "(00) 90000-0000"
           Placa de carro: "SSS 0000"
                      CPF: "000.000.000-00"
                     CNPJ: "00.000.000/0000-00"
                       IP: "099.099.099.099"
              porcentagem: "#00.000,00%"
				    Valor: "#00.000.000.000.000,00"

...

ComboBox

Geralmente é necessário popular um ComboBox de um formulário com um determinado grupo de valores.

No fluig isto é possível através da utilização de Datasets. Os Datasets são serviços de dados padrão disponibilizados pelo fluig, como por exemplo, o serviço de “Volumes” do produto.

Para habilitar o Dataset no ComboBox basta usar a seguinte construção:

<select name="RNC_volume" id="RNC_volume" dataset="nome-dataset" datasetkey="chave" datasetvalue="valor" addBlankLine=”false”></select>

Onde:

• dataset: é o nome do Dataset.
• datasetkey: é a chave do registro.
• datasetvalue: é o valor de um determinado campo do registro.
• addBlankLine: é o que define se a primeira linha do combo será um valor em branco.

Exemplo:

<select name="RNC_volume" id="RNC_volume" dataset="destinationVolume" datasetkey="volumeID" datasetvalue="volumeDescription"></select>

No exemplo acima estamos listando em um ComboBox todos os Volumes cadastrados no fluig.

Caso necessário a ordenação dos dados provindos de um dataset interno, indicamos a criação de um dataset (simples ou avançado) que execute o interno e ordene os dados, antes de alimentar o componente combobox.

Para utilizar um ComboBox com somente uma opção não deve ser utilizado caracteres especiais e espaço no value da tag option.

Exemplos:

• Forma correta

<select>
  <option value="te">Teste</option>
</select>

• Forma Incorreta

<select>
  <option value="te te te">Teste</option>
</select>

Zoom

Permite a consulta de entidades e outros formulários criados no fluig para seleção de dados pelo usuário. Para utilizar este componente basta inserir um campo de texto com alguns parâmetros específicos.

<input
    type="zoom"
    id = "c7_total"
    name="c7_total"
    data-zoom="{
        'displayKey':'colleagueName',
        'datasetId':'colleague',
        'maximumSelectionLength':'2',
        'placeholder':'Escolha o usuário',
        'fields':[
            {
               'field':'colleagueId',
               'label':'ID'
            },{
              'field':'colleagueName',
              'label':'Nome',
              'standard':'true'
            },{
              'field':'login',
              'label':'Login'
            }
        ]
     }" 
/>

Onde:

• type: o atributo type para este componente obrigatoriamente é 'zoom'
• name: nome do campo
• data-zoom: parâmetros do zoom em formato json onde:
  
  • maximumSelectionLength: limite de registros selecionáveis, caso não seja informado, o valor padrão é 1.
  • resultLimit: número máximo de resultados que serão listados na busca, o valor padrão é 300.
  • placeholder: texto de placeholder, que irá aparecer no zoom. Pode ser utilizado para instrução.
    
    • displayKey: coluna filtrável e de exibição após selecionado o registro
    • filterValues: atributo do dataset e valor para serem filtrados. Devem ser colocados em pares, separados por vírgula (,) onde o primeiro valor é o nome do campo e o segundo refere-se ao valor do campo.
  • datasetId ou cardDatasetId: opte por uma das opções:
    
    • datasetId:  é o nome do dataset.
    • cardDatasetId: é o numero de outro formulário para consulta.
    • fields: Estrutura do filtro
      • field: atributo do dataset que será utilizado.
      • label: descrição da coluna.
      • standard: a coluna que será utilizada como ordenação padrão e valor do registro selecionado.

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 obter outros atributos do registro selecionado pelo usuário, pode ser adicionada a seguinte função JavaScript ao formulário do processo:

function setSelectedZoomItem(selectedItem) {               
}

Onde selectItem é o registro selecionado pelo usuário na tela de zoom.

Esta função será disparada ao eliminar uma tag (valor) do zoom. A partir deste evento, o valor eliminado poderá ser manipulado, por exemplo, para controlar outros campos que dependem deste valor eliminado. 

 function removedZoomItem(removedItem) {
}

Acesse o exemplo completo (form-smart-zoom) em nosso Git aqui. 

Para acessar um campo do registro selecionado:

selectedItem["fieldName"]

Onde fieldName é o nome do campo de retorno que foi definido na chamada de zoom. Caso a 'label' do campo tenha sido declarada, ela deverá ser utilizada.

Para acessar o tipo de zoom selecionado:

selectedItem.inputId = "c7_total"
selectedItem.inputName = "c7_total"

Onde inputId é o id do campo e inputName é o nome do campo de retorno que foi definido no input zoom. Estes parâmetros possuem a mesma funcionalidade do type da antiga técnica de zoom.

Para recarregar o valor do filterValues no formulário a fim de torná-lo mais dinâmico, é possível utilizar o método a seguir:

reloadZoomFilterValues(inputName, filterValues);

Este método é padrão durante a execução de um formulário dentro do fluig a partir da atualização 1.5.5 e recarrega o Zoom por inteiro, colocando os novos valores de filterValues. Em que:

inputName: refere-se ao nome do campo de zoom, ou seja, o valor name na sua declaração;

filterValues: espera-se um valor literal separado por vírgula, sendo que o primeiro valor refere-se ao campo a ser filtrado e o segundo valor refere-se ao valor que irá filtrar.