Configuração

View video

Nesta tela é possível configurar o comportamentos geral da aplicação, em sua maioria aplicados independente do formato do formulário utilizado.

Configuração

Confira abaixo o detalhamento de cada atributo disponível no bloco configuração.

URL Amigável

Este atributo define a URL amigável da aplicação.

Os caracteres permitidos são:

• Alfanuméricos (a-z, A-Z e 0-9)
• Alguns caracteres especiais como: hífen(-), underscore(_), vírgula(,) e ponto(.)

Não é permitida a utilização de acentuação ou espaços.

Segue algumas recomendações:

• Utilize palavras-chave.
• Utilize hífens para separar as palavras.
• Utilize apenas letras minúsculas.
• Evitar a utilização de datas.

Exemplo de aplicação sem URL Amigável

Exemplo da aplicação utilizando URL Amigável

Esta configuração também pode ser realizada na tela inicial do projeto, na lista das aplicações, alterando a coluna URL amigável na aplicação desejada.

Veja o exemplo abaixo

Exibir Número da Linha

Este atributo define a exibição ou não do contador de linhas na aplicação. O contador de linhas será posicionado ao lado da coluna de opções.

Este recurso está disponível apenas para formulários configurados nos formatos: Grid Editável e Grid Editável (View)

Exemplo com exibir número da linha ativado

Exemplo com exibir número da linha desativado

Paginação

Este atributo define o tipo de paginação utilizado na aplicação: Parcial e total

Este atributo está disponível apenas para formulários horizontais: Múltiplos Registros, Grid Editável e Grid Editável (View)

Parcial

Exibe uma quantidade limitada de registros por página, esta quantidade é definida no atributo Linhas por Página, que está disponível apenas neste tipo de paginação.

Barra de ferramentas padrão ao utilizar paginação parcial.

Ao utilizar a paginação parcial todas as opções de navegação estão disponíveis na aplicação.

Total

Lista todos os registros listados em uma única página, removendo os botões de navegação.

Barra de ferramentas padrão ao utilizar paginação total.

Ao utilizar a paginação total, os botões de navegação são escondidos automaticamente da barra de ferramentas da aplicação.

Linhas por Página

Define o total máximo de linhas que serão exibidos por página.

Este atributo está disponível apenas em formulários horizontais (Múltiplos Registros, Grid Editável e Grid Editável (View)) configurados para utilizar a paginação parcial.

Exemplo de aplicação com cinco linhas por página

No exemplo abaixo, a aplicação é inicialmente exibida com 5 registros por página como definida pelo desenvolvedor.

Ao utilizar o botão Escolher Quantidade na barra de ferramentas da aplicação o desenvolvedor permite que o usuário final defina a quantidade de linhas exibidas através do botão Visualizar.

Linhas para Inclusão

Define a quantidade de linhas disponíveis para inclusão simultânea de registros no formulário múltiplos registros. O valor definido no atributo Linhas para Inclusão funciona independente do total de linhas por página da aplicação.

Esta atributo está disponível apenas para formulários Múltiplos Registros

Exemplo do formulários Múltiplos Registros em modo de inserção

Ao clicar no botão Novo as linhas para inclusão de registro serão exibidas de acordo com a configuração realizada no atributo.

Quebra de Linha no título

Este atributo define se será permitida ou não a quebra de linha na label dos campos.

Este atributo está disponível apenas em formulários horizontais (Múltiplos Registros, Grid Editável e Grid Editável (View)) configurados para utilizar a paginação parcial.

Quando habilitado, não permite a quebra de linha na label do campo. Desta forma, mesmo que o campo ocupe um espaço menor que a label, como no campo Código do Cliente na imagem abaixo, a linha não será quebrada.

Exemplo da Quebra de Linha no título habilitada

Quando desabilitado, permite a quebra da linha na label do campo. Ao utilizar esta opção, o espaço destinado a label será definido pelo tamanho do campo desta forma caso a ladel seja maior que o espaço destinado ao campo haverá a quebra na linha.

Exemplo da Quebra de Linha no título desabilitada

Alinhamento Horizontal

Define o alinhamento horizontal da aplicação podendo ser definido como: Centralizado, Esquerda ou Direita.

A configuração padrão do atributo é Centralizado

Centralizado

Posiciona a aplicação no centro da página, respeitando as definições das margens definida no tema ou no atributo margem.

Exemplo da aplicação com alinhamento centralizado

Esquerda

Posiciona a aplicação no canto esquerdo da tela, respeitando as definições das margens definida no tema ou no atributo margem.

Exemplo da aplicação alinhada à esquerda

Direita

Posiciona a aplicação no canto direito da tela, respeitando as definições das margens definida no tema ou no atributo margem.

Exemplo da aplicação alinhada à direita

Alinhamento Vertical

Este atributo define o alinhamento vertical da aplicação e pode ser configurado com as seguintes opções: Sem valor, Acima, Centralizado ou Abaixo.

Ao utilizar os alinhamentos Acima, Centralizado ou Abaixo o atributo margem é desconsiderado.

Confira abaixo o detalhamento de cada uma das opções de alinhamento.

Sem Valor

Alinhamento vertical padrão para novas aplicações. Nesta configuração, a aplicação é posicionada na parte superior da tela respeitando as margens definidas no atributo margem ou na definição do tema utilizado na aplicação.

Exemplo da aplicação com alinhamento padrão

Acima

Posiciona a aplicação na parte superior da tela desconsiderando as definições das margens definidas do tema da aplicação ou do atributo margem.

Exemplo da aplicação com alinhamento Acima

Centralizado

Posiciona a aplicação no centro da tela desconsiderando as definições das margens definidas do tema da aplicação ou do atributo margem.

Exemplo da aplicação com alinhamento Centralizado

Abaixo

Posiciona a aplicação na parte inferior da tela desconsiderando as definições das margens definidas do tema da aplicação ou do atributo margem.

Exemplo da aplicação com alinhamento Abaixo

Margens

Permite que o desenvolvedor defina o valor em pixel para as margens da aplicação, caso nenhum valor seja informado a aplicação herdará os valores definidos no tema utilizado.

Alguns pontos importantes

• Apenas os números devem ser informados.
• A unidade de largura utilizada é pixel.

Ao utilizar o atributo Alinhamento Vertical os valores informados neste atributo são desconsiderados.

Exemplo de como utilizar o atributo

Inputs com 100% de largura

Este atributo define se os campos devem ocupar 100% do espaço disponível no bloco.

Para um melhor funcionamento deste recurso, recomendamos a definição de uma valor positivo no atributo Largura da Tabela e a utilização de Porcentagem ou Pixel no atributo Unidade da Largura da Tabela.

Exemplo dos campos com a opção ativada

Campos com a opção desativada

Este atributo está disponível apenas em Formulário Único Registro

Unidade da Largura da Tabela

Define a unidade de largura utilizada no atributo Largura da Tabela, responsável por definir a largura da aplicação.

As opções disponíveis são: Porcentagem, Pixel e automático.

Porcentagem

A largura da aplicação será definida utilizando porcentagem como unidade de largura. Desta forma ao inserir um valor 50 no atributo Largura da Tabela a largura da aplicação será definda com: width: 50%;

Neste caso a aplicação terá uma largura variável, definida pelo o espaço disponível.

Por exemplo, uma aplicação definda com uma largura de 50%, se aberta em um iframe com largura de 800px ela irá ocupar 400px. Esta mesma aplicação aberta em um espaço com 200px ocuparar 100px.

Pixel

A largura da aplicação será definida utilizando pixel como unidade de largura. Desta forma ao inserir um valor 50 no atributo Largura da Tabela a largura da aplicação será definda com: width: 50px;

Neste caso, a aplicação terá uma largura fixa, ocupado o valor defindio independente do espaço disponível.

Por exemplo, uma aplicação definda com uma largura de 800px, se aberta em um iframe com largura de 500 pixels ela irá ocupar os 800px definidos, criando uma rolagem horizontal dentro do iframe.

Automático

Ao utilizar esta opção o atributo Largura da Tabela será desconsiderado e o tamanho da aplicação será calculado pelo navegador.

Largura da Tabela

Define a largura da aplicação. Neste atributo apenas números devem ser utilizados, a unidade de largura que será utilizada é definida no atributo Unidade da Largura da Tabela.

Ao selecionar automático na Unidade de Largura da Tabela o valor definido nestre atributo é desconsiderado.

Colunas da Tabela

Este parametro define a largura dos campos da aplicação. As opções disponíveis são: Automático e Informado.

Este atributo está disponível apenas para formulários único registro e será ignorada ao utilizar a opção Inputs com 100% de largura.

Valores disponíveis no atributo:

Automático

A largura do campo é calculada automaticamente pelo navegador, que irá ajustar de acordo com o tamanho do texto informado.

Informado

Neste caso, a largura dos campos é definda pelo valor informado no atributo Largura dos labels, que utiliza pixel como unidade de largura.

Ao selecionar o valor informado o atributo Largura dos labels é obrigatório, caso nenhum valor seja informado o gerador irá desconsiderar o atributo Colunas da Tabela.

Largura dos labels

Define a largura dos labels da aplicação, utilizando pixel como unidade de largura. Para definir a largura basta informar os números como na imagem acima.

Este atributo está disponível apenas quando o atributo Colunas da Tabela estiver com o valor informado.

Neste caso o parâmetro Largura dos labels torna-se obrigatório, caso nenhum valor seja informado, o atributo Colunas da Tabela será desconsiderado.

Usar formulário modal

Disponível apenas em formuláros Grid editável (View), este atributo define o comportamento da aplicação para inclusão e atualização dos registros.

As opções disponívels são:

• Não - Inclusão e atualização do registro em linha.
• Apenas na Edição - Inclusão em linha e atualização do registro no formulário modal
• Na edição e insersão - Inclusão e atualização do registro no formulário modal

Para as opções Apenas na Edição e Na edição e insersão serão exibidos dois novos atributos para definição da largura e algura do modal onde o formulário será aberto.

Veja a baixo cada uma das opções detalhadas.

Não

Valor padrão do atributo na criação de um formulário, nesta configuração a atualização ou insersão de dados será realizada em linha.

Exemplo da edição de registro em linha

Ao clicar no ícone de edição os campos serão habilitados de acordo com sua configuração.

Exemplo da inslusão de registro em linha

Ao clicar no botão + Novo uma linha em brando será adicionada após o ultimo registro listado.

Apenas Edição

Ao selecionar a opção Apenas Edição, ao clicar no icone de edição será aberto um modal com um formulário para edição do registro selecionado. Nesta configuração a inclusão de registro permanesse em linha.

O tamanho do modal é definido nos parâmetros Largura Modal e Altura Modal. Ambos utilizam pixel como unidade de largura, bastando informar apenas números.

Exemplo da edição de registro no modal

Na edição e insersão

Esta opção define a utilização do formulário modal para inclusão e edição dos registros.

O tamanho do modal é definido nos parâmetros Largura Modal e Altura Modal. Ambos utilizam pixel como unidade de largura, bastando informar apenas números.

A utilização desta configuração no atributo Usar formulário modal permite que o desenvolvedor defina individualmente os campos que serão exibidos no formulário modal e os exibidos ao acessar a aplicaçao. Na pratica, é como se existissem duas aplicações, uma para edição e inclusão de registros aberta no modal e outra para exibição e exclusão dos registros.

A configuração dos campos deve ser realizado no menu Posicionamento de Campos, veja nossa documentação.

Para mais detalhes veja o video Form horizontal (edição e inclusão com modal)

Largura modal

Este atributo está disponível apenas para formulários grid editável(view) onde o atributo Usar formulário modal estiver configurado como: Apenas na Edição ou Na edição e inserção.

Define a largura do modal onde o formulário será aberto. Esta largura refere-se ao espaço horizontal disponível para exibição da aplicação.

Este atributo utiliza obrigatoriamente pixels como unidade de medida, desta forma, apenas números devem ser informados para definição da largura. A largura da aplicação exibida no modal respeita a definição do atributo Largura da Tabela.

Exemplo da aplicação aberta no modal

Altura modal

Este atributo está disponível apenas para formulários grid editável(view) onde o atributo Usar formulário modal estiver configurado como: Apenas na Edição ou Na edição e inserção.

Define a altura do modal onde o formulário será exibido. Esta altura refere-se ao espaço vertical disponível para exibição da aplicação.

Este atributo utiliza obrigatoriamente pixels como unidade de medida, desta forma, apenas números devem ser informados para definição da largura. A altura da aplicação é calculada automaticamente e respeita a quantidade de campos selecionados para a aplicação.

Exemplo da aplicação aberto no modal

Formatação e comportamento

Confira abaixo o detalhamento de cada atributo disponível no bloco Formatação e Comportamento.

Notificar alterações descartadas

Este atributo define o comportamento da aplicação com relação a alterações que ainda não foram salvas caso o usuário realize alguma ação de recarga de dados.

Exemplos de recarga de dados

• Utilizar botão recarregar .
• Navegar entre páginas.
• Redirecionamentos para outra aplicação na mesma janela.

Quando Desabilitado, se o usuário realizar alguma ação que cause a recarga dos dados antes que as alterações realizadas sejam salvas, a ação iniciada será executada e os dados não salvos serão perdidos.

Quando habilitado, sempre que o usuário realizar alguma ação que cause a recarga dos dados antes que eles tenham sido salvos será exibido um alerta informando sobre a possível perda desses dados.

Neste caso o usuário pode optar por clicar em OK que irá continuar a ação iniciada culminando no descarte das alterações não salvas ou clicar em Cancelar que fará com que a ação iniciada seja interrompida mantendo os dados não salvos.

Exemplo da notificação de alterações descartadas

Algumas ações podem causar a perda dos dados não salvos, por exemplo: Navegar entre os registros ou utilizar o botão de recarga

Tabulação automática

Muda o foco para o próximo campo quando a quantidade de caracteres do campo atual chega ao limite definido nas configurações.

Exemplo de tabulação automática

No exemplo abaixo o Campo 1 possui o limite de 3 caracteres. Ao preencher todos os caracteres o foco muda para o Campo 2.

Selecionar Conteúdo do Campo

Define se o conteúdo do campo será selecionando ou não ao receber o foco.

Quando habilitado todo o conteúdo do campo é selecionado..

Exemplo do comportamento do campo com o atributo habilitado

Quando desabilitado o conteúdo do campo não será selecionado.

Exemplo do comportamento do campo com o atributo desabilitado

Use a tecla Enter para

Este atributo define o comportamento da tecla enter na aplicação, tendo como opções: tabular e submeter.

A propriedade submeter não está disponível para aplicações de formulário.

Tabular

Permite que o usuário navegue entre os campos da aplicação utilizando a tecla enter. A tabulação segue a ordem dos campos definida no menu selecionar campos.

Exemplo tabular com enter

Submeter

Permite ao usuário submeter a aplicação utilizando a tecla enter.

Exemplo submeter com enter

Esta opção não está disponível para aplicações de formulário.

Campo com focus inicial

Define o campo que receberá o foco quando a aplicação for carregada. Possibilitando que o usuário comece a digitar sem a necessidade de ter utilizar o mouse para focar no campo.

Exemplo do foco inicial

Focar campo com erro

Define o comportamento do foco com relação aos campos que apresentárem erro ao submeter o formulário.

Quando habilitado, ao submeter o formulário o campo que apresentar erro receberar o foco. Caso mais de um campo apresente erro o foco será no primeiro campo com erro, seguindo a orde definida no menu Posicionamento de Campos.

Quando desabilitado, ao submeter o formulário nenhum campo receberá o foco automático caso apresente erro.

Marcar todas as caixas de seleção

Este atributo controla a exibição da coluna Selecionar possibilitando que os usuários da aplicação possam marcar todos os campos checkbox da aplicação ou apenas de um registro expecífico.

Este atributo está disponível apenas em formulários Múltiplo Registro

Esta coluna possibilita dois funcionamentos distintos dependendo do checkbox marcado, confira abaixo os exemplos.

Ao marcar a checkbox abaixo da label Selecionar

Neste caso, todos os campos checkbox da página atual da aplicação serão marcados.

Ao marcar a checkbox na linha do regitro

Neste casos, todos os campos do registro configurados como checkbox serão marcados.

Exibir ícone somente no mouseover

Define se os ícones de ordenação do tema ![icone de ordenação definido pelo tema][ex_icon_ordenacao_tema] serão sempre exibidos ou se serão exibidos apenas no mouseover.

Este atributo é válido apenas em formulários Horizontais: Múltiplos Registros, Grid Editável e Grid Editável(View).

Quando Habilitado, os ícones de ordenação são exibidos apenas no mouseover.

Ícones de ordenação exibidos no mouseover

Quando Desabilitado, os ícones de ordenação serão sempre exibidos na aplicação.

Ícones de ordenação sempre exibidos