Usar um controle para modificar a propriedade de outros controles

  • 6 minutos

Ao trabalhar com controles, você pode modificar a maneira como um determinado controle funciona com base nas propriedades de outro controle. Essa funcionalidade permite que os usuários vejam as alterações na experiência com base nas entradas.

Por exemplo, seu aplicativo pode ter um menu suspenso que permite ao usuário escolher um tamanho de fonte pequeno, médio ou grande. Com base nessa configuração, o aplicativo poderia alterar dinamicamente o tamanho da fonte em todo o aplicativo.

Captura de tela de um menu suspenso mostrando tamanho pequeno e um rótulo de texto mostrando a fonte em tamanho 8.

Captura de tela do mesmo menu suspenso mostrando tamanho grande e o mesmo rótulo de texto mostrando o tamanho de fonte 24.

Você também poderia aplicar lógica semelhante para as cores de fonte, cores de preenchimento, locais dos controles ou para mostrar ou ocultar os controles com base nas seleções do usuário. Por exemplo, se um usuário marcar uma caixa de seleção para "Você é um cliente novo?", os campos para inserir um novo cliente serão exibidos na tela.

Captura de tela de uma caixa de seleção perguntando:

Captura de tela de uma caixa de seleção perguntando:

Usar entradas para ajustar as posições de um controle

Vamos usar o exemplo a seguir para entender o posicionamento de controles na tela e como usar a entrada do usuário para modificá-lo. Assim como na introdução, o local de um controle na tela se baseia em uma combinação de duas propriedades: X e Y.

  • X: distância entre a borda esquerda de um controle e a borda esquerda da tela.

  • Y: distância entre a borda superior de um controle e a borda superior da tela.

As propriedades X e Y se aplicam a todos os controles, exceto às telas. Agora vá para seu aplicativo e vamos aprender pela prática.

  1. Primeiro, vamos criar uma nova tela para seu aplicativo selecionando + Nova tela no painel Exibição de árvore e, em seguida, selecione Em branco.

  2. Em seguida, insira um controle suspenso. Selecione o botão + Inserir, digite drop no campo de pesquisa e selecione Lista suspensa.

  3. Altere a propriedade Items na lista suspensa de DropDownSample para o seguinte:

    Table({Position:"Top"},{Position:"Middle"},{Position:"Bottom"})

    Isso cria uma tabela de registros com uma única coluna chamada Posição com três registros chamados Parte superior, Parte inferior e Meio. Se você selecionar seu controle dropdown enquanto segura a tecla Alt, verá os valores exibidos.

    Captura de tela do controle suspenso mostrando os valores Superior, Meio e Inferior.

  4. Em seguida, adicionaremos um controle que pode ser reposicionado dinamicamente na tela. Mais uma vez, selecione + Inserir na faixa de opções, insira avião no campo de pesquisa e selecione o ícone avião. Arraste o ícone avião até o meio da tela.

  5. Agora, vamos fazer o ícone avião aparecer em alturas diferentes na tela com base no nosso controle dropdown. Para isso, selecione o ícone do avião e encontre a propriedade Y. Observe que ele tem, atualmente, um valor de número estático. Altere o valor da propriedade Y para o seguinte:

    Switch(Dropdown1.SelectedText.Value,"Top",0,"Middle",Screen1.Height/2,"Bottom",Screen1.Height/1-Self.Height)

    Observação

    Seu controle dropdown pode ter um nome diferente de Dropdown1. Certifique-se de substituir Dropdown1 pelo nome específico do seu controle.

    Captura de tela da propriedade Y no Power Apps.

  6. Para ter um pouco de diversão (e testar sua fórmula), coloque seu aplicativo no modo de versão preliminar. Agora, selecione cada posição no menu suspenso. Observe que o ícone avião ajusta sua "altitude" (ou coordenada Y) conforme você altera o valor da lista suspensa.

Explicação

Conseguimos realizar o movimento de nosso ícone de avião, pois a propriedade Y é apenas um valor numérico. Porém, nem todos os números funcionariam, então, tivemos que fornecer números que mostrassem o ícone na tela.

Usamos uma função Switch com base no valor de posição do controle suspenso, atribuindo um valor diferente a Y com base na entrada do usuário. Zero está na parte superior e toda a altura da tela está na parte inferior. Usamos a propriedade Height do controle de tela para contabilizar qualquer plataforma que usa esse aplicativo.

Também usamos a propriedade Height do ícone do avião (Self.Height) para o valor "Bottom" para que pudéssemos ver o ícone do avião na parte inferior da tela, caso contrário, ele estaria fora da tela visível.

Você pode alterar as propriedades em seus controles para modificar o comportamento de outros controles. Isso oferece uma ótima maneira de moldar a experiência do usuário. Mantenha aberto seu aplicativo de prática e, no próximo módulo, aprenderemos como aprimorar ainda mais seu aplicativo aplicando formatação condicional.