Exercício: usar páginas personalizadas com comandos

  • 15 minutos

Neste exercício, você adicionará um botão de barra de comandos que abre uma página personalizada em uma caixa de diálogo modal.

Importante

Use um ambiente de desenvolvedor ou de teste com o Microsoft Dataverse provisionado e os aplicativos de exemplo habilitados. Se você não tiver um, poderá se inscrever no plano da comunidade.

Tarefa: criar página personalizada

Nessa tarefa, você adicionará uma nova página personalizada ao aplicativo Angariação de fundos.

  1. Navegue até o https://make.powerapps.com e verifique se você selecionou seu ambiente de teste.

  2. Selecione Aplicativos, escolha o aplicativo Angariação de fundos e selecione Editar.

    Captura de tela do botão de edição do aplicativo.

  3. Selecione + Novo.

    Captura de tela do botão adicionar novo.

  4. Selecione Página personalizada.

  5. Selecione Criar página personalizada, digite Hipótese para Nome e selecione Criar.

    Captura de tela da caixa de diálogo criar página personalizada.

  6. Selecione a guia Dados e, em seguida, Adicionar dados.

    Captura de tela do botão adicionar dados.

  7. Pesquise por angariação de fundos e selecione a tabela Angariação de fundos.

    Captura de tela da caixa de diálogo adicionar dados.

  8. Selecione a guia Modo de exibição de árvore e, em seguida, o objeto Aplicativo.

  9. Selecione OnStart e cole a fórmula abaixo na barra de fórmulas. Essa fórmula cria variáveis:

    1. A variável record mantém o registro atual no formulário.

    2. A variável remainingAmount mantém o valor restante da meta de angariação de fundos.

    3. A variável numberOfPeople registra a quantidade de pessoas que doam para atingir a meta da angariação de fundos. Inicializamos essa variável com 1.

    4. A variável averageDonation registra o valor que cada pessoa doa para atingir a meta da angariação de fundos. Inicializamos essa variável com o valor restante.

    Set(record,LookUp(Fundraisers,Fundraiser=GUID(Substitute(Substitute(Param("recordId"),"{",""),"}",""))));Set(remainingAmount,record.'Fundraiser Goal'-record.'Total Donations');Set(numberOfPeople,1);Set(averageDonation,remainingAmount)

  10. Selecione Screen1 e, em seguida, + Inserir.

  11. Expanda o grupo Layout e selecione Contêiner vertical.

    Captura de tela do botão inserir contêiner vertical.

  12. Selecione o novo contêiner.

  13. Vá para a barra de fórmulas e altere o valor Largura do contêiner para 1280.

  14. Altere o valor de Altura do contêiner para 680.

  15. Agora o contêiner deve ser semelhante à imagem abaixo.

    Captura de tela do contêiner redimensionado.

  16. Selecione o contêiner e, em seguida, o botão + Inserir.

  17. Selecione Rótulo no grupo Popular.

  18. Insira Número de pessoas para o Texto.

    Captura de tela do valor de texto de rótulo.

  19. Selecione o contêiner e, em seguida, o botão + Inserir.

  20. Selecione Caixa de texto no grupo Popular.

  21. Renomeie a Caixa de texto para Número de pessoas.

  22. Defina o Valor da caixa de texto Número de pessoas como numberOfPeople.

    Captura de tela do valor de caixa de texto.

  23. Selecione o contêiner e, em seguida, o botão + Inserir.

  24. Localize/selecione um Rótulo.

  25. Insira Valor por pessoa para Texto.

  26. Selecione o contêiner e, em seguida, o botão + Inserir.

  27. Localize/selecione uma Caixa de texto.

  28. Renomeie a Caixa de texto Valor por pessoa.

  29. Defina o Valor da caixa de texto Valor por pessoa para averageDonation.

    Captura de tela do valor de uma caixa de texto.

  30. Defina o valor de OnChange da caixa de texto Valor por pessoa como a fórmula abaixo. Essa fórmula definirá o número de pessoas com base em determinada doação média.

    If(Value('Amount per person'.Value) > 0, Set(numberOfPeople, remainingAmount /'Amount per person'.Value), Set(numberOfPeople, 1))

    Captura de tela do valor de alteração de uma caixa de texto.

  31. Selecione a caixa de texto Número de pessoas.

  32. Defina o valor de OnChange da caixa de texto Número de pessoas para a fórmula abaixo. Essa fórmula define a doação média com base em determinado número de pessoas.

    If(Value('Number of people'.Value) > 0, Set(averageDonation, remainingAmount / 'Number of people'.Value), Set(numberOfPeople, 1);Set(averageDonation, remainingAmount))

  33. Selecione Salvar e aguarde até que a página seja salva.

  34. Selecione Publicar.

  35. Selecione Publicar esta versão.

  36. Quando a caixa de diálogo A página foi salva com êxito for exibida, selecione Ignorar.

  37. Feche a janela ou a guia do navegador do editor de página personalizada.

  38. Agora você deve voltar ao editor do aplicativo baseado em modelo. Selecione OK.

    Captura de tela da caixa de diálogo republicar aplicativo.

  39. Selecione Salvar e aguarde até que o aplicativo seja salvo.

  40. Selecione Publicar e aguarde a publicação do aplicativo.

  41. Inicie uma nova sessão do navegador, navegue até https://make.powerapps.com e verifique se você selecionou seu ambiente de teste.

  42. Selecione Soluções e abra a Solução Padrão.

  43. Selecione Páginas, localize a página What if que você criou e copie o Nome. Mantenha esse nome em um bloco de notas; você precisará dele em uma etapa futura.

    Captura de tela de nome de página personalizada.

  44. Você pode fechar esta sessão do navegador depois de copiar o nome.

Tarefa: adicionar botão de comando

Nessa tarefa, você adicionará um novo botão de comando ao formulário principal da tabela Angariação de fundos.

  1. Abra um editor de texto e cole o JavaScript abaixo. Esse JavaScript abre uma caixa de diálogo centralizada.

    function calculate(itemId)
{
// Centered Dialog
var pageInput = {
    pageType: "custom",
    name: "[YOUR CUSTOM PAGE NAME]",
    recordId: itemId
};
var navigationOptions = {
    target: 2, 
    position: 1,
    width: {value: 50, unit:"%"},
    title: "What if"
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions)
    .then(
        function () {
            // Called when the dialog closes
        }
    ).catch(
        function (error) {
            // Handle error
        }
    );
}

  2. Substitua [NOME DA SUA PÁGINA PERSONALIZADA] pelo nome da sua página personalizada que você copiou na tarefa 1.

    Captura de tela do arquivo JavaScript.

  3. Salve o arquivo localmente no computador e nomeie-o como WhatIf.js. Verifique se a extensão do arquivo é .js.

  4. Volte para o designer de aplicativo baseado em modelo.

  5. Selecione o botão de reticências ... da Angariação de fundos e selecione Editar barra de comandos.

    Captura de tela do botão da barra de comandos de edição.

  6. Selecione Formulário principal e, depois. Editar.

  7. Selecione + Novo e, depois, Comando.

    Captura de tela do botão adicionar novo comando.

  8. Selecione Power Fx e, depois, Continuar.

  9. Insira What if para Rótulo, selecione Usar Ícone, selecione Recalcular e, depois, Executar JavaScript para Ação.

    Captura de tela dos valores do menu suspenso de ação.

  10. Selecione + Adicionar biblioteca.

    Captura de tela do botão adicionar biblioteca.

  11. Selecione + Novo recurso da Web.

    Captura de tela do botão Adicionar novo recurso da Web.

  12. Selecione Escolher arquivo.

  13. Selecione o arquivo WhatIf.js criado e, em seguida, Abrir.

  14. Insira What If JS para Nome de exibição, insira WhatIfJS para Nome, selecione JavaScript (JS) para Tipo e selecione Salvar e publicar.

    Captura de tela da caixa de diálogo adicionar novo recurso da Web.

  15. Procure what if, selecione o recurso da Web What If JS que você acabou de adicionar e selecione Adicionar.

    Captura de tela da caixa de diálogo adicionar biblioteca JavaScript.

  16. Insira calcular para Nome da função e selecione + Adicionar parâmetro.

    Captura de tela do botão adicionar parâmetro.

  17. Selecione FirstPrimaryItemId para o Parâmetro 1.

  18. Selecione Salvar e Publicar e aguarde o término da publicação.

  19. Selecione Reproduzir.

  20. Selecione Campanhas de angariação de fundos e abra um dos registros de angariação de fundos.

  21. Você deve ver o botão da barra de comandos What If que adicionou. Selecione o botão da barra de comandos What if.

    Captura de tela do botão teste de hipóteses.

  22. A caixa de diálogo What if deve ser exibida.

    Captura de tela da caixa de diálogo página personalizada.

  23. Altere o valor de Número de pessoas para 5. O Valor por pessoa deve ser atualizado para quanto cada pessoa precisa doar a fim de atingir a meta da angariação de fundos.

    Captura de tela da doação calculada.

  24. Altere o Valor por pessoa e veja como isso calcula o número de pessoas.

Parabéns, você criou uma página personalizada e a abriu como caixa de diálogo usando um botão da barra de comandos. Vamos revisar o que aprendemos neste módulo.