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: "
{ID: 2, Nome: "Lara Ribeiro Cardoso", Email: "
{ID: 3, Nome: "Rafael Costa Pinto", Email: "
{ID: 4, Nome: "André Fernandes Correia", Email: "
{ID: 5, Nome: "Isabel Azevedo Sousa", Email: "
)
|
Em seguida escreva este código em cada propriedade da galeria.
|
Wrap count: 1
Template size: 50
Width: 400
Height: 485
|
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: "
{ID: 2, Nome: "Lara Ribeiro Cardoso", Email: "
{ID: 3, Nome: "Rafael Costa Pinto", Email: "
{ID: 4, Nome: "André Fernandes Correia", Email: "
{ID: 5, Nome: "Isabel Azevedo Sousa", Email: "
),
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.
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 😊
