Exercice : masquer une section de formulaire à l’aide d’un script client

9 minutes

Dans cet exercice, vous allez implémenter le besoin métier consistant à masquer la section Statut lorsqu’une date de début de projet n’est pas fournie ou dans le futur à l’aide d’un script client.

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 1 : préparer une solution avec le formulaire

Dans cette tâche, vous allez créer une solution, lui ajouter une table existante et préparer le formulaire principal de cette table.

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.
Cliquez sur Solutions, puis sur + Nouvelle solution.
Saisissez Améliorations de défi d’innovation pour Nom d’affichage, sélectionnez CDS default publisher pour Éditeur, puis cliquez sur Créer.
La solution Améliorations de défi d’innovation que vous avez créée devrait s’ouvrir.
Cliquez sur + Ajouter, puis sélectionnez Table.
Saisissez « équipe » dans la zone de texte Rechercher, sélectionnez Projet d’équipe, puis cliquez sur Suivant.

Remarque

Si vous ne pouvez pas localiser la table Projet d’équipe, 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.
Cliquez sur le bouton Sélectionner des composants.
Cliquez sur l’onglet Formulaires, sélectionnez le formulaire Informations du Type de formulaire Principal, puis cliquez sur Ajouter.
Recliquez sur Ajouter.
Ouvrez la table Projet d’équipe que vous venez d’ajouter à la solution.
Cliquez sur Formulaires dans le volet Expériences de données.
Ouvrez le formulaire Informations du Type de formulaire Principal.
Cliquez sur la section Statut.
Dans le volet Propriétés, définissez le champ Nom sur section_status, puis cochez la case Masquer. Par défaut, un GUID est affecté comme nom de section. Remplacez-le par un nom plus parlant à référencer dans vos scripts. Vous allez également masquer la section par défaut pour réduire l’effet agaçant de l’affichage, puis du masquage lors du chargement du formulaire.
Accédez à l’arborescence, puis cliquez sur l’onglet Général.
Dans le volet Propriétés, définissez le champ Nom sur tab_general.
Cliquez sur la colonne Début du projet.
Accédez au volet Propriétés, puis cliquez sur le bouton (i) en regard du nom Colonne de table.
Copiez le Nom logique (sample_projectstart), puis collez-le dans un bloc-notes. Vous allez référencer la colonne de données à l’aide de ce nom dans votre script.
Cliquez sur Enregistrer et publier pour enregistrer vos modifications. Attendez la fin de la publication.
Cliquez sur le bouton Précédent.
Sélectionnez Tout.
Cliquez sur Publier toutes les personnalisations, puis attendez la fin de la publication.

Tâche 2 : créer le script client

Dans cette tâche, vous allez créer un script qui affiche/masque la section Statut en fonction de la date de début du projet.

Masquez la section Statut si la date de début du projet est vide ou dans le futur, sinon affichez la section Statut.

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.
Cliquez sur Ouvrir le dossier.
Créez un dossier dans votre dossier Documents, puis nommez-le ClientScriptLab.
Sélectionnez le dossier ClientScriptLab que vous avez créé, puis cliquez sur Sélectionner un dossier.
Survolez le dossier CLIENTSCRIPTLAB, puis cliquez sur Nouveau fichier.
Nommez le fichier FormTeamProject.js.

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

function LearnLab_handleTeamProjectOnLoad(executionContext) {

}
function LearnLab_handleProjectStatusOnChange(executionContext) {

}
function LearnLab_hideOrShowStatusSection(formContext) {

}

Ajoutez ce script à la fonction OnLoad. Notez le nom de la colonne Début du projet ici : sample_projectstart. Il s’agit du nom logique que vous avez enregistré précédemment. Ce code enregistre un gestionnaire d’événements onChange et appelle une fonction courante pour afficher/masquer la section. Vous devez gérer des événements OnChange si une entrée de date de début de projet modifie le besoin de masquage/d’affichage.
```
var formContext = executionContext.getFormContext();
formContext.getAttribute('sample_projectstart').addOnChange(LearnLab_handleProjectStatusOnChange);
LearnLab_hideOrShowStatusSection(formContext);
```
Ajoutez ce script à la fonction OnChange. Ce code obtient simplement l’objet formContext, puis appelle la fonction courante pour effectuer un masquage/affichage.
```
var formContext = executionContext.getFormContext();
LearnLab_hideOrShowStatusSection(formContext);
```

Ajoutez ce script à la fonction hideOrShowStatusSection. Notez le nom d’onglet tab_general, le nom de section section_status et le nom de colonne 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);
}

Votre script devrait maintenant ressembler à cette image :
Cliquez sur Fichier, puis sur Enregistrer.

Tâche 3 : charger le script

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

Accédez à Power Apps Maker Portal et vérifiez que vous vous trouvez dans l’environnement approprié.
Cliquez sur Solutions, puis ouvrez la solution Améliorations de défi d’innovation.
Cliquez sur + Nouveau, puis sélectionnez Plus | Ressource web.
Saisissez FormTeamProject.js pour Nom et FormTeamProject.js pour Nom d’affichage, sélectionnez Java script (JS) pour Type, puis cliquez sur Sélectionner un fichier.
Sélectionnez le fichier FormTeamProject.js que vous avez créé précédemment, puis cliquez sur Ouvrir.
Cliquez sur Enregistrer.
Votre solution devrait maintenant comporter la table Projet d’équipe et la ressource web FormTeamsProject.js.
Ne quittez pas cette page.

Tâche 4 : modifier le formulaire

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

Vérifiez que vous vous trouvez toujours dans la solution Améliorations de défi d’innovation.
Développez Tables, puis la table Projet d’équipe.
Cliquez sur Formulaires et ouvrez le formulaire Informations.
Accédez au volet Propriétés et cliquez sur l’onglet Événements, puis sur + Ajouter une bibliothèque.
Saisissez équipe dans la zone de texte Rechercher, puis appuyez sur Entrée. Sélectionnez FormTeamProject.js, puis cliquez sur Ajouter.
Développez la section On Load, puis cliquez sur + Gestionnaire d’événements.
Saisissez LearnLab_handleTeamProjectOnLoad pour Fonction, cochez la case Transmettre le contexte d’exécution comme premier paramètre, puis cliquez sur Terminé.
Cliquez sur Enregistrer et publier, puis attendez que vos modifications soient enregistrées.
Cliquez sur le bouton Précédent.
Sélectionnez Tout.
Cliquez sur Publier toutes les personnalisations, puis attendez la fin de la publication.

Tâche 5 : tester

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

Accédez à Power Apps Maker Portal et vérifiez que vous vous trouvez dans l’environnement approprié.
Cliquez sur Applications, puis ouvrez l’application Défi d’innovation.
Cliquez sur Projets d’équipe, puis ouvrez le projet d’équipe Cloud computing.
La Section Statut devrait être masquée, car la colonne Début du projet est vide.
Appuyez sur l’icône de calendrier en regard de Début du projet, puis sélectionnez la date du jour.
La section Statut devrait devenir visible.
Définissez le champ Début du projet sur une date dans le futur.
La section Statut devrait devenir masquée.
Définissez le champ Début du projet sur une date dans le passé.
La section Statut devrait redevenir visible.

Grâce à JavaScript et l’API client, vous venez d’implémenter des besoins métier qu’il n’est pas possible d’implémenter à l’aide d’options déclaratives telles que des règles métier.