Skip to main content

#powerapps

If you've gone through the process of designing your conceptual data model and developing your controlled list of terms, it's important to document the terminology and data standards you've established for the purposes of managing your information. In this article, we'll introduce you to what a data dictionary is and why it's important for the long-term integrity of your database.

Our intention with this article is to introduce you to a way of thinking about documenting the logic behind the decisions you've made about the design of your database. Although it may seem like a tedious step to document all the terminology and data patterns you've chosen, it will ultimately be useful for future users of your database and the solutions that come from it.

I was motivated to write about this topic because this week we've been working on a consultancy project in which we've migrated data from SharePoint to Dataverse. This obviously has a number of implications, as we needed to switch all the data sources from various apps, flows and reports to Dataverse. In terms of organisation and time optimisation, we created a data dictionary to help us with this solution and implementation. So I'd like to share some tips on how to make an efficient data dictionary.

What’s Dataverse?

Data is at the centre of everything a company does today and fuels the ideas that can drive what it should do tomorrow. To thrive and grow, companies need to collect, analyse, predict, present and report data and do it all with a high level of agility.

Building the data infrastructure to enable business insight can be time-consuming and costly. Data originates from a variety of devices, applications, systems, services and software as a service (SaaS). This large and growing number of sources often consists of multiple data technologies that store different types of data, expose different APIs, and use a mixture of security models. The programmers needed to create these technologies can be expensive and difficult to find. Programmers must often have an in-depth understanding of how to implement, configure, manage, and integrate these different data technologies.

Dataverse addresses these concerns with an easy-to-use, easy-to-manage, compliant, secure, scalable, and globally available SaaS data service. Dataverse empowers organisations to work with any type of data and any type of application and use the data within it to gain insights and drive business action.

As part of the Microsoft Power Platform, Dataverse has three main centres of focus:

  1. Availability and Scalability
  2. Security
  3. Compliance

These were the points that made us migrate from SharePoint to Dataverse. The main reason being security, as Dataverse uses Azure Active Directory identity and access management mechanisms to help ensure that only authorised users can access the environment, data, and reports. And that makes all the difference!

Dataverse uses role-based security to group together a collection of privileges. These security roles can be associated directly with users, or they can be associated with Dataverse teams and business units.

Another very important reason that motivated us to switch was the delegation limits that SharePoint has when it comes to applications. This problem prevents us from filtering and sorting tables with more than 2000 rows.

1.png

What’s a data dictionary?

A data dictionary is:

  • A way of organising
  • Detailing what data, we have
  • What they mean and what type they’re

It’s essentially a rule book:

  • what data to include in your database,
  • how it should be structured,
  • how it should be entered, and
  • how it should be accessed

This dictionary will be a repository of names, definitions and attributes that provide contextual information about the data in your database. The dictionary describes each database field with a clear definition of what information is captured in that field and the rules for using that field.

When you start to develop your data dictionary and determine the elements you should include, it's important to consider what would be important for someone unfamiliar with your database to know about the data held within. It should be the ideal tool for anyone to understand everything about your dataset.

A data dictionary is fundamental to the sustainability of any database, especially when it is used by several people, as is our case here at Portal Gestão. You may know how to read and interpret your data. However, if you left your organisation tomorrow, would someone else know how to access, read, and interpret the data you do? Your data dictionary will ensure that, no matter what happens, there is documentation that will explain everything anyone needs to know about your database.

How to create a data dictionary?

It can be done in various ways. But the way I'm going to show you today’s in good old Excel.

To create a data dictionary, it's important to first consider a few questions:

  1. What does each element in your data represent? What is it describing?
  2. What tables and columns exist?
  3. What’s the path (URL, for example) to each of them?
  4. Which columns have unique values?
  5. Which columns have null values?
  6. What are the relationships between the tables? What are the primary keys?
  7. What values are allowed in each column?
  8. Is this data linked to any flow (Power Automate) that needs to be changed?

Examples:

Identification of tables

2.png

Column created:

  1. Table number
  2. Dataverse logical name
  3. Table
  4. Description
  5. SharePoint link
  6. Dataverse link
  7. Relationships
  8. Annotations

Flows created

3.png

  1. Flow number
  2. Flow name
  3. Link
  4. Flow objective

Environments in Power Apps

4.png

  1. Environmen
  2. Solution
  3. Link

Columns

5.png

  1. Table number
  2. Table name
  3. Column name
  4. Description
  5. Allowed values
  6. Alternate Key (used for data modelling)
  7. Do you allow unique values?
  8. Does it have null values?
  9. Choices (column in Dataverse)
  10. Table link
  11. Business rules
  12. Annotations
  13. Column name in SharePoint
  14. Logical column name in Dataverse (useful for programming in Power Apps and Power Automate)

 

6.png

Column to delete in Dataverse

7.png 

  1. Table number
  2. Table name
  3. Column
  4. Name of the column in the Dataverse schema
  5. Logical name of the column in Dataverse
  6. Reason for deletion

Relationship

8.png

  1. Table number 1
  2. Name of table 1
  3. Name of column 1
  4. Modelling of column 1
  5. Modelling column 2
  6. Name of column 2
  7. Name of table 2
  8. No. of table 2
  9. Relationship link in Dataverse
  10. URL of the model on the draw-io

 

We usually use the website https://app.diagrams.net/ to do the data modelling. In fact, in a normal app-building process, this is one of the first steps we take: defining the data modelling. This way, we have a clear idea of which tables we'll need, which columns, the types of relationships, the primary keys and the data types.

9.png

Final considerations

Cataloguing a company's tables and columns is not always an easy task, but when it is done, it becomes a great asset for any company.

With a view to:

  • Communication between employees entering and leaving companies,
  • Transparency in the meaning and terminology of different departments (integrated work between teams)
  • Data management and governance.

Keep your company's data dictionary up to date and you'll see the benefits.

See you in the next articles.

  • Imagem:

É muito fácil entrar na plataforma Power e começar a desenvolver aplicações e fluxos de automação, mesmo para quem não tem, como eu, formação técnica na área da programação de computadores. No primeiro dia, talvez em poucas horas, teremos desenvolvida uma app pronta a ser implementada e partilhada com os nossos colegas que simplificará o seu trabalho e que reduzirá custos a toda a empresa.

Se passou pelo processo de projetar o seu modelo de dados conceitual e desenvolver a sua lista controlada de termos, é importante documentar a terminologia e os padrões de dados que estabeleceu para fins de gestão das suas informações. Neste artigo, apresentaremos o que é um dicionário de dados e por que ele é importante para a integridade a longo prazo do seu banco de dados.

A nossa intenção com artigo é apresentá-lo a uma maneira de pensar sobre documentar a lógica subjacente às decisões que tomou sobre o design do seu banco de dados. Embora possa parecer um passo tedioso documentar toda a terminologia e padrões de dados que escolheu, em última análise, será útil para futuros utilizadores do seu banco de dados e soluções advindas desse.

A minha motivação para escrever sobre esse tema surgiu, pois, essa semana estivemos a trabalhar num projeto de consultoria em que fizemos a migração de dados do SharePoint para o Dataverse. Isso, obviamente, tem uma série de implicações, pois precisávamos trocar todas as origens de dados de várias apps, flows e relatórios para o Dataverse. A nível de organização e otimização de tempo, criamos um dicionário de dados para nos ajudar nessa solução e implementação. Por isso, gostava de partilhar algumas dicas de como fazer um dicionário de dados eficiente.

O que é o Dataverse?

Os dados estão no centro de tudo o que uma empresa faz hoje e alimenta as ideias que podem conduzir o que deve fazer amanhã. Para prosperar e crescer, as empresas precisam de recolher, analisar, prever, apresentar e reportar dados e fazer tudo com um alto nível de agilidade.

A construção da infraestrutura de dados para permitir a visão do negócio pode ser morosa e dispendiosa. Os dados são originários de uma variedade de dispositivos, aplicações, sistemas, serviços e software como um serviço (SaaS). Este grande e crescente número de fontes consiste frequentemente em múltiplas tecnologias de dados que armazenam diferentes tipos de dados, expõem diferentes APIs e usam uma mistura de modelos de segurança. Os programadores necessários para criar estas tecnologias podem ser caros e difíceis de encontrar. Os programadores devem ter, muitas vezes, uma compreensão profunda de como implementar, configurar, gerir e integrar estas diferentes tecnologias de dados.

O Dataverse aborda estas preocupações com um serviço de dados SaaS fácil de usar, fácil de gerir, conforme, seguro, escalável e globalmente disponível. O Dataverse capacita as organizações a trabalhar com qualquer tipo de dados e qualquer tipo de aplicação, e usar os dados dentro dela para obter insights e impulsionar a ação empresarial.

Como parte da Microsoft Power Platform, o Dataverse tem três grandes centros de destaques:

  1. Disponibilidade e Escalabilidade
  2. Segurança
  3. Conformidade

Pontos esses que nos fizeram migrar do SharePoint para o DV. Sendo a segurança o principal motivo, pois o Dataverse utiliza mecanismos de gestão de identidade e acesso de Azure Active Directory para ajudar a garantir que apenas os utilizadores autorizados possam aceder ao ambiente, dados e relatórios. E isso faz toda a diferença!

O Dataverse utiliza a segurança baseada em funções para agrupar uma coleção de privilégios. Estas funções de segurança podem ser associadas diretamente aos utilizadores, ou podem ser associadas a equipas Dataverse e unidades de negócio.

Outro motivo de bastante relevância que nos motivou a trocar foram os limites de delegação que o SharePoint possui quando se trata de aplicações. Problema esse que nos impede de fazer filtros e ordenações em tabelas com mais de 2000 linhas.

1.png

O que é um dicionário de dados?

Dicionário de dados é:

  • Uma forma de se organizar
  • De detalhar quais são os dados que temos
  • O que eles significam e de que tipo são

Ele é, essencialmente, um livro de regras

  • quais dados incluir em seu banco de dados,
  • como deve ser estruturado,
  • como ele deve ser inserido, e
  • como deve ser acedido

Este dicionário será um repositório de nomes, definições e atributos que fornecem informações contextuais sobre os dados no seu banco de dados. O dicionário descreve cada campo de banco de dados com uma definição clara de quais informações são capturadas nesse campo e as regras para utilizar esse campo.

Quando começar a desenvolver o seu dicionário de dados e determinar os elementos que deve incluir, é importante considerar o que seria importante para alguém que não está familiarizado com o seu banco de dados saber sobre os dados mantidos dentro. Ele deve ser a ferramenta ideal para qualquer pessoa entender tudo sobre o seu conjunto de dados.

Um dicionário de dados é fundamental para a sustentabilidade de qualquer banco de dados, especialmente quando é usado por várias pessoas, como é o nosso caso aqui na Portal Gestão. Talvez saiba ler e interpretar os seus dados. No entanto, se deixasse a sua organização amanhã, outra pessoa saberia aceder, ler e interpretar os dados que faz? O seu dicionário de dados garantirá que, não importa o que aconteça, exista documentação que explicará tudo o que alguém precisa saber sobre o seu banco de dados.

Como criar um dicionário de dados?

Pode ser feito de diversas formas. Mas a forma que vou mostrar hoje é no bom e velho Excel.

Para criar um dicionário de dados, é importante primeiro considerar algumas perguntas:

  1. O que cada elemento nos seus dados representa? O que está a descrever?
  2. Quais são as tabelas e colunas existentes?
  3. Qual o caminho (URL, por exemplo) de cada uma delas
  4. Quais são as colunas com valores exclusivos?
  5. Quais são as colunas com valores nulos?
  6. Quais são os relacionamentos entre as tabelas? Quais são as chaves primárias?
  7. Quais os valores permitidos em cada coluna
  8. Esses dados estão ligados com algum flow (Power Automate) que precisará de ser alterado ?

Exemplos:

Identificação das tabelas

2.png

Coluna criadas:

  1. No tabela
  2. Nome lógico Dataverse
  3. Tabela
  4. Descrição
  5. Link SharePoint
  6. Link Dataverse
  7. Relacionamentos
  8. Anotações

Flows Utilizados

3.png

  1. Nº flow
  2. Nome do flow
  3. Link
  4. Objetivo do flow

Ambientes no Power Apps

4.png

  1. Ambiente
  2. Solução
  3. Link

Colunas

5.png

  1. Nº da tabela
  2. Nome da tabela
  3. Nome da coluna
  4. Descrição
  5. Valores permitidos
  6. Alternate Key (usado para a modelagem dos dados)
  7. Permite valores exclusivos?
  8. Possui valores nulos?
  9. Choices (coluna no DV)
  10. Link da tabela
  11. Regras de negócios
  12. Anotações
  13. Nome da coluna no SharePoint
  14. Nome lógico da coluna no Dataverse (útil para fazer a programação no Power Apps e no Power Automate)

6.png

Coluna a apagar no Dataverse

7.png 

  1. Nº da tabela
  2. Nome da tabela
  3. Coluna
  4. Nome da coluna no esquema do Dataverse
  5. Nome lógico da coluna no Dataverse
  6. Motivo para apagar

Relacionamentos

8.png

  1. Nº da tabela 1
  2. Nome da tabela 1
  3. Nome da coluna 1
  4. Modelagem da coluna 1
  5. Modelagem da coluna 2
  6. Nome da coluna 2
  7. Nome da tabela 2
  8. Nº da tabela 2
  9. Link do relacionamento no Dataverse
  10. URL do modelo no site draw-io

Costumamos utilizar o site https://app.diagrams.net/ para fazer a modelagem dos dados. Aliás, num processo normal de construção de apps, esse é um dos primeiros passos que utilizamos: definir a modelagem dos dados. Dessa forma, temos de forma clara, quais são as tabelas que vamos precisar, quais as colunas, os tipos de relacionamentos, as chaves primárias e os tipos dos dados.

9.png

Considerações finais

Catalogar as tabelas e colunas de uma empresa nem sempre é tarefa fácil, no entanto, quando feita, torna-se uma grande mais-valia para qualquer empresa.

Tendo em vista:

  • a comunicação entre colaboradores que entram e saem das empresas,
  • a transparência no significado e terminologias de diferentes departamentos (trabalho integrado entre equipas)
  • gestão dos dados e a sua governança.

Mantenha o dicionário de dados da sua empresa sempre atualizado e verá os benefícios disso.

Vemo-nos nos próximos artigos.

  • Imagem:

Contexto

A gestão e coordenação da formação em qualquer entidade formadora é verdadeiramente exigente e morosa, envolvendo desde o registo do formando e a associação do mesmo a uma ação de formação, até à emissão e envio do certificado SIGO. A maioria das entidades realiza estas tarefas de forma manual em papel ou através de folhas de cálculo no Excel. Numa lógica de otimização da forma de trabalho e da redução do tempo investido nestas tarefas no dia-a-dia da Portal Gestão, recorremos a uma aplicação desenvolvida internamente e que agora disponibilizamos para todas as entidades formadoras interessadas em evoluir a sua transformação digital: A Training App!

  • Imagem:

The development of low-code or no-code applications is an increasingly valuable solution for both developers and individual or organizational users. At this moment, there wouldn't be the capacity to respond to the volume of ongoing process automation and digital transformation projects. So far, companies have successfully replaced emails and standalone spreadsheets with apps that ensure integrity, functionality, design, traceability, and secure data access.

The time has come to adopt the same approach in the development of machine learning and deep learning models, which are typically challenging to develop and operationalize. In this article, we will demonstrate how to train a predictive model capable of distinguishing between good and poor-quality oranges. Additionally, we'll develop a mobile application that uses this model through the camera to classify oranges displayed in a supermarket.

  • Imagem:

O desenvolvimento de aplicações low-code ou no-code é uma solução cada vez mais valiosa, quer para desenvolvedores quer para utilizadores individuais ou organizacionais. Não existiria neste momento capacidade de resposta ao volume de projetos de desenvolvimento de automação de processos e de transformação digital em curso. Até aqui, as empresas têm substituído com sucesso os e-mails e as folhas de cálculo avulso por apps que asseguram integridade, funcionalidade, design, rastreabilidade e segurança no acesso aos dados.
Chegou o momento de adotar a mesma abordagem no desenvolvimento de modelos de machine learning e deep learning, tipicamente difíceis de desenvolver e de operacionalizar.

Neste artigo, vamos demonstrar como treinar um modelo preditivo que seja capaz de distinguir laranjas de boa qualidade de laranjas de má qualidade. E como desenvolver uma aplicação móvel que através da câmara consiga utilizar esse modelo e classificar as laranjas expostas num supermercado.

  • Imagem:

Context

Managing and coordinating training operations is truly demanding and time-consuming, involving everything from the registration of the trainee and their association with a training action, to the issuance and sending of the SIGO certificate. Most entities perform these tasks manually on paper or through Excel spreadsheets. In a logic of optimizing the way of working and reducing the time invested in these tasks in the day-to-day of Portal Gestão, we used an application developed internally and which we now make available to all training entities interested in evolving their digital transformation: The Training App!

  • Imagem:

People Picker

It is often used to select one or more people from a list. Simply search for a field, such as name, e-mail address, company, etc., and you'll be automatically found.

Power Apps allows you to use this from a template in the 'New Screens > Templates' tab or also with a component from the 'PeoplePicker control reference (preview) - Power Platform | Microsoft Learn' creator kit, however both options are restricted and not very customisable. That's why in this article we'll make an easy and customisable people picker for use within apps.

1 - Build user gallery: Table with user data

Initially, we created a GalListUsers gallery with the necessary user data. This gallery will allow us to list them.

Write this code in the Itemsproperty of the gallery.

 

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

 

Then write this code in each gallery property.

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

 

galeriaResultado.png

 

To see the initials of the name insert the btnInitialsUsers button inside the gallery and then write this code in each property of the button to get the same style as shown in the image above.

Text: Left(ThisItem.Name, 1) & Mid(ThisItem.Name, Find(" ", ThisItem.Name) + 1, 1)
DisplayMode: DisplayMode.View
X: 12
Y: 5
Height and 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)

Then insert a label to display the user's name lblNameUsers and write the following code in each label property.

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

 

2 - Integration of the text box to allow searching

An important part of this people picker is the user's search for the defined field (in this case we'll allow searching by name and email). For this search you need to insert a Text Input txtSearch with the following properties...

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

 

For the search to take place within the gallery, you need to change the Items property of the GalListUsers gallery to include the 'Search()' function.

Search(
    //Source initially created
    Table(
        {ID: 1, Name: "Rodrigo Sousa Gomes", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript para o visualizar."},
        {ID: 2, Name: "Lara Ribeiro Cardoso", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript para o visualizar."},
        {ID: 3, Name: "Rafael Costa Pinto", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript para o visualizar."},
        {ID: 4, Name: "André Fernandes Correia", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript para o visualizar."},
        {ID: 5, Name: "Isabel Azevedo Sousa", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript para o visualizar."}
    ),
    txtSearch.Text,                       //Text of the search that will filter the gallery
    "Name", "Email"                        //Name of the columns we want to filter
)

 

We've almost finished our people picker! We're just going to save who we've selected and create a gallery to allow you to see the selected users.

3 - Collection with selected users

So first we're going to create the collection that allows us to store the data we've uploaded. In the OnSearch property of the GalListUsers we write the following code:

//Collection for selected users
Collect(
    colSelectedUsers,
    {
        IDSelectedUser: ThisItem.ID,
        NameSelectedUser: ThisItem.Name,
        EmailSelectedUser: ThisItem.Email
    }
)

 

To improve the perception of who is selected and to avoid duplicates of selected users, we have added a btnFillSelectedUser button to the GalListUsers. All you need to do for this button is include the following properties:

DisplayMode:
//If the gallery item is in the collection column (gallery ID equals collection ID)
//Can't click on the same user
If(ThisItem.ID in colSelectedUsers.IDSelectedUser, DisplayMode.Disabled, DisplayMode.Edit)
 
X and 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 - Build a gallery of selected users: Collection with selected users

Now it's time to allow users to be removed, so we've created a gallery galListSelectedUsers and in the Items property we've placed the collection colSelectedUsers. And in the properties, the following characteristics:

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

 

To finalise the people picker and make it ready for future applications, let's customise the galListSelectedUsers as shown in the image below.

 FinalPP.png

 

We've inserted a deactivated btnBackgroundSelectedUser button for the background of the selected item...

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

 

Other button btnInitialsSelectedUser for the user's initials…

X: btnBackgroundSelectedUser.X
Y: btnBackgroundSelectedUser.Y
Width and Height: btnBackgroundSelectedUser.Height
DisplayMode: DisplayMode.Disabled
DisabledFill: RGBA(66, 117, 5, 1)
Text:
//Get the initials of the names
Left(ThisItem.NameSelectedUser, 1) &
Mid(ThisItem.NameSelectedUser, Find(" ", ThisItem.NameSelectedUser) + 1, 1)

 

A label to display the user's name with the Text property : ThisItem.NameSelectedUser

And finally the possibility of removing the user via an icoRemoverSelectedUser icon with the following characteristics: 

OnSelect:
//Remove the item from the collection
Remove(colSelectedUsers,
LookUp(colSelectedUsers, IDSelectedUser=galListSelectedUsers.Selected.IDSelectedUser))
X: btnBackgroundSelectedUser.Width - Self.Height
Y: 13
Width: btnBackgroundSelectedUser.Height / 2
Height: btnBackgroundSelectedUser.Height / 2

 

Thanks for reading and I hope you enjoy it. See you soon 😊

 

 

  • Imagem:

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 ativar o JavaScript para o visualizar."},
    {ID: 2, Nome: "Lara Ribeiro Cardoso", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript para o visualizar."},
    {ID: 3, Nome: "Rafael Costa Pinto", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript para o visualizar."},
    {ID: 4, Nome: "André Fernandes Correia", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript para o visualizar."},
    {ID: 5, Nome: "Isabel Azevedo Sousa", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript 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 ativar o JavaScript para o visualizar."},
        {ID: 2, Nome: "Lara Ribeiro Cardoso", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript para o visualizar."},
        {ID: 3, Nome: "Rafael Costa Pinto", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript para o visualizar."},
        {ID: 4, Nome: "André Fernandes Correia", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript para o visualizar."},
        {ID: 5, Nome: "Isabel Azevedo Sousa", Email: "Este endereço de email está protegido contra piratas. Necessita ativar o JavaScript 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 😊

 

 

  • Imagem:

A escolha de um novo colaborador para ocupar uma determinada vaga de emprego é um momento crucial no departamento de recursos humanos de qualquer empresa, sendo fundamental que o processo de recrutamento e seleção seja executado de forma organizada, ágil, otimizada e com elevado nível de qualidade. Hoje, trago-vos uma aplicação empresarial que simplifica e automatiza este processo. Vejamos, ecrã a ecrã, o que permite fazer: