Partager via

Modifier le code avec Visual Studio Code pour le web (préversion)

[Cette rubrique fait partie de la documentation en version préliminaire et peut faire l’objet de modifications.]

Dans le studio de conception, vous pouvez modifier le code du site à l’aide de Visual Studio Code pour le web. Cette fonctionnalité vous permet de modifier le contenu statique, HTML, CSS, Liquid et JavaScript pour les métadonnées de site Web suivantes :

Metadata Contenu
Formulaires avancés (formulaires à plusieurs étapes) JavaScript
Formulaires de base JavaScript
Extraits de contenu Tout le contenu des extraits de contenu pris en charge
Listes JavaScript
Fichiers Web Affichez et téléchargez des fichiers multimédias. Modifiez les fichiers texte (code).
Pages Web Tout le contenu pris en charge (par langue), JavaScript et CSS
Modèles Web Tout le contenu pris en charge

Note

Vous ne pourrez pas créer d’enregistrements de métadonnées, ajouter et modifier uniquement du contenu, du code et afficher/télécharger des pièces jointes de fichier.

Visual Studio Code pour le web fournit une expérience microsoft Visual Studio Code gratuite et sans installation, qui s’exécute entièrement dans votre navigateur, ce qui vous permet de parcourir le code du site et d’apporter des modifications de code léger rapidement et en toute sécurité. Plus d’informations : Visual Studio Code pour l’expérience web.

Important

  • Cette fonctionnalité est une fonctionnalité en version préliminaire.
  • Les fonctionnalités d'évaluation ne sont pas destinées à une utilisation en production et peuvent être restreintes. Ces fonctionnalités sont disponibles avant une publication officielle afin que les clients puissent y accéder de façon anticipée et fournir des commentaires.

Demo de l’utilisation de Visual Studio Code pour web pour modifier Power Pages site.

Note

  • Le premier chargement de Visual Studio Code pour le web peut prendre un certain temps, car il installera les extensions requises pour cette fonctionnalité.
  • Les opérations créer, supprimer et renommer des fichiers ne sont pas prises en charge.
  • Cette fonctionnalité utilise l’extension web Power Platform Tools . Les extensions web sont limitées par le bac à sable du navigateur et ont donc des limitations par rapport aux extensions normales.
    • L’interface CLI Power Platform n’est pas prise en charge.
    • Les fonctionnalités de l’extension web Power Platform Tools sont limitées à l'expérience d'édition de code de Power Pages.
    • Cette fonctionnalité n’est pas disponible dans le cloud de la communauté gouvernementale (GCC), le cloud de la communauté du gouvernement (GCC High) et le ministère de la Défense (DoD). Les utilisateurs dans ces régions utilisent l’application Gestion des portails pour modifier le code. Consultez Modifier le code dans l’application Gestion des portails pour plus d’informations.

Modifier le code disponible dans le studio de conception

Vous pouvez commencer à modifier le code de votre site à l'aide de Visual Studio Code pour le Web à partir de la page d'accueil de Power Pages en choisissant l'option Edit site code dans le menu déroulant Edit.

Vous pouvez également modifier le code dans le studio de conception à partir des zones suivantes :

  • Modifier le code de page Web depuis l’espace de travail Pages
  • Code du modèle d’en-tête de l’espace de travail Pages
  • Modifier le code CSS personnalisé depuis l’espace de travail Styles
  • Modifier le code JavaScript personnalisé pour les formulaires à plusieurs étapes
  • Modifier le code JavaScript personnalisé pour les formulaires de base
  • Modifier le code JavaScript personnalisé pour les listes
  • Modifier les extraits de contenu
  • Modifier les modèles Web
  • Afficher et télécharger des fichiers Web multimédias (images)
  • Modifier des fichiers web basés sur du texte (CSS, JavaScript, autres)

Voyons comment modifier le code à l’aide de ces zones.

Modifier le code de page web depuis l’espace de travail Pages

Lorsque vous ouvrez le studio de conception Power Pages, vous voyez l'option Edit code dans le menu Pages1 et le coin supérieur droit de l’écran2.

Modifier le code depuis l’espace de travail Pages.

Code du modèle d’en-tête de l’espace de travail Pages

Sélectionnez Modifier l’en-tête de site, puis sélectionnez Modifier le code pour ouvrir l’éditeur de code.

Modifier le code depuis l’en-tête Pages.

Modifier le code CSS personnalisé depuis l’espace de travail Styles

Accédez à Espace de travail Styles et sélectionnez le menu personnalisé CSS Modifier le code disponible pour ouvrir l’éditeur de code.

Modifier le code depuis CSS personnalisé.

vue des actions Power Pages

La vue Power Pages Actions, accessible en bas de l’Explorateur de fichiers, vous permet de gérer les sites Power Pages directement dans l’éditeur. Il réduit la nécessité de passer à Power Pages studio de conception en permettant aux développeurs d’effectuer rapidement des tâches courantes à partir de l’éditeur.

Actions disponibles

  • Site en préversion
    Cette action efface le cache de configuration et ouvre le site dans VS Code. Il permet aux développeurs d’afficher un aperçu et de tester les modifications apportées au code du site sans avoir à basculer le contexte vers Power Pages studio de conception.

  • Ouvrir dans Power Pages design studio
    Après avoir apporté des modifications au code, utilisez cette action pour accéder à Power Pages studio de conception. Cela est utile pour configurer des fournisseurs d’authentification, des rôles web et d’autres paramètres de site qui ne sont pas modifiables dans l’éditeur de code.

  • Ouvrir dans VS Code Desktop
    Si VS Code Desktop est installé, cette action ouvre le site dans l’application de bureau. Il déclenche également un téléchargement de site, garantissant que le code est disponible localement et prêt à être modifié.

Vue des actions de Power Pages dans VS Code.

Notification de conflit de fusion

Si vous collaborez avec d’autres développeurs, il peut arriver que vous travailliez sur le même code source. Si vous tentez d’enregistrer les modifications apportées à un fichier obsolète, vous recevez une notification pour Comparer ou Remplacer les modifications.

La comparaison du code affiche le code actuel avec votre code et vous permet de rétablir les modifications existantes, d’accepter chaque modification individuellement ou d’utiliser vos modifications et de remplacer le contenu existant.

Conflits de fusion dans le code.

Vous pouvez consulter le contenu le plus récent et fusionner ou remplacer le code ou annuler les modifications.

Tutoriel : Modifier le code de site à l’aide de Visual Studio Code pour le web

Dans ce tutoriel, vous allez passer en revue la modification du code de site à l’aide de Visual Studio Code pour le web.

Étape 1 : Modifier le code du site à l’aide de Visual Studio Code pour le web

  1. Ouvrez votre site dans Power Pages studio de conception

  2. En haut à droite, sélectionnez Modifier le code

    Ouverture dans Visual Studio Code depuis le studio de design.

  3. Sélectionnez Open Visual Studio Code dans la boîte de dialogue de confirmation.

  4. Connectez-vous à Visual Studio Code à l’aide des informations d’identification de vos environnements.

  5. Attendez que l’extension web Power Platform Tools s’initialise et que le code de la page web se charge dans le volet gauche.

Étape 2 : Mettre à jour le contenu et le code

  1. L’explorateur sur le côté gauche de l’écran charge les métadonnées de configuration de site Web respectives qui peuvent être modifiées à l’aide de Visual Code pour le Web.

    Menu Explorateur pour un espace de travail sans titre affichant les fichiers web.

  2. Apportez des modifications aux fichiers de métadonnées respectifs et appuyez sur Ctrl+S pour enregistrer les modifications.

  3. Accédez au studio de conception et sélectionnez Synchroniser pour extraire toutes les mises à jour de votre session de studio de conception en cours.

    Interface pour permettre à l’utilisateur de sélectionner le bouton Synchroniser afin de synchroniser les modifications apportées dans Visual Studio Code vers le design studio.

  4. Sélectionnez Preview pour afficher les modifications sur le site Power Pages.

Utilisation de Visual Studio Code pour le Web ou Visual Studio Code Desktop

Les utilisateurs peuvent modifier, déboguer et afficher un aperçu des modifications apportées aux modifications de page à l’aide de Visual Studio Code pour le Web sans avoir besoin d’utiliser des outils externes. Visual Studio Code Desktop fournit d’autres fonctionnalités avancées pour modifier toutes les métadonnées de site et l’intégration à des processus de GitHub, de frameworks et d’intégration continue/de développement continu (CI/CD).

Fonctionnalité VS Code pour le web VS Code pour le bureau
Créer de nouveaux enregistrements de métadonnées de configuration de site Web Non Limité aux pages Web, aux modèles de page, aux modèles Web, aux extraits de contenu et aux fichiers Web.
Modification directe du site Oui Non
Modification des métadonnées du site Limité à la modification de pages Web, d’extraits de contenu, de formulaires de base, de formulaires à plusieurs étapes, de listes et de modèles Web. Toute la configuration des métadonnées de Power Pages
Aperçu du site Planifié Planifié
Support Power Platform CLI Non Oui
Flux de travail avancé lié au processeur et au stockage - Prise en charge de ReactJS ou d’autres outils de génération d’infrastructure Non Oui
Intégration GitHub avec des fonctions telles que l’enregistrement du code, le retrait, la gestion des conflits et la fusion. Non Oui

Modification du code dans l’application Gestion des portails

Note

  • L'utilisation de Visual Studio Code pour le web pour modifier les sites web n'est pas prise en charge dans le cloud de la communauté du gouvernement (GCC), le cloud de la communauté du gouvernement (GCC High) et le ministère de la Défense (DoD). Les utilisateurs de ces régions peuvent utiliser l’application Gestion du portail pour apporter leurs modifications.

Si la région ne prend pas en charge le Visual Studio Code pour le web, la sélection de l'icône de l'éditeur de code </> dans la barre de commandes ouvre l'application Portal Management.

Accédez aux enregistrements Pages Web, Formulaires de base, Formulaires à plusieurs étapes, Listes ou Modèles Web correspondants pour modifier le code.

Type Emplacement du code
Page Web Sélectionnez l’enregistrement de la page Web. Sélectionnez l’enregistrement du contenu de la page web dans la section Contenu localisé. La copie de la page peut être modifiée dans le champ Copie (HTML) de l'onglet Général. Le code JavaScript personnalisé et CSS personnalisé peut être modifié dans l'onglet Avancé.
Formulaire de base Sélectionner l’enregistrement de formulaire basique. Modifiez le code JavaScript personnalisé sous l’onglet Paramètres supplémentaires .
Formulaire à plusieurs étapes Sélectionnez l’enregistrement de formulaire à plusieurs étapes.Sélectionnez l’étape de formulaire multistep sous l’onglet Étapes du formulaire . Modifiez le code JavaScript personnalisé sous l’onglet Options de formulaire .
List Sélectionnez l'enregistrement de liste. Modifiez le code JavaScript personnalisé sous l’onglet Options .
Modèle web Sélectionnez l'enregistrement de modèle web. Modifiez la source sous l’onglet Général .

Sauvegardez l’enregistrement et prévisualisez votre site Web pour tester votre code.

Voir aussi

  • Last updated on