Tutorial 5: conectar modelos de dados

Widget de botão Habilidades intermediárias do App Maker

access_time Cerca de 30 minutos

O que você criará

Você criará um aplicativo de RH que listará os funcionários por departamento. O usuário poderá:

  • adicionar, editar, classificar e excluir registros de departamentos e funcionários;
  • visualizar os registros dos funcionários de duas maneiras:

    • Apenas por departamento
    • Por departamento ou visualizar todos

Este aplicativo não inclui uma maneira de o usuário navegar pelas páginas. Para fazer isso, use o seletor de página no modo Visualização.

O que você aprenderá

Com este tutorial, você aprenderá a:

  • criar relações entre modelos de dados. Neste tutorial, você criará uma relação de um para muitos entre um modelo de Departamentos e um modelo de Funcionários. Um departamento pode ter vários funcionários;
  • exibir registros que satisfaçam a relação, como registros de todos os funcionários do departamento de RH.

Criar seu aplicativo

  1. Faça login na conta do G Suite fornecida pelo empregador ou pela escola.
  2. Abra o App Maker.
  3. Crie um aplicativo em branco e o nomeie como Relações.

Configurar o modelo de dados Departamentos

  1. Adicione um modelo de dados do Cloud SQL e o nomeie como Departamentos.
  2. Adicione os seguintes campos:

    Nome do campoTipo de campo
    DepartmentString
    LocationString
  3. Clique no campo Departamento e, depois, em Definir como campo de exibição.

    Ao definir o Departamento como um campo de exibição, o App Maker usa os valores do campo para fazer referência a um registro nesse modelo. Por exemplo, ao adicionar um widget de lista suspensa mais adiante nesse tutorial, os valores do campo Departamento preenchem automaticamente as opções da lista suspensa com a expressão de vinculação @datasource.items.

Configurar o modelo de dados Funcionários

  1. Adicione um modelo de dados do Cloud SQL e o chame de Funcionários.
  2. Adicione os seguintes campos:

    Nome do campoTipo de campo
    FirstNameString
    LastNameString
    EmailString
    StartDateData

    Não é preciso definir um campo de exibição para o modelo Funcionários.

Adicionar uma relação

  1. Clique no modelo Departamentos e, depois, na guia Relações.

  2. Clique em Adicionar Relação:

    1. Para o final da relação do modelo Departamentos, clique na seta para baixo Contagem e selecione Um. Deixe o nome padrão para este fim de relação. Digite "Departamento" para o nome desse fim de relação.
    2. Para o outro modelo, clique na seta para baixo Modelo e selecione Funcionários.
    3. Para o final da relação do modelo Funcionários, clique na seta para baixo Contagem e selecione Muitos. Digite "Funcionários" para o nome desse fim de relação.
    4. Clique em Criar.

Criar uma página em que é possível adicionar departamentos

  1. Renomeie a página NovaPágina como EditarDepartamentos. O painel de nível superior da página é selecionado.
  2. No Editor de propriedades, clique na propriedade fonte de dados e selecione Departamentos.
  3. Adicione um Formulário de inserção à página. Mantenha as opções padrão do formulário.
  4. Feche a Paleta de widgets (clique em Fechar close).

Criar uma página em que é possível adicionar funcionários

  1. Adicione uma nova página. Nomeie-a como EditarFuncionários, defina a fonte de dados como Funcionários e clique em Criar.
  2. Adicione um Formulário de inserção à página. Mantenha as opções padrão do formulário.
  3. Feche a Paleta de widgets.

Criar uma página em que é possível listar funcionários por departamento

É possível usar as relações para tabular funcionários por departamento de duas maneiras. Veja essas duas abordagens neste tutorial:

  • Somente departamentos específicos (demonstrados nesta seção): use a relação como uma fonte de dados. A tabela que usa essa fonte de dados não é compatível com paginação ou classificação baseada em colunas.
  • Departamentos específicos, quando nenhum departamento é selecionado, todos os funcionários (demonstrados na próxima seção): use um filtro de consulta na relação. A tabela que usa o filtro de consulta é compatível com a paginação. Também é possível classificar a tabela por colunas.

Em um aplicativo real, escolha uma dessas abordagem. Recomenda-se a segunda por ser paginada, classificável e vazia apenas quando um departamento não tem funcionários.

Para criar uma página que liste funcionários apenas por departamento:

  1. Adicione uma página, nomeie-a como RelaçãodeFontedeDados, defina a fonte de dados como Departamentos e clique em Criar.
  2. Adicione uma lista suspensa para permitir que os usuários do aplicativo selecionem o departamento:

    1. Clique em Widgets widgets e adicione um widget de lista suspensa à página OrigemdeDadosdaRelação.
    2. Clique na propriedade opções e selecione Mais opções chevron_right origem de dados chevron_right itens. Clique em OK. Isso definirá os valores possíveis da lista suspensa para o campo de exibição da fonte de dados. Nesse caso, os valores no campo Departamento.
    3. Clique na propriedade valor e selecione Mais opções chevron_right origem de dados chevron_right item. Clique em OK. Isso definirá o valor do widget para o item que o usuário selecionar.
    4. Clique na propriedade rótulo e insira Selecione um departamento.
  3. Adicione uma tabela para exibir registros de funcionários:

    1. Adicione um widget de tabela Widget de Tabela à página abaixo do widget de lista suspensa. Alinhe as laterais esquerdas da tabela e o widget de lista suspensa.
    2. Selecione a origem de dados Departamento: Funcionários (relação) e clique em Próximo. Com essa origem, a tabela exibirá todos os funcionários correspondentes ao valor do widget de lista suspensa.
    3. Mantenha as opções padrão para a tabela. Clique em Próximo e em Concluir.
  4. Feche a Paleta de widgets.

Criar uma página em que é possível listar os funcionários por departamento ou listar todos os funcionários

  1. Adicione uma página, nomeie-a como FiltrodeConsulta, defina a fonte de dados como Funcionários e clique em Criar.
  2. Adicione uma lista suspensa para permitir que os usuários selecionem o departamento:

    1. Clique em Widgets widgets e adicione uma lista suspensa à página FiltrodeConsulta.
    2. Para a propriedade valor, selecione a expressão de vinculação Mais opções chevron_right origem de dados chevron_right consulta chevron_right filtros chevron_right Departamento chevron_right _igual a. Clique em Ok.
    3. Para a propriedade opções, selecione uma expressão de vinculação no painel Aplicativo à esquerda: origem de dados chevron_right Departamento chevron_right itens. Clique em Ok.
    4. Clique na propriedade rótulo e insira Selecione um departamento.
    5. Abra a seção Eventos do Editor de propriedades, clique em aoEditarValor e selecione Recarregar fonte de dados para recarregar a fonte de dados e executar novamente a consulta quando o valor da lista suspensa for alterado pelo usuário do aplicativo.
  3. Adicione uma tabela para exibir os registros de funcionários que correspondam à seleção do departamento:

    1. Adicione uma tabela Widget de Tabela à página abaixo da lista suspensa. Alinhe as laterais esquerdas da tabela e do widget de lista suspensa.
    2. A origem de dados Herdada: Funcionários está selecionada. Mantenha as opções padrão para a tabela e clique em Avançarchevron_rightAvançarchevron_rightConcluir.
  4. Feche a Paleta de widgets.

Visualizar e testar o aplicativo

  1. No canto superior direito, clique em Visualizar para executar o aplicativo em uma nova guia do navegador.
  2. Selecione a conta e clique em Permitir para que o aplicativo use informações específicas.
  3. Insira os dados do departamento:
    1. No seletor de página, selecione EditarDepartamentos.
    2. No formulário Editar Departamento, insira o nome e a localização de vários departamentos. Clique em Criar para cada novo registro.
  4. Digite os dados do funcionário:
    1. No seletor de página, selecione EditarFuncionários.
    2. No formulário Editar Funcionários, insira informações para vários funcionários. Clique em Criar para cada novo registro. Selecione diferentes departamentos para os funcionários.
  5. Visualize os funcionários por departamento na página que usa uma fonte de dados de relação para a tabela:

    1. No seletor de página, selecione RelaçãodeFontedeDados.
    2. Selecione um departamento na lista suspensa. A tabela contém registros de funcionários para esse departamento. Quando nenhum departamento for selecionado, a tabela ficará vazia.
  6. Visualize os funcionários por departamento na página que usa um filtro de consulta para carregar dados da tabela:

    1. No seletor de página, selecione FiltrodeConsulta.
    2. Se nenhum departamento for selecionado, a tabela conterá todos os registros de funcionários. Selecione um departamento na lista suspensa. Agora a tabela conterá registros de funcionários para esse departamento.

Parabéns! Você criou um aplicativo do App Maker que usa relações.

A seguir

  1. Saiba mais sobre as relações.
  2. Estude o aplicativo de amostra Relações. É parecido com o aplicativo que você acabou de criar.
  3. Saiba mais sobre filtros e origens de dados de consulta.