Exercício: usar script de cliente para ocultar uma seção de formulário

  • 9 minutos

Neste exercício, você usa o script de cliente para implementar o requisito corporativo de ocultar a seção Status quando uma data de início do projeto não for fornecida ou estiver no futuro.

Importante

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

Tarefa 1 – Preparar solução com o formulário

Nesta tarefa, você criará uma solução, adicionará uma tabela existente à solução e preparará o formulário principal de uma das tabelas que você adicionou à solução.

  1. Navegue até o Power Apps Maker Portal e verifique se você está no ambiente correto, com os aplicativos de exemplo habilitados.

  2. Selecione Soluções e + Nova solução.

  3. Digite Innovation Challenge Enhancements como Nome de exibição, selecione CDS default publisher como Editor e selecione Criar.

    Captura de tela das novas propriedades da solução.

  4. As Melhorias do Desafio de Inovação que você criou devem ser abertas.

  5. Selecione + Adicionar existente e Tabela.

  6. Insira a equipe na caixa de texto de pesquisa, selecione Projeto da equipe e selecione Avançar.

    Observação

    Se não conseguir localizar a tabela Projeto da equipe talvez você não tenha os aplicativos de exemplo no seu ambiente. Selecione outro ambiente ou crie um com os aplicativos de exemplo instalados.

  7. Selecione o botão Editar objetos.

    Captura de tela do botão Selecionar componentes.

  8. Selecione a guia Formulários selecione o formulário Informações do tipo de formulário principal e selecione Adicionar.

    Captura de tela da janela Adicionar componente.

  9. Selecione Adicionar novamente.

  10. Abra a tabela Team Project que você acabou de adicionar à solução.

  11. Selecione Formulários no cartão Experiências de dados.

  12. Abra o formulário Informações que é do Tipo de formulário Principal.

    Captura de tela do formulário de informações.

  13. Selecione a seção Status.

    Captura de tela da seção Status.

  14. No painel Propriedades, altere o Nome para section_status. Por padrão, um GUID é atribuído como o nome da seção. Altere-o para um nome mais significativo para referência em seus scripts. Em seguida, marque a caixa de seleção Ocultar. Isso ocultará a seção, por padrão, para reduzir o efeito desagradável de mostrar e ocultar no carregamento do formulário.

    Captura de tela da caixa de seleção Ocultar.

  15. Vá para o modo de exibição de árvore e selecione a guia Geral.

    Captura de tela da guia Geral

  16. No painel Propriedades, altere o Nome para tab_general.

  17. Selecione a coluna Início do projeto.

    Captura de tela da coluna Início do projeto.

  18. Vá para o painel Propriedades e selecione o botão (i) ao lado do nome da coluna da tabela.

  19. Copie o Nome lógico (sample_projectstart) e cole-o em um bloco de notas. Você usará esse nome no script para fazer referência a essa coluna.

    Captura de tela do botão de informações com o nome lógico exibido.

  20. Selecione Salvar e publicar para salvar suas alterações. Aguarde a conclusão da publicação.

  21. Selecione o botão Voltar.

    Captura de tela do botão Voltar.

  22. Selecione Tudo.

  23. Selecione Publicar todas as personalizações e aguarde o término da publicação.

Tarefa 2 – Construir script de cliente

Nesta tarefa, você criará um script que mostrará/ocultará a seção de status com base na data de início do projeto.

Você ocultará a seção de status se a data de início do projeto estiver vazia ou no futuro. Caso contrário, a seção de status será exibida.

  1. Inicie uma nova instância do Visual Studio Code ou use o editor de código de sua preferência. Você pode baixar e instalar o Visual Studio Code.

  2. Selecione Abrir Pasta.

    Captura de tela do botão Abrir pasta.

  3. Crie uma pasta na sua pasta de documentos e nomeie-a ClientScriptLab.

  4. Selecione a pasta ClientScriptLab que você criou e Selecionar pasta.

    Captura de tela do botão e da tela Selecionar pasta.

  5. Passe o cursor do mouse sobre a pasta CLIENTSCRIPTLAB e selecione Novo arquivo.

    Captura de tela do botão Novo arquivo.

  6. Nomeie o arquivo como FormTeamProject.js.

  7. Adicione as funções a seguir ao FormTeamProject.js. Suas funções devem ter nomes exclusivos ou usar um namespace para garantir a exclusividade.

    function LearnLab_handleTeamProjectOnLoad(executionContext) {

}
function LearnLab_handleProjectStatusOnChange(executionContext) {

}
function LearnLab_hideOrShowStatusSection(formContext) {

}

  8. Adicione esse script à função OnLoad do código. Observe o nome da coluna de início do projeto aqui: sample_projectstart. Esse é o nome lógico que você salvou anteriormente. Esse código registra um manipulador de eventos OnChange e chama uma função comum para mostrar/ocultar a seção. Você precisa manipular na alteração caso uma entrada de data de início do projeto altere o requisito de ocultar/mostrar.

    var formContext = executionContext.getFormContext();
formContext.getAttribute('sample_projectstart').addOnChange(LearnLab_handleProjectStatusOnChange);
LearnLab_hideOrShowStatusSection(formContext);

    Captura de tela da função OnLoad.

  9. Adicione esse script à função OnChange. Esse código simplesmente obtém o formContext e chama a função comum para ocultar/mostrar.

    var formContext = executionContext.getFormContext();
LearnLab_hideOrShowStatusSection(formContext);

  10. Adicione esse script à função hideOrShowStatusSection. Observe a guia nome da tab_general, o nome da seção section_status e o nome de coluna sample_projectstart.

    var tabGeneral = formContext.ui.tabs.get('tab_general');
var sectionStatus = tabGeneral.sections.get('section_status');
var startDate = formContext.getAttribute('sample_projectstart').getValue();
var CurrentDate = new Date();
if (startDate == null || startDate > CurrentDate) {
  sectionStatus.setVisible(false);
} else {
  sectionStatus.setVisible(true);
}

  11. Seu script agora deve ser semelhante a esta imagem.

    Captura de tela de um exemplo de script.

  12. Selecione Arquivo e Salvar.

Tarefa 3: Carregar o script

Nesta tarefa, você carrega o script criado em seu ambiente.

  1. Navegue até o Power Apps maker portal e verifique se você está no ambiente correto.

  2. Selecione Soluções e abra a solução Melhorias de desafio de inovação.

  3. Selecione +Novo e Mais | Recurso da Web.

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

  4. Digite FormTeamProject.js para Nome, FormTeamProject.js para Nome para exibição, selecione Java script (JS) para Tipo e selecione Escolher arquivo.

    Captura de tela do botão Escolher arquivo de recurso da Web.

  5. Selecione o arquivo FormTeamProject.js que você criou e selecione Abrir.

  6. Selecione Salvar.

  7. A sua solução deve agora ter a tabela Projeto da equipe e o recurso da Web FormTeamsProject.js.

  8. Não saia desta página.

Tarefa 4 – Editar formulário

Nesta tarefa, você adicionará a biblioteca JavaScript ao formulário principal de Team Project e adicionará um manipulador de eventos ao evento On Load.

  1. Verifique se você ainda está na solução de Melhorias de desafio de inovação.

  2. Expanda Tabelas e expanda a tabela Projeto de Equipe.

  3. Selecione Formulários e abra o formulário Informações.

  4. Vá para o painel Propriedades e selecione a guia Eventos. Expanda OnLoad, se ele estiver recolhido, e selecione + Manipulador de Eventos. Em Configurar Evento, selecione + Adicionar biblioteca.

    Captura de tela do botão Adicionar nova biblioteca ao formulário.

  5. Insira a equipe na caixa de texto de pesquisa e pressione Enter. Selecione FormTeamProject.jse selecione Adicionar.

    Captura de tela da janela Adicionar biblioteca JavaScript.

  6. Digite LearnLab_handleTeamProjectOnLoad em Função, marque a caixa de seleção Passar contexto de execução como primeiro parâmetro e selecione Concluído.

    Captura de tela mostrando a caixa de diálogo Configurar evento.

  7. Selecione Salvar e publicar e aguarde as alterações serem salvas.

  8. Depois que as alterações forem salvas e publicadas, selecione o botão Voltar.

  9. Selecione Tudo.

  10. Selecione Publicar todas as personalizações e aguarde o término da publicação.

Tarefa 5 – Testar

Nesta tarefa, você testará seu script.

  1. Navegue até o Power Apps Maker Portal e verifique se você está no ambiente correto.

  2. Selecione Aplicativos e abra o aplicativo Innovation Challenge.

  3. Selecione Team Projects e abra o projeto da equipe de Computação em Nuvem.

  4. A seção Status deve ser ocultada porque a coluna Início do projeto está vazia.

    Captura de tela de coluna de início de projeto vazio e seção de status oculta.

  5. Pressione o ícone de calendário próximo ao início do projeto e selecione a data de hoje.

  6. A seção Status deve se tornar visível.

    Captura de tela do valor de início do projeto definido como hoje com a seção status visível.

  7. Altere o início do projeto para uma data futura.

  8. A seção Status deve se tornar oculta.

  9. Altere o início do projeto para uma data passada.

  10. A seção Status deve se tornar visível novamente.

Você já usou a API de cliente e JavaScript para implementar requisitos comerciais que não são possíveis de implementar usando opções declarativas como regras de negócios.