Extension avec des scripts

Effectué

Les sites Web Power Pages ne prennent pas en charge les règles métier côté client ni les processus JavaScript personnalisés qui sont disponibles pour les formulaires pilotés par modèle.

Les Listes, Formulaires de base et Formulaires à plusieurs étapes incluent une colonne JavaScript personnalisée qui permet aux développeurs d’ajouter des scripts implémentant la fonctionnalité requise au chargement d’une liste ou d’un formulaire spécifique.

Capture d’écran du code JavaScript personnalisé ajouté au formulaire dans l’application Power Pages Management.

Vous pouvez ajouter du code JavaScript personnalisé directement à une page de site web à l’aide de l’éditeur Visual Studio Code. Avec l’application Power Pages Management, vous pouvez également inclure le script dans le cadre d’un modèle web, ce qui rend la fonctionnalité disponible pour toute page basée sur ce modèle.

La fonctionnalité va du masquage des contrôles au remplacement des contrôles de saisie par des équivalents conviviaux, en passant par l’appel de services web externes et l’implémentation de scénarios d’intégration sophistiqués.

Par défaut, les sites Web Power Pages incluent la bibliothèque jQuery qui rend la manipulation du contenu et de l’apparence des pages relativement simple.

Contrôles et colonnes

Un formulaire Nous contacter par défaut crée une ligne dans la table Commentaires dans Microsoft Dataverse. Cette ligne comprend une colonne Titre obligatoire qui s’affiche sur le formulaire avec le libellé Sujet. Cette colonne peut prêter à confusion pour les visiteurs du site. Vous ne pouvez pas recourir à CSS pour masquer le contrôle, car il laisse l’astérisque rouge qui indique que la colonne est obligatoire. JavaScript aide à rendre votre tâche de masquage de la colonne relativement simple. Pour définir cette colonne sur une valeur prédéfinie, puis la masquer, procédez comme suit :

  1. Ouvrez la page Nous contacter dans le studio de conception Power Pages.

  2. Sélectionnez Modifier le code, puis attendez que Visual Studio Code s’ouvre.

  3. Sélectionnez le fichier Contact us.en-US.customjs.js.

    Important

    Le nom du fichier inclut le code langue qui peut être différent dans votre environnement.

  4. Ajoutez le script suivant au fichier :

    $(document).ready
    (
     function()
     {
     $("#title").val('Submitted from contact us form'); // sets the value
     $("#title").closest('tr').hide(); // hide the row containing the column
     }
    );
    

    Remarque

    Certains modèles Power Pages utilisent la table Commentaires et la colonne Titre. Certains modèles Microsoft Dynamics 365 peuvent utiliser une autre table (comme Prospect) et une autre colonne (comme Sujet). Vérifiez la page Nous contacter et le formulaire utilisés dans votre site Web et modifiez le script si nécessaire.

    Capture d’écran du script ajouté au code source de la page.

  5. Enregistrez le fichier à l’aide du raccourci clavier Ctrl + S (⌘ + S sur Mac).

  6. Fermez l’onglet de navigateur avec l’éditeur Visual Studio Code, puis cliquez sur Synchroniser dans le studio de conception pour synchroniser les changements.

  7. Cliquez sur Aperçu > Bureau.

    Une nouvelle fenêtre devrait s’ouvrir, montrant le formulaire Nous contacter, avec la colonne Rubrique (libellée Sujet) masquée.

JavaScript constitue un moyen simple d’ajouter un comportement ou des fonctionnalités supplémentaires à votre site Web Power Pages. Vous pouvez l’ajouter directement à une page, ou l’ajouter à la configuration du Formulaire au moyen de l’application Power Pages Management ou dans le cadre d’un modèle web, en fonction de vos besoins d’étendue. De plus, vous pouvez utiliser un script sur le formulaire pour effectuer les actions suivantes :

  • Mettre en œuvre des règles métier.

  • Ajouter des dépendances entre des éléments, comme des colonnes de choix dépendantes.

  • Effectuer une autre validation de formulaire.

  • Appeler les API Web des portails ou des services externes.

Ces options offrent des alternatives raisonnables aux règles métier côté client et aux scripts dans les formulaires pilotés par modèle.

Pour plus d’informations, consultez Ajouter du code JavaScript personnalisé à un formulaire.