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 novo Componente visual fonte de dados ao Sub Formulário sem interferir no componente visual fonte de dados associado ao componente Formulário (principal). 

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.

Aba 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. Selecione um dos subcomponentes clicando em cima.

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

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 Formulário). Para isso, é necessário configurar duas entidades 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

Nos arquivos do projeto, acesse o menu de contexto do diretório Autenticado (Localização:  Formulários/Web/ ) (destaque 1 da figura 1.1) e selecione Novo > Formulário para criar um formulário web.

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.

Figura 2 - Configuração da fonte de dados Status

1. Selecione o segundo componente fonte de dados;
2. Na propriedade Configurações, selecione a classe app.Status.
3. Na propriedade Postergar Carga, selecione a opção sim.
4. Na propriedade Mestre Detalhe, clique em "..." para abrir sua janela de configurações.
5. Clique no botão + Adicionar Ligação.

6. Selecione no Campo detalhe a chave estrangeira (pedido) que será igual ao id da fonte de dados Pedido.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).

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.

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).

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.

Figura 2.2 - Configurando colunas da grade

1. Clique na aba Colunas;
2. Na coluna Listagem marque um x no campo status;
3. Na coluna Listagem marque um x no campo data;
4. 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.

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).

Figura 3.1 - Vinculando fonte de dados ao componente

Em seguida, arraste um componente (ex.: Entrada de texto) à div do Sub Formulário, verificando se as arestas da div do componente 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 campo recém-adicionado.

Figura 3.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 o 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. 

Figura 3.3 - Configurando valor do componente

Ocultar componente

Para ocultar o Sub Formulário quando não estiver em modo de edição ou inserção, selecione 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

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).

Animação 2 - Executando o exemplo apresentado