Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Função

Formulário é um componente que permite visualizar, cadastrar, editar e excluir o registro ativo da Fonte de dados vinculada. Os botões no componente permitem executar diversas ações na fonte de dados e o elemento div aceita subcomponentes que serão vinculados aos atributos da fonte de dados.


Image Added

Animação 1 - Exemplo do componente rodando no browser

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.

NomePropriedadeFunção
IdentificadoridAtributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
EstilostyleAltera o estilo do componente de forma inline.

Exibir

ng-show

Propriedade AngularJS Angular usada para mostrar ou oculta o componente.

Fonte de dados

crn-datasource

Seleciona uma uma fonte de dados que  que já foi previamente criado no formulário.

Repetir

ng-repeat

Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.

Segurança

cronapp-security

Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados.

Subcomponentes

Skincrn-skinPermite selecionar um skin que afetará apenas o componente selecionado.

Aba de Estilos

Os componentes Formulário não possuem propriedades de estilo específicas.

Subcomponentes

Esse componente é formado por O componente Formulário (web) é formado oito subcomponentes agrupados: seis botões e uma div. Cada um possui uma função que vem configurada no componente. Para selecionar cada um de forma individual não é necessário desagrupá-los, basta clicar no subcomponente desejadoSelecione um dos subcomponente clicando em cima.

Todos os subcomponentes "botão" executam alguma ação na Fonte de dados configurada.

SubcomponenteTipoFunção
InserirBotãoAbre o modo de inserção de dados dados.
EditarBotãoAbre o modo de edição de um dado já existente.
AnteriorBotãoVolta para o item anterior.
PróximoBotãoVai para o próximo item.
ExcluirBotãoExclui os dados existentes.
EnviarBotãoEnvia o que foi feito no modo de inserção/edição.
CancelarBotãoCancela o que foi feito no modo de inserção/edição.
Campos do formulárioDivEspaço para adicionar campos (componentes) do formulário.
Como usar

Configuração

Vincular fonte de dados

Primeiro é feito feita a adição e configuração do componente visual fonte de dados no  no formulário. Em seguida, Depois selecione o componente Formulário e, na aba de Propriedades, vincule a fonte no campo Fonte de dados (Figura 1).


Image RemovedImage Added

Figura 2 1 - Vinculando fonte de dados

Adicionar campo

Para adicionar campos ao formulário, basta arrastar o componente desejado e soltar dentro da div (Figua 3) quando ela ficar com as arestas tracejadas. 

Image Removed

Em seguida, arraste um componente à div do formulário, verificando se as arestas da div no componente formulário estão tracejadas, e solte-o (Figura 2). Para adicionar outro componente, selecione o componente recém-adicionado e clique no ícone "+" adicionar elemento do próprio componente.


Image Added

Figura 2 Figura 3 - Adicionando campo

Configurar campo

Para que o item seja salvo, é necessário vincular a entrada de texto o componente com um campo da fonte de dados. Para issoEntão, selecione no componente Entrada de texto (destaque 1 da Figura 3) e, na aba Propriedades, no pouse o mouse sobre o campo Valor e clique no ícone de Editar Expressão (2) para abrir a janela de configuração do conteúdo (seta da Figura 3). Selecione a aba aba Campo de tela (3) e escolha em qual dos campos da fonte de dados (4) será salvo. Repita o usado. 

Obs.: Deve-se fazer esse procedimento para todos os campos do componentes adicionados ao formulário.


Image RemovedImage Added

Figura 4.1 3 - Vinculando campo da fonte a entrada de texto


Por fim, adicione alguns componentes permitem adicionar a propriedade apenas leitura Apenas Leitura (ng-readonly) para que não seja possível escrever no item quando não estiver em modo de inserção ou edição. Para isso, selecione a entrada No caso de um componente Entrada de texto, selecione-o e desagrupe-a e selecione apenas o input. Na aba de Propriedades do input, clique em Exibir mais para exibir todos os campos disponíveis e adicione na propriedade Apenas leitura o, selecione somente a tag input (destaque 1 da Figura 3.1), adicione o conteúdo !datasource.editing && !datasource.inserting na propriedade Apenas leitura (2). Se o campo Apenas leitura não estiver disponível na lista de propriedades, clique em Exibir mais ao final da lista de propriedade para expandir os demais campos.

Obs.: Repita o esse procedimento para todos os campos do adicionados no formulário.Image Removed


Image Added

Figura 43.2 1 - Restringindo o campo para apenas leitura quando não estiver em modo de edição

Nome em inglês

Form


Nesta página

Índice


Compatibilidade

  • Formulário web

Equivalente mobile

Formulário (mobile)


Botão do componente

Image RemovedImage Added


Imagem no Editor Visual

Image RemovedImage Added