Campo de pesquisa do PowerApps: como adicionar e personalizar

Neste tutorial, falaremos sobre o campo de pesquisa do PowerApps e como adicioná-lo e personalizá-lo do zero.

O PowerApps é uma plataforma criada para conveniência, na qual os usuários podem criar seus próprios aplicativos, mesmo que não tenham experiência em codificação ou desenvolvimento de aplicativos. Assim como qualquer outra plataforma da Microsoft, sua força está no sistema de arrastar e soltar e no design intuitivo.

Isso significa que qualquer pessoa que queira criar aplicativos, seja para simplesmente exibir seus dados ou aumentar a produtividade de sua equipe, pode fazê-lo facilmente.

Discutimos o básico para criar um aplicativo do zero em tutoriais anteriores. Desta vez, estamos nos concentrando no campo de pesquisa do PowerApps.

Índice

• Como funciona o campo de pesquisa do PowerApps
• Usando a função de pesquisa
• Criando um campo de pesquisa do PowerApps do zero
• Adicionando colunas a um campo de pesquisa do PowerApps
• Adicionando um ícone de pesquisa funcional e ocultando a barra de pesquisa
• Adicionando uma dica à barra de pesquisa
• Conclusão

Como funciona o campo de pesquisa do PowerApps

A função de pesquisa permite que os usuários pesquisem e filtrem itens em uma galeria. Como o Power Apps vem com modelos de aplicativos nos quais o campo de pesquisa já está definido, tudo o que você precisa fazer é conectar uma fonte de dados para extrair os itens que serão incluídos na galeria.

Ao usar o campo de pesquisa, não há necessidade de digitar nomes inteiros ou palavras. Digitar as primeiras letras filtrará automaticamente os itens e mostrará as entradas correspondentes.

Embora os modelos integrados sejam convenientes de usar, não podemos confiar neles 100% do tempo. Criar seu próprio aplicativo de tela é necessário se você quiser personalizar totalmente o aplicativo com base em suas necessidades específicas. Isso significa que você precisa criar seu próprio campo de pesquisa do zero.

Usando a função de pesquisa

Vamos usar essa tela que construímos do zero em um tutorial anterior. Neste momento, estamos na tela Exibir clientes.

Como contém uma galeria de itens, faria sentido criar um campo de pesquisa aqui.

A galeria exibida nesta página é a Galeria 2. Se observarmos a propriedade Items, veremos que estamos extraindo dados da Tabela1.

Isso significa que, quando adicionarmos a função de pesquisa, ela pesquisará os itens na Tabela1 e filtrará os resultados com base no que digitarmos.

Então, vamos descobrir como funciona a função de pesquisa. Indo para o documento da Microsoft que descreve esta função, ele mostra que uma função de pesquisa usa uma tabela, uma string de pesquisa e as colunas onde você deseja pesquisar.

Com essa fórmula em mente, vamos ver como funciona a função de pesquisa em nosso próprio aplicativo.

Usando a propriedade Items em Gallery2, vamos usar a função de pesquisa na barra de fórmulas e referenciar Table1, pois essa é nossa principal fonte de dados.

Para a string de pesquisa real, vamos pesquisar o nome Elton.

Então, vamos fazer a busca na coluna FirstName.

Depois de pressionar Enter, ele nos dá uma correspondência que corresponde aos parâmetros de pesquisa que usamos.

Se removermos o nome Elton da string de pesquisa, ela exibe automaticamente toda a galeria novamente.

Vamos tentar outra busca pelo nome Coralie.

Uma vez que pressionamos Enter, ele nos dá uma correspondência mais uma vez.

Obviamente, não esperamos que os usuários abram a galeria usando PowerApps. Isso significa que eles teriam que fazer a pesquisa em um campo de pesquisa e não na barra de fórmulas. É aí que entra a necessidade de criar nossa própria barra de pesquisa.

Criando um campo de pesquisa do PowerApps do zero

Vamos começar adicionando uma entrada de texto usando o botão Texto na faixa de opções Inserir.

Assim como qualquer outro elemento, podemos arrastar essa caixa de texto para qualquer lugar que quisermos. Por enquanto, vamos colocá-lo no lado direito do título da tela.

Como esta é apenas uma caixa de texto simples por enquanto, ela não será capaz de filtrar nada ainda, mesmo se digitarmos um nome. Para fazer isso, precisamos vincular a funcionalidade de pesquisa em nossa barra de fórmulas à caixa de texto real.

Isso significa que precisamos adicionar o elemento TextInput1 a essa fórmula.

Para isso, ao invés do espaço onde digitamos o termo de busca, vamos digitar TextInput1.Text. TextInput1 refere-se à caixa de texto enquanto o Text faz referência a tudo o que digitamos na caixa de texto.

Agora, vamos experimentar. Se digitarmos um termo de pesquisa aqui, você verá que uma correspondência aparece mesmo que tenhamos digitado apenas as primeiras letras.

Vamos tentar um nome diferente e procurar por Bruna. Novamente, isso nos mostra uma correspondência.

Desta vez, vamos tentar ver se conseguimos fazer uma busca pelo sobrenome. Vou digitar Lyles, que é o sobrenome da Bruna.

Como você pode ver, embora Bruna Lyles tenha aparecido quando usei o primeiro nome como termo de pesquisa, não apareceu nenhuma correspondência quando tentei digitar o sobrenome. Isso ocorre porque ainda não referenciamos outras colunas em nossa fórmula.

Adicionando colunas a um campo de pesquisa do PowerApps

Voltando à barra de fórmulas, vamos adicionar LastName. Isso nos permitirá fazer pesquisas usando dados na coluna LastName também.

Vamos também adicionar o AgentName. Em seguida, pressione Enter para finalizar essa fórmula.

Agora, finalmente encontramos uma correspondência se procurarmos o sobrenome, Lyles.

Adicionando um ícone de pesquisa funcional e ocultando a barra de pesquisa

Na maioria dos aplicativos, você não tem apenas uma barra de pesquisa. Você também vê um ícone de pesquisa. Então, vamos adicionar isso a esta tela.

Basta procurar Pesquisar no menu suspenso Ícones na faixa de opções Inserir.

Vamos movê-lo para o lado direito da barra de pesquisa.

Então, vamos mudar a cor para branco para que fique consistente com os outros elementos.

Agora que temos um ícone de pesquisa, o objetivo aqui é ocultar a barra de pesquisa e fazê-la aparecer apenas quando clicarmos no ícone de pesquisa.

Se clicarmos na barra de pesquisa e verificarmos o painel de propriedades à direita, mostra que a visibilidade está ativada.

Se verificarmos a propriedade de visibilidade no menu suspenso de propriedades, isso mostra que a visibilidade está definida como verdadeira.

Se definirmos como falso, a caixa de texto desaparece. Isso é o que queremos que aconteça.

Não se preocupe em referenciar a caixa de texto quando ela não estiver mais visível. Ainda podemos fazer referência a isso clicando no nome do elemento na lista do painel esquerdo.

É agora que as variáveis ​​entram em jogo. Discutimos o uso de variáveis ​​no PowerApps em outro tutorial.

Como queremos que algo aconteça sempre que clicarmos no ícone de pesquisa; vamos usar OnSelect.

Vamos usar uma variável chamada UpdateContext.

Para usar UpdateContext, precisaremos de um dicionário de variáveis ​​entre colchetes. Vamos usar SearchVisible e definir isso como true.

Agora que temos a variável no lugar, vamos vincular a propriedade de visibilidade de nossa caixa de texto à variável real. Basta clicar em TextInput1 e definir a visibilidade como SearchVisible.

Uma vez vinculada a variável ao elemento caixa de texto, a caixa de pesquisa só aparecerá quando clicarmos no ícone.

Com nossa configuração atual, a caixa de texto permanece na tela mesmo depois de você ter feito sua pesquisa. Idealmente, queremos que isso desapareça quando não precisarmos mais dele.

Então voltaremos ao ícone e mudaremos a fórmula para OnSelect. Desta vez, queremos que a ação oposta aconteça quando clicarmos no ícone uma segunda vez.

Para definir uma ação oposta, tudo o que precisamos fazer é adicionar um ponto de exclamação. Como SearchVisible atualmente faz a caixa de texto aparecer,!SearchVisible fará com que a caixa de texto desapareça.

Agora, se clicarmos no ícone pela primeira vez, a caixa de pesquisa aparecerá. Isso significa que a propriedade de visibilidade está se tornando verdadeira.

Se clicarmos no ícone novamente, a visibilidade se torna falsa e a caixa de texto desaparece.

Adicionando uma dica à barra de pesquisa

Como definimos a barra de pesquisa para filtrar itens com base no nome, sobrenome ou nome do agente, seria bom adicionar uma dica para que os usuários saibam quais termos de pesquisa usar.

Para fazer isso, basta destacar a barra de pesquisa e ir para o painel direito. Em propriedades, vamos digitar “Pesquisar nome, sobrenome ou nome do agente”.

Agora, vemos essa dica na barra de pesquisa, facilitando a pesquisa dos usuários.

Essa dica também desaparece quando o usuário clica na barra de pesquisa e começa a digitar.

Introdução ao Power Apps: Definição, recursos, funções e importância
Ambientes do Power Apps: Configurando os elementos do aplicativo corretamente
Power Apps Canvas: Como criar um aplicativo do zero

Conclusão

O campo de pesquisa do PowerApps é definitivamente uma das coisas que você precisa adicionar ao seu aplicativo, especialmente se estiver trabalhando com uma grande quantidade de dados em sua galeria.

Lembre-se de que os aplicativos de maior sucesso priorizam a facilidade de uso e os controles intuitivos. Adicionar uma função de pesquisa definitivamente cobre esses requisitos.

Tudo de bom,

henrique