Exercice : utiliser les données de table du script client

  • 14 minutes

Dans cet exercice, vous allez implémenter le besoin métier consistant à créer des colonnes sur le formulaire requis en fonction des valeurs d’une table associée à l’aide d’un script client. Vous allez définir le niveau requis des colonnes du formulaire Idée dans l’exemple d’application Défi d’innovation selon la valeur des colonnes de la table Défi. Pour ce faire, vous allez récupérer les données associées à l’aide des méthodes Xrm.WebAPI.

Important

Utilisez un environnement de test avec Microsoft Dataverse approvisionné et les exemples d’applications activés. Si vous ne disposez pas d’un environnement de test, vous pouvez vous inscrire pour bénéficier de l’offre Communauté.

Tâche : préparer une solution

Dans cette tâche, vous allez créer une solution, lui ajouter des tables existantes, ajouter de nouvelles colonnes et préparer le formulaire principal de l’une de ces tables.

  1. Accédez à Power Apps Maker Portal et vérifiez que vous vous trouvez dans l’environnement approprié où les exemples d’applications sont activés.

    Capture d’écran du nom de l’environnement du laboratoire de développement.

  2. Cliquez sur Solutions, puis sur + Nouvelle solution.

  3. Saisissez API web Défi d’innovation pour Nom d’affichage et CDS default publisher pour Éditeur, puis cliquez sur Créer.

    Capture d’écran de la fenêtre Nouvelle solution avec des propriétés.

  4. La solution API web Défi d’innovation que vous avez créée devrait s’ouvrir.

  5. Cliquez sur + Ajouter, puis sélectionnez Table.

  6. Saisissez « idée » dans la zone de texte Rechercher, sélectionnez Idée, puis cliquez sur Suivant.

    Remarque

    Si vous ne pouvez pas localiser la table Idée, vous ne disposez peut-être pas des exemples d’applications dans votre environnement. Sélectionnez un autre environnement ou créez-en un avec les exemples d’applications installés.

  7. Cliquez sur le bouton Sélectionner des composants.

    Capture d’écran du bouton Sélectionner des composants.

  8. Cliquez sur l’onglet Formulaires, sélectionnez le formulaire Informations du Type de formulaire Principal, puis cliquez sur Ajouter.

    Capture d’écran de la fenêtre Ajouter un composant.

  9. Recliquez sur Ajouter.

  10. Cliquez sur + Ajouter un élément existant, puis sélectionnez de nouveau Table.

    Capture d’écran du menu d’ajout d’une table existante à la solution.

  11. Saisissez « défi » dans la zone de texte Rechercher, sélectionnez Défi, puis cliquez sur Suivant.

  12. Cliquez sur le bouton Sélectionner des composants.

    Capture d’écran du bouton Sélectionner des composants.

  13. Cliquez sur l’onglet Formulaires, sélectionnez le formulaire Informations du Type de formulaire Principal, puis cliquez sur Ajouter.

    Capture d’écran de l’onglet Formulaires avec le formulaire Informations sélectionné comme formulaire Principal.

  14. Recliquez sur Ajouter.

  15. Ouvrez la table Défi que vous venez d’ajouter à la solution.

  16. Cliquez sur + Nouveau, puis sélectionnez Colonne. Vous allez ajouter deux colonnes pour indiquer les données requises pour les lignes Idée créées pour ce Défi.

    Capture d’écran du bouton Ajouter une colonne à la table.

  17. Saisissez Investissement requis pour Nom d’affichage, sélectionnez Choix | Oui/Non pour Type de données, puis développez les Options avancées. Notez le préfixe du Nom du schéma : votre préfixe est différent. Vous en avez besoin lorsque vous créez le script et les éléments devant faire référence aux champs que vous ajoutez.

    Capture d’écran du champ Nom avec le préfixe mis en évidence.

  18. Cliquez sur Enregistrer.

  19. Cliquez sur + Nouveau, puis sélectionnez de nouveau Colonne.

  20. Saisissez ROI requis pour Nom d’affichage, sélectionnez Choix | Oui/Non pour Type de données, puis cliquez sur Enregistrer.

  21. Développez la table Défi sur le côté gauche, puis cliquez sur Formulaires.

  22. Ouvrez le formulaire Informations que vous avez ajouté à la solution.

  23. Cliquez sur l’onglet Colonnes de table.

    Capture d’écran de l’onglet Colonnes de table.

  24. Ajoutez la colonne Investissement requis au formulaire.

  25. Ajoutez la colonne ROI requis au formulaire.

  26. Le formulaire devrait maintenant ressembler à cette image. Cliquez sur Enregistrer et publier. Attendez la fin de la publication.

    Capture d’écran du bouton Enregistrer permettant d’enregistrer les modifications du formulaire.

  27. Revenez à la solution en cliquant sur le bouton Précédent.

    Capture d’écran du bouton Précédent permettant de revenir à la solution.

Tâche : créer un script client

Dans cette tâche, vous allez créer un script définissant le niveau requis pour les colonnes de la table Idée en fonction des valeurs des colonnes de la table Défi.

  1. Démarrez une nouvelle instance Visual Studio Code ou utilisez votre éditeur de code préféré. Vous pouvez télécharger et installer Visual Studio Code.

  2. Cliquez sur Ouvrir le dossier.

    Capture d’écran du bouton Ouvrir le dossier.

  3. Créez un dossier dans votre dossier Documents, puis nommez-le ClientScriptLab.

  4. Sélectionnez le dossier ClientScriptLab que vous avez créé, puis cliquez sur le bouton Sélectionner un dossier.

    Capture d’écran du dossier ClientScriptLab et du bouton Sélectionner un dossier.

  5. Survolez le dossier CLIENTSCRIPTLAB, puis cliquez sur Nouveau fichier.

    Capture d’écran du bouton Nouveau fichier.

  6. Nommez le fichier IdeaForm.js.

  7. Ajoutez les fonctions ci-dessous à IdeaForm.js. Vos fonctions doivent avoir un nom unique ou utiliser un espace de noms pour garantir l’unicité.

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

  8. Ajoutez ce script à la fonction OnLoad. Ce script enregistre un gestionnaire d’événements OnChange, car vous devez gérer des événements OnChange en cas de modification du défi associé.

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

    Capture d’écran de la fonctionnalité OnLoad.

  9. Ajoutez ce script à la fonction OnChange. Ce code obtient simplement l’objet formContext.

    var formContext = executionContext.getFormContext();

  10. Ajoutez cette fonction au fichier IdeaForm. Cette fonction est appelée à partir des fonctions OnLoad et OnChange et l’objet formContext est transmis en tant qu’argument. C’est là que vous allez implémenter la logique métier pour définir les niveaux requis.

    function LearnLab_setRequiredFields(formContext) {
}

  11. Vous allez d’abord obtenir les valeurs de recherche de défi. Ajoutez ce script à la fonction setRequiredFields. Vous avez obtenu la valeur sample_originatingchallengeid à partir des propriétés de la colonne dans l’Explorateur de solutions.

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

  12. Ensuite, vous allez vérifier si la valeur défi est nulle. Ajoutez ce script à la fonction setRequiredFields.

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

  13. Vous allez rendre les colonnes facultatives si le défi est nul. Ajoutez ce script dans l’instruction else. Cette opération garantit que les colonnes sont facultatives si un défi n’est pas sélectionné.

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

  14. Votre fichier IdeaForm devrait maintenant ressembler à cette image :

    Capture d’écran du fichier IdeaForm avec le script ajouté.

  15. Vous allez obtenir l’ID du défi associé si le défi n’est pas nul. Ajoutez ce script dans l’instruction if.

    var challengeId = challenge[0].id;

  16. Vous allez maintenant récupérer la ligne de défi à l’aide des méthodes WebAPI, puis sélectionner uniquement les deux colonnes qui vous intéressent : InvestmentRequired et ROIRequired. Ajoutez le script dans l’instruction if.

    Remarque

    Remplacez crc8c par votre préfixe de la Tâche 1.

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

  17. En cas de réussite de l’API web retrieveRecord, vous allez d’abord créer deux variables contenant la valeur requise pour les deux colonnes et définir leur valeur initiale sur Facultatif. Ensuite, vous allez vérifier si les colonnes sont requises et définir la variable requise en conséquence. Enfin, vous allez définir le niveau requis de colonne sur la valeur de la variable que vous avez créée. Ajoutez ce script dans la fonction Success. Remplacez prefix cr07c_ pour cr07c_investmentrequired et cr07c_roirequired par le préfixe des colonnes que vous avez créées.

    Remarque

    Remplacez crc8c par votre préfixe de la Tâche 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. Vous allez enregistrer le message d’erreur si l’API web retrieveRecord provoque une erreur. Ajoutez ce script dans la fonction Error. Vous pouvez également présenter une boîte de dialogue à l’utilisateur avec les options appropriées si nécessaire à l’aide des méthodes de l’objet Xrm.Navigation.

    console.log(error.message);

  19. La fonction LearnLab_setRequiredFileds devrait maintenant ressembler à cette image :

    Capture d’écran de la fonction terminée.

  20. Vous allez appeler la fonction LearnLab_setRequiredFileds depuis les fonctions OnLoad et OnChange. Ajoutez ce script aux fonctions OnLoad et OnChange.

    LearnLab_setRequiredFields(formContext)

  21. Votre fichier IdeaForm devrait maintenant ressembler à cette image :

    Capture d’écran du script du fichier IdeaForm terminé.

  22. Cliquez sur Fichier, puis sur Enregistrer tout.

Tâche : charger le script

Dans cette tâche, vous allez charger le script que vous avez créé dans votre environnement.

  1. Accédez à Power Apps Maker Portal et vérifiez que vous vous trouvez dans l’environnement approprié.

  2. Cliquez sur Solutions, puis ouvrez la solution API web Défi d’innovation.

  3. Cliquez sur + Nouveau, puis sélectionnez Plus | Ressource web.

    Capture d’écran du bouton d’ajout d’une nouvelle ressource web.

  4. Saisissez IdeaForm.js pour Nom et IdeaForm.js pour Nom d’affichage, sélectionnez Script (JS) pour Type, puis cliquez sur Sélectionner un fichier.

    Capture d’écran du bouton de sélection d’un fichier de ressource web.

  5. Sélectionnez le fichier IdeaForm.js que vous avez créé précédemment, puis cliquez sur Ouvrir.

  6. Cliquez sur Enregistrer.

  7. Votre solution devrait maintenant comporter la table Défi, la table Idée et la ressource web IdeaForm.js.

  8. Ne quittez pas cette page.

Tâche : modifier le formulaire

Dans cette tâche, vous allez ajouter la bibliothèque JavaScript au formulaire principal Idée, ainsi qu’un gestionnaire d’événements pour l’événement On Load.

  1. Vérifiez que vous vous trouvez toujours dans la solution API web Défi d’innovation.

  2. Développez la table Idée, puis cliquez sur Formulaires.

  3. Ouvrez le formulaire PrincipalInformations.

  4. Cliquez sur l’onglet Bibliothèques de formulaires.

  5. Cliquez sur + Ajouter une bibliothèque.

    Capture d’écran du bouton d’ajout d’une bibliothèque au formulaire.

  6. Saisissez « idée » dans la zone de texte Rechercher, puis appuyez sur Entrée. Sélectionnez IdeaForm.js, puis cliquez sur Ajouter.

    Capture d’écran du bouton d’ajout d’une bibliothèque JavaScript.

  7. Cliquez sur l’onglet Événements à droite.

  8. Développez la section On Load, puis cliquez sur + Gestionnaire d’événements.

    Capture d’écran du bouton d’ajout d’un gestionnaire d’événements.

  9. Saisissez LearnLab_handleIdeaOnLoad pour Fonction, cochez la case Transmettre le contexte d’exécution comme premier paramètre, puis cliquez sur Terminé.

    Capture d’écran de la fenêtre Configurer l’événement.

  10. Cliquez sur Enregistrer et publier et attendez la fin de la publication.

  11. Cliquez sur le bouton Précédent.

  12. Sélectionnez Tout.

  13. Cliquez sur Publier toutes les personnalisations, puis attendez la fin de la publication.

Tâche : tester

Dans cette tâche, vous allez tester votre script.

  1. Accédez à Power Apps Maker Portal et vérifiez que vous vous trouvez dans l’environnement approprié.

  2. Cliquez sur Applications, puis lancez l’application Défi d’innovation.

  3. Cliquez sur Défis, puis ouvrez l’une des lignes Défi.

  4. Les colonnes Investissement requis et ROI requis devraient être vides. Cliquez sur Associé, puis sélectionnez Idées.

    Capture d’écran du menu Associé avec l’option Idées.

  5. Ouvrez l’une des Idées.

    Capture d’écran de l’idée associée Petites maisons.

  6. Effacez les valeurs des colonnes Investissement requis et Délai de ROI (mois).

  7. Les colonnes sont facultatives, car les colonnes obligatoires de la table Défi sont vides. Cliquez sur le bouton Précédent.

    Capture d’écran du bouton Précédent en haut à gauche.

  8. Cliquez sur l’onglet Détails, puis sélectionnez Oui pour les colonnes Investissement requis et ROI requis.

    Capture d’écran des colonnes obligatoires définies sur oui.

  9. Cliquez sur l’onglet Idées, puis ouvrez la même idée que vous avez sélectionnée la dernière fois.

  10. Les deux colonnes devraient maintenant être obligatoires.

    Capture d’écran des champs Investissement requis et Délai de ROI.