Laboratório prático 4 – Criar a interface do usuário

Neste laboratório, você alterará as cores dos controles no aplicativo.

O que você aprenderá

  • Como usar temas
  • Como personalizar seu aplicativo

Macroetapas do laboratório

  • Selecione um tema
  • Personalização

Pré-requisitos

  • Precisa ter concluído o Laboratório 3: Criar um aplicativo de tela

Etapas detalhadas

Exercício 1 – Tema

Tarefa 1.1 – Editar o aplicativo

  1. Navegue até o portal do Power Apps Maker https://make.powerapps.com.

  2. Certifique-se de que você esteja no ambiente Dev One.

  3. Selecione a guia Aplicativos no menu esquerdo.

  4. Escolha o aplicativo Solicitação de Reserva, selecione os Comandos (…) e escolha Editar > Editar em uma nova guia.

Tarefa 1.2 – Selecionar um tema

  1. Na barra de ações do Power Apps Studio, selecione Tema.

    Captura de tela da seleção de temas.

  2. Selecione o tema Vermelho.

Tarefa 1.3 – Controles de marca

  1. No menu de criação do aplicativo, selecione o Modo de exibição de árvore.

  2. Expanda a galeria BookingRequestList.

  3. Selecione NextArrow2.

  4. Defina a propriedade Color da NextArrow na barra de fórmulas como:

     RGBA(164, 38, 44, 1)

  5. Selecione Body1.

  6. Defina a propriedade Color do corpo na barra de fórmulas como:

     If(ThisItem.Cost > 1000, RGBA(164, 38, 44, 1), Color.Black)

  7. Selecione Salvar no canto superior direito do Power Apps Studio.

Exercício 2 – Personalização

Tarefa 2.1 – Adicionar rótulo de usuário

  1. Selecione fora da galeria na tela em branco ou selecione MainScreen.

  2. No menu de criação do aplicativo, selecione Inserir (+).

  3. Selecione Rótulo de texto.

  4. Arraste o rótulo para o canto superior direito da tela.

  5. No menu de criação do aplicativo, selecione o Modo de exibição de árvore.

  6. Renomeie o rótulo como UserLabel.

  7. Defina as propriedades do rótulo na barra de fórmulas da seguinte maneira:

    1. X=1100
    2. Y=20
    3. Altura=40
    4. Largura=250
    5. Alinhamento=Align.Right
    6. Tamanho=18
    7. PaddingRight=10
    8. Cor=Color.White
    9. Texto=User().FullName

    Captura de tela da tela principal com personalização.

  8. Selecione Salvar no canto superior direito do Power Apps Studio.

  9. Selecione o botão <- Voltar no canto superior esquerdo da barra de comandos e selecione Sair para sair do aplicativo.