Exercício: usar coleções e manipular tabelas

  • 15 minutos

Neste exercício, você praticará o uso de tabelas. Crie e filtre uma coleção, faça uma pesquisa e edite um registro na coleção, adicione e remova um registro de uma coleção.

Criar a coleção de dados

  1. Entre no Power Apps.

  2. Na tela inicial, selecione + Criar no painel de navegação esquerdo. Em seguida, selecione Aplicativo em branco.

    Por fim, selecione Criar em Aplicativo de tela em branco.

  3. Dê um nome ao aplicativo e selecione Criar.

  4. Selecione a guia Inserir, adicione um botão e defina a propriedade OnSelect como esta fórmula:

    ClearCollect(CityPopulations, 
{City:"London", Country:"United Kingdom", Population:8615000}, 
{City:"Berlin", Country:"Germany", Population:3562000}, 
{City:"Madrid", Country:"Spain", Population:3165000}, 
{City:"Rome", Country:"Italy", Population:2874000}, 
{City:"Paris", Country:"France", Population:2273000}, 
{City:"Hamburg", Country:"Germany", Population:1760000}, 
{City:"Barcelona", Country:"Spain", Population:1602000}, 
{City:"Munich", Country:"Germany", Population:1494000}, 
{City:"Milan", Country:"Italy", Population:1344000})

  5. Mantenha pressionada a tecla Alt e selecione o controle Botão. (Isso criará sua coleção e armazenará todas as informações.) Atualize a propriedade Text do botão para "Collect".

  6. Insira um controle de Galeria vertical e escolha CityPopulations como Fonte de dados (como alternativa, você pode atualizar a propriedade Items da galeria para CityPopulations).

  7. Com a galeria selecionada, no painel Propriedades no lado direito da tela, altere o layout para Título, subtítulo e corpo. Depois, selecione Campos e altere a opção suspensa Corpo para Population. Consulte a imagem abaixo.

    Captura de tela da nova Galeria com realces das opções Fonte de dados e Fields no painel Propriedades e Population como a opção selecionada em Body1.

  8. Com a galeria ainda selecionada, atualize a propriedade OnSelect para o seguinte:

     Set(varRecord,ThisItem)

Filtrar a coleção

  1. Insira um Rótulo de Texto e altere a propriedade Text para “Population”. Em seguida, mova-o para a direita da galeria.

  2. Depois, insira um controle Deslizante e coloque-o sob o rótulo que criamos. Você pode encontrar o controle rapidamente digitando "slider" no campo de pesquisa.

  3. Selecione o controle deslizante e altere a propriedade Min para:

    Min(CityPopulations, Population)

  4. Em seguida, altere a propriedade Max para:

    Max(CityPopulations, Population)

  5. Agora selecione a galeria e altere a propriedade Items para:

    Filter(CityPopulations, Population>= Slider1.Value)

  6. Agora veremos apenas os registros maiores do que o valor do controle deslizante selecionado. Coloque o aplicativo no modo de visualização e mova o controle deslizante para ver isso em ação. Com o controle deslizante totalmente para a esquerda, você verá todas as cidades. À medida que você move o controle deslizante para a direita, a lista diminui, de modo que apenas Londres permanece na galeria.

    Animação do filtro deslizante.

Usar as funções LookUp e Patch

  1. Insira um Rótulo de texto, altere a propriedade Text para "City" e coloque-a sob o controle deslizante.

  2. Em seguida, insira um Controle suspenso e mova-o para baixo do rótulo City.

  3. Na propriedade Items do menu suspenso, digite o seguinte:

    CityPopulations.City

  4. Na propriedade OnChange do menu suspenso, insira o seguinte:

    Set(varRecord, LookUp(CityPopulations, City=Self.SelectedText.City))

  5. Insira outro Rótulo de texto e atualize a propriedade Text para "Country".

  6. Insira um controle de Entrada de texto e mova-o abaixo do rótulo "Country".

  7. Na propriedade Default de Text Input, insira varRecord.Country.

  8. Altere o nome deste controle de Entrada de texto para txtCountry.

  9. Repita as 4 etapas anteriores para adicionar rótulos de texto e controles de entrada de texto para City e Population, atualizando as propriedades Default das entradas de texto para varRecord.City e varRecord.Population, respectivamente. Quando terminar, sua tela deverá ser semelhante à imagem abaixo.

    Captura de tela das entradas de texto e dos novos rótulos.

  10. Agora adicione um botão à tela e posicione-o abaixo da entrada de texto Population. Altere a propriedade Text para "Enviar".

  11. Altere a propriedade OnSelect do botão para o seguinte:

    Patch(CityPopulations, varRecord, {Country: txtCountry.Text, City: txtCity.Text, Population: Value(txtPopulation.Text)})

    Observação

    Precisamos empacotar txtPopulation.Text entre Value() porque a entrada de texto retorna uma cadeia de caracteres por padrão, e nossa coleção espera um número.

  12. Coloque o aplicativo no modo de Visualização e selecione um item da galeria. Altere um dos valores, pressione o botão "Submit" e você verá que o item foi alterado em sua galeria.

  13. Coloque o aplicativo novamente no modo de Edição.

Adicionar e remover registros

  1. Selecione e copie o botão "Submit". Cole-o três vezes.

  2. Altere a propriedade Text dos três novos botões para Clear, New e Remove.

  3. Posicione os botões em duas fileiras de dois botões alinhados ao botão Submit original ("New" sob "Submit", "Clear" à direita de "Submit" e "Remove" abaixo de "Clear").

  4. Clique e pressione a tecla Ctrl nos botões Clear e Remove. Altere a propriedade DisplayMode para:

    If(IsBlank(varRecord), DisplayMode.Disabled, DisplayMode.Edit)

    Agora esses botões poderão ser clicados apenas se houver um registro selecionado.

  5. Clique e pressione a tecla Ctrl no botão Remove para anular a seleção dele. Atualize a propriedade OnSelect do botão Clear para o seguinte:

    Set(varRecord, Blank())

    Agora você pode limpar o registro selecionado usando esse botão. Visualize o aplicativo e selecione o botão Clear.

    Observe como os botões Clear e Remove são mostrados desabilitados.

  6. Com o aplicativo de volta ao modo de edição, selecione o botão Remove. Atualize a propriedade OnSelect para:

    Remove(CityPopulations, varRecord)

  7. Por fim, selecione o botão New e altere a propriedade OnSelect do botão para:

    Collect(CityPopulations, {Country: txtCountry.Text, City: txtCity.Text, Population: Value(txtPopulation.Text)})

  8. Coloque seu aplicativo no modo de Visualização e tente adicionar um novo registro e remover um registro existente.

    Captura de tela do registro recém-criado com o novo registro e o botão New realçado.

Você sabe agora em mais detalhes como trabalhar com as tabelas no Power Apps. Você poderia adicionar funcionalidades adicionais às diferentes propriedades dos botões para gerar uma melhor experiência do usuário, mas esperamos que este exercício tenha lhe dado uma ideia do que é possível.