Dicas para Criar Ecrãs de Login em Power Apps

Tempo de leitura:

3–5 minutes

Neste artigo vou mostrar-te como podes validar dados em Power Apps quando estás a criar uma aplicação!

Um cenário habitual para este exemplo é surge quando pretendes criar um ecrã de Login de utilizador, em que é necessário validar o nome do utilizador e a password por exemplo.

Assim neste artigo vamos ver funções que permitem executar esta validação tais como:

  • Função IsMatch para comparar um valor com outro ou uma expressão regular (Regex)
  • Funções If e IsBlank para verificar condições
  • Funções LookUp e Patch para verificar os dados numa base de dados de utilizadores e registar novos utilizadores!

Vamos a isso?

Começamos com um ecrã já configurado com alguns controlos para definir a interface do mesmo.

No cenário tenho também uma base de dados que é uma lista de Sharepoint onde estão armazenados os dados dos utilizadores, mas podes utilizar uma tabela de Excel ou outra base de dados.

Personalizar o Botão de Login

Para personalizar o botão de Login vamos começar por definir o seu estado! O Botão deve estar ativo para fazer o login de utilizador apenas se algumas condições forem verificadas, nomeadamente:

  1. O campo de e-mail corresponder a um padrão de uma expressão regular válida para e-mail.
  2. O campo de e-mail já existir na base de dados de utilizadores
  3. O campo da password corresponder a um padrão de uma expressão regular válida para password com determinadas características, como por exemplo, mínimo de 8 caracteres, um número e um caractere especial.
  4. O campo da password já existir na base de dados de utilizadores, associado a um utilizador.

Para colocarmos estas validações vamos aceder à propriedade DisplayMode do botão:

If(
 IsMatch(
  txt_Email.Value;Match.Email;MatchOptions.Complete)
  &&
  txt_Email.Value=LookUp(UserLogin;'e-mail'=txt_Email.Value).'e-mail'
  &&IsMatch(txt_Pass.Value;"^(?=.*\d)(?=.*[^\w\s]).{8,}$";MatchOptions.Complete)
  &&txt_Pass.Value=LookUp(UserLogin;'e-mail'=txt_Email.Value).Password;
 DisplayMode.Edit;
 DisplayMode.Disabled
)

De seguida o Botão Login deve permitir navegar para o ecrã inicial da aplicação. Na propriedade OnSelect definimos a navegação

Navigate(HOME)

Validar a Password colocada

Para validarmos a password colocada, devemos compará-la com uma expressão regular, mas vamos colocar também a mensagem de aviso, no caso de a password não estar validada. Assim a mensagem de aviso deve estar oculta, e apenas ser mostrada caso 2 condições sejam validadas:

  1. A password não corresponder à expressão regular
  2. O campo da password não estar em branco

Repara que reforço aqui a palavra não, ou seja, o oposto de…

Na propriedade Visible do controlo da mensagem aplicamos o código.

!IsMatch(
    txt_Pass.Value;"^(?=.*\d)(?=.*[^\w\s]).{8,}$";MatchOptions.Complete) 
    && !IsBlank(txt_Pass.Value)

Em vez do caracter “!” podes usar a função Not()

Visualizar a Password

Para alterar a visualização da password colocada, vamos aceder ao ícone e à propriedade OnSelect. Uma técnica boa para habilitar / validar a visualização da password é definir uma variável do tipo Booleano (True / False) que ativa e desativa a visualização.

Colocamos o seguinte código que define a variável na propriedade OnSelect.

Set(var_password;!var_password)

Repara que aqui temos novamente o caracter “!” para inverter a variável.

A seguir acedemos à propriedade Type do controlo da caixa de texto. Aqui colocamos o seguinte código que altera o tipo de visualização do texto.

If(
 var_password; 
 'TextInputCanvas.Type'.Text; 
 'TextInputCanvas.Type'.Password)

Configurar o Botão Registar

Para configurar o botão Registar devemos proceder de modo semelhante ao Botão Login. Alteramos o estado de visualização do mesmo. Assim o Botão deve estar ativo apenas se algumas condições forem validadas. Assim o botão deve estar desabilitado se:

  1. Algum dos controlos de introdução de dados estiver em Branco
  2. O Botão de Login estiver em modo editável
  3. A mensagem de aviso da password estar visível

O código será então o seguinte para a propriedade DisplayMode do Botão.

If(
  IsBlank(txt_Email.Value)||
  IsBlank(txt_Pass.Value)||
  IsBlank(txt_Nome.Value) ||
  btn_Login.DisplayMode=DisplayMode.Edit ||
  lbl_mensagem.Visible= true;
 DisplayMode.Disabled;
 DisplayMode.Edit
)

Registar um novo utilizador na base de dados

O botão Registar quando ativo vai então permitir registar um novo utilizador.

Para registar um novo utilizador usamos a função Patch na propriedade OnSelect. Vamos também usar a função Notify para mostrar uma mensagem de notificação ao utilizador.

Patch(
 UserLogin;
  Defaults(UserLogin);
   {
    Título:txt_Nome.Value;
    'e-mail':txt_Email.Value;
    Password:txt_Pass.Value
   }
);;
Notify(
  "Registo Efetuado!";
   NotificationType.Success;
   3000
)

Ocultar os comandos do Nome de Utilizador

Para terminar a lógica, podemos ocultar os comandos do nome do utilizador, pois só faz sentido estarem visíveis quando realizamos um novo registo. Assim alteramos a propriedade Visible destes 2 controlos em função do estado do botão de Login.

btn_Login.DisplayMode = DisplayMode.Disabled

E desta forma podes criar facilmente um ecrã de validação de utilizador onde podes ter os dados numa base de dados em Excel, SharePoint ou Dataverse para validar registos e/ou criar.

Próximo artigo:

Artigo Anterior:


Comments

Leave a Reply

Discover more from Exceldriven

Subscribe now to keep reading and get access to the full archive.

Continue reading