Exercício: usar os dados da tabela do script de cliente

  • 14 minutos

Neste exercício, você usa um script de cliente para implementar o requisito de negócios de tornar as colunas do formulário obrigatórias com base nos valores de uma tabela relacionada. Você definirá o nível de necessidade das colunas no formulário Ideia no aplicativo de exemplo desafio de inovação com base no valor das colunas na tabela de desafios. Para isso, você usará os métodos Xrm.WebAPI para recuperar os dados relacionados.

Importante

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

Tarefa – Preparar solução

Nesta tarefa, você criará uma solução, adicionará tabelas existentes à solução, adicionará novas colunas 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.

    Captura de tela do laboratório de desenvolvedor do nome do ambiente.

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

  3. Digite API Web de desafio da inovação como Nome de exibição, selecione CDS default publisher como Editor e selecione Criar.

    Captura de tela da janela Nova solução com propriedades.

  4. A solução API Web de Desafio de Inovação que você criou deve ser aberta.

  5. Selecione + Adicionar existente e Tabela.

  6. Insira a ideia na caixa de texto de pesquisa, selecione Ideia e selecione Avançar.

    Observação

    Se não conseguir localizar a tabela Ideia, talvez você não tenha os aplicativos de exemplo no seu ambiente. Selecione outro ambiente ou crie um novo 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. Selecione +Adicionar existente e selecione Tabela novamente.

    Captura de tela do menu Adicionar tabela existente a solução.

  11. Pesquise por desafio, selecione Desafio e, depois, Avançar.

  12. Selecione o botão Editar objetos.

    Captura de tela do link Selecionar componentes.

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

    Captura de tela da guia Formulários com o formulário Informações selecionado como principal.

  14. Selecione Adicionar novamente.

  15. Abra a tabela Desafio que você acabou de adicionar à solução.

  16. Selecione + Novo e Coluna. Você adicionará duas colunas para indicar quais dados são necessários para linhas de ideia criadas para esse desafio.

    Captura de tela do botão Adicionar coluna a tabela.

  17. Insira Investimento necessário para Nome de exibição, selecione Escolha | Sim/Não para Tipo de dados e expanda as Opções avançadas. Anote o prefixo do Nome do esquema; seu prefixo é diferente. Você precisa disso ao criar o script e o que se referir aos campos que está adicionando.

    Captura de tela do campo de nome com o prefixo realçado.

  18. Selecione Salvar.

  19. Selecione + Novo e Coluna novamente.

  20. Insira ROI necessário para Nome de exibição, selecione Escolha | Sim/Não para Tipo de dados e selecione Salvar.

  21. Expanda a tabela Desafio no lado esquerdo e selecione Formulários.

  22. Abra o formulário de Informações que você adicionou à solução.

  23. Selecione a guia Colunas de tabela.

    Captura de tela da guia de colunas da tabela

  24. Adicione a coluna Investimento necessário ao formulário.

  25. Adicione ROI necessário ao formulário.

  26. O formulário agora deve ser semelhante a esta imagem. Selecione Salvar e publicar. Aguarde a conclusão da publicação.

    Captura de tela do botão Salvar alterações do formulário.

  27. Retorne à solução selecionando o botão Voltar.

    Captura de tela do botão Voltar à solução.

Tarefa: Criar o script do cliente

Nessa tarefa, você criará um script que definirá o nível necessário para as colunas na tabela Ideia com base nos valores da coluna de tabelas Desafio.

  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 selecione o botão Selecionar pasta.

    Captura de tela da pasta de script do cliente e do botão 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 IdeaForm.js.

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

    function LearnLab_handleIdeaOnLoad(executionContext) {
}
function LearnLab_handleChallengeOnChange(executionContext) {
}

  8. Adicione esse script à função OnLoad. Esse script registra um manipulador de eventos OnChange; você precisa de OnChange caso o desafio relacionado mude.

    var formContext = executionContext.getFormContext();
formContext.getAttribute('sample_originatingchallengeid').addOnChange(LearnLab_handleChallengeOnChange);

    Captura de tela da função OnLoad.

  9. Adicione esse script à função OnChange. Esse código simplesmente obtém o formContext.

    var formContext = executionContext.getFormContext();

  10. Adicione essa função ao arquivo IdeaForm. Esta função será chamada das funções OnLoad e OnChange e o formContext será passado como um argumento. Será onde você implementar a lógica comercial para definir os níveis de necessidade.

    function LearnLab_setRequiredFields(formContext) {
}

  11. Primeiro, você obterá os valores de pesquisa de desafio. Adicione esse script à função setRequiredFields. Obtivemos sample_originatingchallengeid das propriedades da coluna no Gerenciador de Soluções.

    var challenge = formContext.getAttribute('sample_originatingchallengeid').getValue();

  12. Em seguida, você verificará se o valor do desafio é nulo. Adicione esse script à função setRequiredFields.

    if (challenge != null) {
    }
    else{
    }

  13. As colunas não serão obrigatórias se o desafio for nulo. Adicione esse script no else. Isso garante que, se não for selecionado um desafio, as colunas não serão necessárias.

    formContext.getAttribute("sample_investmentrequired").setRequiredLevel('none');
formContext.getAttribute("sample_timetoroimonths").setRequiredLevel('none');

  14. Seu IdeaForm agora deve ser semelhante a esta imagem.

    Captura de tela do ideaform com script adicionado.

  15. Você receberá a ID do desafio relacionado se o desafio não for nulo. Adicione esse script na instrução if.

    var challengeId = challenge[0].id;

  16. Agora você recupera a linha do desafio usando WebAPI e seleciona apenas as duas colunas do interesse em InvestmentRequired e ROIRequired. Adicione o script na instrução if.

    Observação

    Substitua crc8c pelo seu prefixo da tarefa 1.

    Xrm.WebApi.retrieveRecord("sample_challenge", challengeId, "?$select=crc8c_investmentrequired,crc8c_roirequired").then(
            function success(result) {
            },
            function (error) {
            }
        );

  17. Se retrieveRecord for bem-sucedido, primeiro você cria duas variáveis que contêm os valores de requisito para ambas as colunas e define seu valor inicial como não obrigatório. Depois disso, você verifica se as colunas são obrigatórias e define a variável de requisito de acordo. Finalmente, você define o requisito da coluna para o valor da variável que você criou. Adicione este script na função de sucesso. Substitua o prefix cr07c_ por cr07c_investmentrequired e cr07c_roirequired pelo prefixo das colunas que você criou.

    Observação

    Substitua crc8c pelo seu prefixo da tarefa 1.

    var investmentRequired = 'none';
var roiRequired = 'none';
if (result.cr07c_investmentrequired) {
    investmentRequired = 'required';
}
if (result.cr07c_roirequired) {
    roiRequired = 'required';
}
formContext.getAttribute("sample_investmentrequired").setRequiredLevel(investmentRequired);
formContext.getAttribute("sample_timetoroimonths").setRequiredLevel(roiRequired);

  18. Você registrará a mensagem de erro, se retrieveRecord causar um erro. Adicione este script na função de erro. Você também pode usar os métodos de Xrm.Navigation para exibir uma caixa de diálogo para o usuário com as opções apropriadas, se necessário.

    console.log(error.message);

  19. A função LearnLab_setRequiredFileds agora deve ser semelhante a esta imagem.

    Captura de tela da função concluída.

  20. Você chamará o LearnLab_setRequiredFileds das funções OnLoad e onChange. Adicione esse script às funções OnLoad e OnChange.

    LearnLab_setRequiredFields(formContext)

  21. Seu IdeaForm agora deve ser semelhante a esta imagem.

    Captura de tela do script de formulário de ideias preenchido.

  22. Selecione Arquivo e Salvar tudo.

Tarefa: 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 Innovation Challenge Web API.

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

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

  4. Digite IdeaForm.js para Nome, IdeaForm.js para Nome para exibição, selecione JavaScript (JS) para Tipo e selecione Escolher arquivo.

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

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

  6. Selecione Salvar.

  7. Sua solução agora deve ter a tabela Challenge, a tabela Ideia e o recurso da Web IdeaForm.js.

  8. Não saia desta página.

Tarefa – Editar formulário

Nesta tarefa, você adiciona a biblioteca JavaScript ao formulário principal de ideia e adiciona um manipulador de eventos para o evento OnLoad.

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

  2. Expanda a tabela Idea e selecione Formulários.

  3. Abra o formulário MainInformation.

  4. Selecione a guia Bibliotecas de formulários.

  5. Selecione + Adicionar biblioteca.

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

  6. Insira a ideia na caixa de texto de pesquisa e pressione Enter. Selecione IdeaForm.js e Adicionar.

    Captura de tela do botão Adicionar biblioteca JavaScript.

  7. Selecione a guia Eventos à direita.

  8. Expanda a seção On Load e selecione + Manipulador de Eventos.

    Captura de tela do botão para adicionar manipulador de eventos.

  9. Insira LearnLab_handleIdeaOnLoad para Função, marque a caixa de seleção Passar contexto de execução como primeiro parâmetro e selecione Concluído.

    Captura de tela da janela Configurar evento.

  10. Selecione Salvar e publicar e aguarde o término da publicação.

  11. Selecione o botão Voltar.

  12. Selecione Tudo.

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

Tarefa: 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 inicie o aplicativo Innovation Challenge.

  3. Selecione Desafios e abra uma das linhas do Desafio.

  4. O Investimento necessário e o ROI necessário devem estar vazios. Selecione Relacionado e Ideias.

    Captura de tela do menu Ideias relacionadas.

  5. Abra uma das ideias.

    Captura de tela da tela inicial Ideias relacionadas.

  6. Desmarque os valores de coluna Investimento necessário e Tempo para ROI (meses).

  7. As colunas não são necessárias porque as colunas de necessidades na tabela de desafios estão vazias. Selecione o botão Voltar.

    Captura de tela do botão Voltar no canto superior esquerdo.

  8. Selecione a guia Detalhes e selecione Sim para o Investimento necessário e o ROI necessário.

    Captura de tela de requisitos definida como Sim.

  9. Selecione a guia Ideias e abra a mesma ideia que você selecionou da última vez.

  10. As duas colunas agora devem ser necessárias.

    Captura de tela dos campos de investimento necessário e de tempo para ROI.