Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
O Sub Formulário possui o mesmo comportamento do componente Formulário, mas foi criado para ser utilizado dentro desse componente. Dessa forma, é possível vincular um componente para cadastrar, editar e exibir dados dentro do componente Formulário. Ele permite navegar entre os registros, adicionar, editar e excluir o registro ativo.
Principais propriedadesnovo Componente visual fonte de dados ao Sub Formulário sem interferir no componente visual fonte de dados associado ao componente Formulário (principal).
Image Added
Animação 1 - Exemplo do componente rodando dentro do Formulário no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome | Tipo | Doc |
---|---|---|
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Estilo | style | Altera o estilo do componente da forma inline |
Exibir | ng-show | Propriedade |
Angular usada para mostrar ou oculta o componente. | ||
Fonte de dados | crn-datasource | Seleciona |
já |
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. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Subcomponentes
EsseAba de Estilos
O componente Sub Formulário não possui propriedades de estilo específicas.
Subcomponentes
Assim como o componente Formulário, esse componente é formado por oito subcomponentes agrupados: seis botões
e uma div.
Cada um possui uma função que vem configurada no componente. Para selecionar um subcomponente basta clicar no que for desejado.Selecione um dos subcomponentes clicando em cima.
Todos os subcomponentes "botão" executam alguma ação na Fonte de dados configurada.
Subcomponente | Tipo | Função |
---|---|---|
Inserir | Botão | Abre o modo de inserção de dados. |
Editar | Botão | Abre o modo de edição de um dado já existente. |
Anterior | Botão | Volta para o item anterior. |
Próximo | Botão | Vai para o próximo item. |
Excluir | Botão | Exclui os dados existentes. |
Enviar | Botão | Envia o que foi feito no modo de inserção/edição. |
Cancelar | Botão | Cancela o que foi feito no modo de inserção/edição. |
Campos do formulário | Div | Espaço para adicionar campos (componentes) do formulário. |
Configuração
Relacionamento
Exemplo de uso
Neste exemplo vamos utilizar um Sub Formulário para listar os status do pedido visualizado no Formulário (Animação 2).
Relacionamento e view
Usaremos 2 classes: Pedido (entidade do Formulário) e Status do Pedido (entidade do Sub Crie um exemplo para filtrar os status (Sub Formulário) de acordo com o pedido ( Formulário). Para isso, é necessário configurar duas entidades (pedido e status) com o relacionamento 1 para N entre elas para criar a chave estrangeira (FK).
Neste exemplo não abordaremos a configuração feita no Diagrama de dados, acesse a documentação do Diagrama de dados e também de como gerar a camada de persistência.
Figura 1 - Relacionamento 1 para N
Inserir componentes
Após adicionar o componente Formulário, insera o componente Grade e configure-a com a fonte de dados Status. Os campos exibidos na listagem serão apenas status e data. Caso não deseje utilizar a grade, adicione e configure apenas a fonte de dados.
Em seguida, arraste o componente Sub Formulário para a área de edição abaixo da grade (Figura 3).
Image Removed
Figura 3 - Inserindo componente Sub Formulário
Vincular fonte de dados
Após configurar a fonte de dados, selecione o componente Sub Formulário e, na aba de Propriedades, vincule a fonte no campo Fonte de dados (Figura 4).
Image Removed
Figura 4 - Vinculando fonte de dados ao componente
Mestre detalhe
Na fonte de dados do Sub Formulário, vá até a aba de Propriedades e adicione uma ligação no campo Mestre Detalhe. Clique em "...", depois selecione no Campo detalhe a chave estrangeira criada no relacionamento entre fontes igual ao id da fonte de dados do componente Formulário. Exemplo: pedido = Expressão Pedido.active.id
.
Figura 5 - Configurando mestre detalhe
Adicionar campo
Nos arquivos do projeto, acesse o menu de contexto do diretório Autenticado (Localização: Formulários/Web/
Tooltip | ||||
---|---|---|---|---|
| ||||
Endereço: |
) (destaque 1 da figura 1.1) e selecione Novo > Formulário para criar um formulário web.
Image Added
Figura 1.1 - Novo formulário web
Fontes de dados e Formulários
Arraste 2 Componentes visuais fonte de dados, vincule o primeiro com a Classe Pedido e para o segundo, configure como nos passos da Figura 2.
Image Added
Figura 2 - Configuração da fonte de dados Status
- Selecione o segundo componente fonte de dados;
- Na propriedade Configurações, selecione a classe app.Status.
- Na propriedade Postergar Carga, selecione a opção sim.
- Na propriedade Mestre Detalhe, clique em "..." para abrir sua janela de configurações.
- Clique no botão + Adicionar Ligação.
Selecione no Campo detalhe a chave estrangeira (
pedido
) que será igual aoid
da fonte de dadosPedido.active.id
do componente Formulário.
Resultado:pedido = Expressão Pedido.active.id
.
Arraste o componente Formulário e na propriedade Fonte de dados, selecione a opção "Pedido". Na div do componente Formulário, arraste os componentes Entrada de texto e configure suas propriedades Valor (ng-model) para "Pedido.active.item
" e "Pedido
.
active.quantidade
".
Ainda na div do formulário, insira o componente Grade, arraste-o para a área de edição e solte-o logo depois do último campo (Figura 2).
Image Added
Figura 2 - Inserindo a grade na div do formulário
Alguns componentes permitem adicionar a propriedade 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. No caso de um componente Entrada de texto, selecione-o e desagrupe-o no botão cadeado da barra de opções (destaque 1 da figura 2.1), selecione somente o campo input (destaque 2 da Figura 2.1), adicione o conteúdo !datasource.editing && !datasource.inserting
na propriedade Apenas leitura (ng-readonly) (3). 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.
Repita esse procedimento para todos os campos adicionados no Formulário.
Image Added
Figura 2.1 - Configurando propriedade apenas leitura
Após arrastar, uma janela de configuração será aberta. Na aba Geral, selecione a opção "Status" no campo Fonte de dados (destaque 1 da figura 2.1) e no campo Editável, selecione a opção "Pelo Datasource" (2).
Image Added
Figura 2.1 - Configurando fonte de dados da grade
Em seguida, acesse a aba Colunas (destaque 1 da figura 2.2) e siga os passos abaixo para configurar.
Image Added
Figura 2.2 - Configurando colunas da grade
- Clique na aba Colunas;
- Na coluna Listagem marque um x no campo status;
- Na coluna Listagem marque um x no campo data;
- Deixe o campo Editar/Excluir também marcado na Listagem.
Clique em OK para fechar a janela de configurações da Grade.
Adição do Sub Formulário
Arraste o componente Sub Formulário para a área de edição abaixo da Grade (Figura 3). O componente Sub Formulário deve ficar dentro da div do componente Formulário.
Image Added
Figura 3 - Inserindo componente Sub Formulário
Selecione o componente Sub Formulário e, na aba de Propriedades, selecione a opção Status no campo Fonte de dados (Figura 3.1).
Image Added
Figura 3.1 - Vinculando fonte de dados ao componente
Em seguida, arraste um componente (ex.: Entrada de texto) à div do Sub FormulárioEm seguida, arraste um componente à div do formulário, verificando se as arestas da div do do componente formulário Sub Formulário estão tracejadas , (Figura 3.2) e solte-o. Para adicionar outro componente, arraste-o para a área de edição abaixo do componente campo recém-adicionado.
Image Added
Figura 6 -
Configurar campo
Para que o item seja salvo, é necessário vincular o componente com um campo3.2 - Adicionando campo ao Sub Formulário
Agora é necessário vincular os componentes Entrada de texto adicionados na div do Sub Formulário com os campos da fonte de dados Status. Então, selecione
no componente (destaque 1 da Figura 7) e, na aba Propriedades, abra a lista suspensa do campo Valor (2) e escolha em qual dos campos da fonte de dados será salvo.Obs.: Deve-se fazer esse procedimento para todos os componentes adicionados ao formulário.
Figura 7 - Configurando valor do componente
Por fim, alguns componentes permitem adicionar a propriedade apenas leitura para que não seja possível escrever no itemo primeiro componente Entrada de texto e na propriedade Valor (ng-model), selecione a opção "Status.active.status
", no segundo componente entrada de texto selecione a opção "Status
.
active.data
" na mesma mesma propriedade.
Image Added
Figura 3.3 - Configurando valor do componente
Ocultar componente
Para ocultar o Sub Formulário quando não estiver em modo de
inserção ou edição. No caso de um componente Entrada de textoedição ou inserção, selecione
-o e desagrupe-o. Selecione somente a tag input (destaque 1 da Figura 8), 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 8 - Configurando propriedade apenas leitura
o componente Sub Formulário (1 da figura 4), na aba Propriedades, adicione no campo Exibir (ng-show) (2) o conteúdo: datasource.editing || datasource.inserting
Image Added
Figura 4 - Ocultando o Sub Formulário
Teste
Por fim, rode o projeto e abra a página ne pedidos que criamos. Clique no ícone de Inserir (lápis) para adicionar itens (pedidos) e habilitar a inserção ou edição dos status para o item ativo (Animação 2).
Image Added
Animação 2 - Executando o exemplo apresentado
Nome em inglês
Sub form
Nome em inglês
Subform
Nesta página
Índice |
---|
Compatibilidade
- Formulário web
Equivalente mobile
Não possui.
Botão do componente
Image Added
Imagem no Editor Visual
Image Added