Skip to main content
24 julho 2023
Follow Us

People picker – Venha aprender a construir um people picker personalizado

People Picker

É utilizado muitas vezes para selecionar uma ou mais pessoas de uma lista. Basta pesquisar pelo campo, como por exemplo nome, e-mail, empresa e etc, e será automaticamente encontrado.

O power apps permite utilizar este a partir de uma template no separador ‘New Screens > Templates’ ou também com um componente do creator kit ‘PeoplePicker control reference (preview) - Power Platform | Microsoft Learn’, no entanto ambas as opções são restritas e pouco personalizáveis. Por isso neste artigo iremos fazer de forma fácil e personalizável um people picker para usar dentro das apps.

1 - Contruir Galeria dos utilizadores: Tabela com dados dos utilizadores

Inicialmente criámos uma galeria GalListaUtilizadores com os dados necessários do utilizador. Esta galeria permitirá listá-los.

Escreva este código na propriedade Items da galeria.

 

Table(
    {ID: 1, Nome: "Rodrigo Sousa Gomes", Email: "Este endereço de email está protegido contra piratas. Necessita ter o JavaScript autorizado para o visualizar."},
    {ID: 2, Nome: "Lara Ribeiro Cardoso", Email: "Este endereço de email está protegido contra piratas. Necessita ter o JavaScript autorizado para o visualizar."},
    {ID: 3, Nome: "Rafael Costa Pinto", Email: "Este endereço de email está protegido contra piratas. Necessita ter o JavaScript autorizado para o visualizar."},
    {ID: 4, Nome: "André Fernandes Correia", Email: "Este endereço de email está protegido contra piratas. Necessita ter o JavaScript autorizado para o visualizar."},
    {ID: 5, Nome: "Isabel Azevedo Sousa", Email: "Este endereço de email está protegido contra piratas. Necessita ter o JavaScript autorizado para o visualizar."}
)

 

Em seguida escreva este código em cada propriedade da galeria.

Wrap count: 1
Template size: 50
Width: 400
Height: 485

 

galeriaResultado.png

 

Para ver as iniciais do nome insira botão btnIniciaisUsers dentro da galeria e em seguida escreva este código em cada propriedade do botão para obter o mesmo estilo mostrado na imagem acima. 

Text: Left(ThisItem.Nome, 1) & Mid(ThisItem.Nome, Find(" ", ThisItem.Nome) + 1, 1)
DisplayMode: DisplayMode.View
X: 12
Y: 5
Height e Width: 40
Color: RGBA(255, 255, 255, 1)
Fill: RGBA(73, 130, 5, 1)
Size: 11
Border radius: 20
BorderColor: RGBA(219, 219, 219, 1)

Em seguida insira um label para apresentar o nome do utilizador lblNomeUsers e escreva o seguinte código em cada propriedade da label.

Text: ThisItem.Nome
X: btnIniciaisUsers.X + btnIniciaisUsers.Height + 10
Y: btnIniciaisUsers.Y
Width: Parent.TemplateWidth - 173
Height: btnIniciaisUsers.Height
PaddingTop: 8
Color: RGBA(53, 53, 53, 1)
Size: 14

 

2 - Integração da caixa de texto para permitir pesquisa

Parte importante deste people picker é a procura do utilizador pelo campo definido (neste caso iremos permitir a pesquisa por nome e email). Para essa pesquisa é necessário inserir um Text input txtPesquisacom as seguintes propriedades...

Format: TextFormat.Text
HintText: Pesquisar…
X: GalListaUtilizadores.X
Y: GalListaUtilizadores.Y - Self.Height
Width: GalListaUtilizadores.Width
Height: 40
PaddingTop: 5
PaddingBottom: 5
PaddingLeft: 12
PaddingRight: 5
BorderThickness: 1
BorderColor: GalListaUtilizadores.BorderColor
Size: 12

 

Para a pesquisa acontecer dentro da galeria é necessário alterar a propriedade Items da galeria GalListaUtilizadores para incluir a pesquisa função ‘Search()’.

Search(
    //Source criada inicialmente
    Table(
        {ID: 1, Nome: "Rodrigo Sousa Gomes", Email: "Este endereço de email está protegido contra piratas. Necessita ter o JavaScript autorizado para o visualizar."},
        {ID: 2, Nome: "Lara Ribeiro Cardoso", Email: "Este endereço de email está protegido contra piratas. Necessita ter o JavaScript autorizado para o visualizar."},
        {ID: 3, Nome: "Rafael Costa Pinto", Email: "Este endereço de email está protegido contra piratas. Necessita ter o JavaScript autorizado para o visualizar."},
        {ID: 4, Nome: "André Fernandes Correia", Email: "Este endereço de email está protegido contra piratas. Necessita ter o JavaScript autorizado para o visualizar."},
        {ID: 5, Nome: "Isabel Azevedo Sousa", Email: "Este endereço de email está protegido contra piratas. Necessita ter o JavaScript autorizado para o visualizar."}
    ),
    txtPesquisa.Text,                       //Texto das pesquisa que vai filtrar a galeria
    "Nome", "Email"                        //Nome das colunas que queremos filtrar
)

 

Estamos quase a terminar o nosso people picker!! Apenas vamos guardar quem selecionamos e criar uma galeria para permitir ver os utilizadores selecionados.

3 - Coleção com os utilizadores selecionados

Então inicialmente vamos criar a coleção que permite guardar os dados de quem carregamos. Na propriedade OnSearch da GalListaUtilizadores escrevemos o seguinte código:

//Coleção para os Utilizadores selecionados
Collect(
    colUtilizadoresSelecionados,
    {
        IDUserSelecionado: ThisItem.ID,
        NomeUserSelecionado: ThisItem.Nome,
        EmailUserSelecionado: ThisItem.Email
    }
)

 

Para melhorar um pouco a perceção de quem está selecionado e evitar duplicações de utilizadores selecionados, adicionamos um botão btnFillUserSelecionado na GalListaUtilizadores. Para esse botão basta incluir as seguintes propriedades:

DisplayMode:
//Se o item da galeria está coluna da coleção (ID da galeria é igual ao ID da coleção)
//Não deixa permite clicar no mesmo utilizador
If(ThisItem.ID in colUtilizadoresSelecionados.IDUserSelecionado, DisplayMode.Disabled, DisplayMode.Edit)
 
X e Y : 0
Width: Parent.TemplateWidth
Height: Parent.TemplateHeight
Fill: RGBA(0, 0, 0, 0)
DisabledFill: RGBA(219, 219, 219, 0.5)
HoverFill: RGBA(187, 221, 140, 0.3)

 

4 - Contruir Galeria dos utilizadores selecionados: Coleção com os utilizadores selecionados

Agora é hora de permitir remover os utilizadores, para isso criamos uma galeria galListaUsersSelecionados e na propriedade Items colocamos a coleção colUtilizadoresSelecionados. E nas propriedades, as seguintes características:

X: txtPesquisa.X
Y: txtPesquisa.Y - Self.Height
Width: txtPesquisa.Width
Height: 100
WrapCount: 2
DisabledFill: RGBA(219, 219, 219, 0.5)
HoverFill: RGBA(187, 221, 140, 0.3)

 

Para finalizar o people picker e estar pronto para as futuras aplicações, vamos personalizar a ‘galListaUsersSelecionados’ como na imagem a baixo.

 FinalPP.png

 

Inserimos um botão desativado btnFundoUserSelecionado para o fundo do item selecionado…

X e Y: 5
Width: txtPesquisa.Width
Height: 100
DisplayMode: DisplayMode.Disabled
DisabledFill: RGBA(219, 230, 205, 1)

 

Outro botão btnIniciaisUserSelecionado para as iniciais do utilizador…

X: btnFundoUserSelecionado.X
Y: btnFundoUserSelecionado.Y
Width e Height: btnFundoUserSelecionado.Height
DisplayMode: DisplayMode.Disabled
DisabledFill: RGBA(66, 117, 5, 1)
Text:
//Vai buscar as iniciais dos nomes
Left(ThisItem.NomeUserSelecionado, 1) &
Mid(ThisItem.NomeUserSelecionado, Find(" ", ThisItem.NomeUserSelecionado) + 1, 1)

 

Uma label para apresentar o nome do utilizador com a propriedade Text : ThisItem.NomeUserSelecionado

E por fim a possibilidade de remover o utilizador através de um icon icoRemoverUserSelecionado com as seguintes características: 

OnSelect:
//Remover o item da coleção
Remove(colUtilizadoresSelecionados,
LookUp(colUtilizadoresSelecionados, IDUserSelecionado=galListaUsersSelecionados.Selected.IDUserSelecionado))
X: btnFundoUserSelecionado.Width - Self.Height
Y: 13
Width: btnFundoUserSelecionado.Height / 2
Height: btnFundoUserSelecionado.Height / 2

 

Obrigada pela leitura e espero que gostem. See you soon ????

 

 


Assine a nossa newsletter e receba o nosso conteúdo diretamente no seu email