Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
Formulário é um componente para cadastrar, editar e exibir dados. Ele permite navegar entre os registros, adicionar, editar e excluir o registro ativo.
Image Added
Animação 1 - Exemplo do componente associado com botões rodando no browsersimulador
Principais propriedades
Nome | Tipo | Doc |
---|---|---|
Exibir | ng-show | Propriedade AngularJS usada para mostrar ou oculta o componente. |
Fonte de dados | crn-datasource | Seleciona uma fonte de dados 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. |
Configuração
Vincular fonte de dados
Primeiro é feita a adição e configuração do componente fonte de dados no formulário. Depois selecione o componente Formulário clicando em form na árvore DOM (destaque 1 da Figura 1) e, na aba de Propriedades, vincule a fonte no campo Fonte de dados.
Figura 1 - Vinculando fonte de dados
Adicionar componentes
Adicione o componente Barra de Botões duas vezes. Selecione o componente e arraste o componente à div do formulário, verificando se as arestas da div do componente formulário estão tracejadas, e solte-o. Para adicionar outro componente, arraste-o e solte-o embaixo de componente recém-adicionado.
Figura 2.1 - Adicionando botões ao formulário
Em seguida, adicione alguns componentes para exibir os campos da fonte de dados. Arraste o componente do editor visual e solte-o na área de edição embaixo do componente Barra de botões.
Figura 2.2 - Adicionando campos ao formulário
Configurar botões
Adicionar ou remover botões
Clique no componente Barra de botões e, na aba de Propriedades, role até a seção de Itens e clique no ícone de Adicionar (1 da Figura 3) para adicionar botões ou no ícone de Remover (2) para remover o botão. Adicione dois itens na primeira barra e remove um item da segunda.
Figura 3 - Adicionando ou removendo botões
Alterar ícones
Após adicionar e remover itens, altere os ícones e temas dos botões. Na aba Propriedades do componente, role até a seção Itens e selecione o item. Você será redirecionado para as Propriedades do botão selecionado.
Obs.: Selecione cada item da barra de botões e repita os passos abaixo.
Figura 4 - Alterando ícone do botão
- Na aba de Propriedades do botão, altere o ícone no campo Ícone. Os ícones utilizados nesse exemplo serão:
- Inserir: ion-android-add;
- Editar: ion-android-create;
- Anterior: ion-android-arrow-back;
- Próximo: ion-android-arrow-forward;
- Excluir: ion-android-close;
- Salvar: ion-android-done;
- Cancelar: ion-android-cancel.
- Deixe o campo Conteúdo em branco;
- Altere o campo Tema de acordo com a finalidade do botão:
- Azul para os botões gerais: tema
Positive
; - Vermelho para os botões de excluir ou cancelar: tema
Assertive
; - Verde para o botão de salvar: tema
Balanced
.
- Azul para os botões gerais: tema
Configurar eventos
Assim como no tópico anterior, selecione cada botão de forma separada e vá para a aba de Eventos. Adicione a propriedade ng-click
(destaque em amarelo da Figura 5) no campo Novo Evento, seguido do evento de acordo com cada botão.
Obs.: Selecione cada item da barra de botões para adicionar o evento correspondente.
Figura 5 - Adicionando evento ao botão
- Evento do botão Inserir:
datasource.startInserting()
- Evento do botão Editar:
datasource.startEditing()
- Evento do botão Voltar:
datasource.previous()
- Evento do botão Próximo:
datasource.next()
- Evento do botão Excluir:
datasource.remove()
- Evento do botão Salvar:
datasource.post()
- Evento do botão Cancelar:
datasource.cancel()
Agora adicione nos botões Voltar e Próximo a propriedade Desabilitar Se para que o formulário percorra apenas a quantidade de itens na fonte de dados.
Figura 6 -
- Selecione o botão Voltar e, na aba de Propriedades, clique no link Exibir mais localizado ao fim da aba. Inclua no campo Desabilitar Se (Figura 6) a propriedade
!datasource.hasPrevious()
. - Selecione o botão Próximo e, na aba de Propriedades, clique no link Exibir mais localizado ao fim da aba. Inclua no campo Desabilitar Se (Figura 6) a propriedade
!datasource.hasNext()
.
Esconder botões
Nesse tópico vamos abordar como os botões vão se comportar no modo de edição e inserção de itens.
- Clique no primeiro componente Barra de botões e, na aba de Propriedades, clique em Exibir mais localizado ao fim da aba. Inclua no campo Esconder Se a propriedade
datasource.editing || datasource.inserting
para esconder o componente quando entrar em modo de edição ou inserção. - Clique no segundo componente Barra de botões e, na aba de Propriedades, clique em Exibir mais. Inclua no campo Esconder Se a propriedade
!datasource.editing && !datasource.inserting
para mostrar o componente apenas quando entrar em modo de edição ou inserção.
Configurar campo
Vincular campo da fonte
Para que o item seja salvo, é necessário vincular o componente com um campo da fonte de dados. Então, selecione no componente (destaque 1 da Figura 8) e, na aba Propriedades, 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 8). Selecione a aba Campo de tela (3) e escolha em qual dos campos da fonte de dados (4) será salvo.
Obs.: Deve-se fazer esse procedimento para todos os componentes adicionados ao formulário.
Figura 8 - Vinculando campo da fonte ao componente
Habilitar apenas leitura
Por fim, alguns componentes permitem adicionar a propriedade apenas leitura para que não seja possível escrever no item quando não estiver em modo de inserção ou edição. No caso de um componente Entrada de texto, selecione-o e desagrupe-o. Selecione somente a tag input (Figura 9), clique em Exibir mais e adicione o conteúdo !datasource.editing && !datasource.inserting
na propriedade Apenas leitura.
Obs.: Repita esse procedimento para todos os campos adicionados no formulário.
Figura 9 - Habilitar apenas leitura no input
Nome em inglês
Form
Nesta página
Índice |
---|
Compatibilidade
- Formulário mobile
Equivalente web
Botão do componente
Imagem no editor visual