Comparteix via

Edició de codi amb Visual Studio Code per al web (versió preliminar)

[Aquest tema és documentació preliminar i està subjecte a canvis.]

Des del design studio, podeu editar el codi de lloc mitjançant Visual Studio Code per al web. Aquesta característica us permet editar el contingut estàtic, HTML, CSS, Liquid i JavaScript per a les metadades de lloc web següents:

Metadades Contingut
Formularis avançats (formularis de diversos passos) JavaScript
Formularis bàsics JavaScript
Fragments de contingut Tot el contingut de fragment de contingut compatible
Llistes JavaScript
Fitxers web Visualitzar i baixar fitxers multimèdia. Editar fitxers de text (codi).
Pàgines web Tot el contingut compatible (per llengua), JavaScript i CSS
Plantilles web Tot el contingut admès

Nota

No podreu crear registres de metadades, només afegir i editar contingut, codi i visualitzar o baixar fitxers adjunts.

Visual Studio Code per al web proporciona una experiència gratuïta d'instal·lació zero del Microsoft Visual Studio Code que s'executa completament al navegador i permet navegar pel codi del lloc i fer canvis amb el codi lleuger de manera ràpida i segura. Més informació: Visual Studio Code per a l'experiència web.

Important

  • Aquesta és una característica de visualització prèvia.
  • Les característiques de visualització prèvia no estan dissenyades per a un entorn de producció i poden tenir una funcionalitat restringida. Aquestes característiques estan disponibles abans d’un llançament oficial de producte per tal que els clients el puguin utilitzar abans i enviar-nos els seus comentaris.

Demostració de l'ús de Visual Studio Code per al web per editar el lloc de Power Pages.

Nota

  • La primera càrrega de Visual Studio Code per al web pot trigar una estona a instal·lar les extensions necessàries per a aquesta característica.
  • No s'admeten les operacions de creació, supressió i canvi de nom de fitxers.
  • Aquesta característica utilitza l'extensió web del Power Platform Tools . Les extensions web estan restringides pel sandbox del navegador i, per tant, tenen limitacions en comparació amb les extensions normals.
    • No s'admet la CLI del Power Platform.
    • Les característiques d'extensió web Power Platform Tools es limiten a l'experiència d'edició de codi de Power Pages.
    • Aquesta característica no està disponible al Government Community Cloud (GCC), al Government Community Cloud (GCC High) i al Departament de Defensa (DoD). Els usuaris d'aquestes regions utilitzaran l'Aplicació Administració de portals per editar el codi. Per obtenir més informació, vegeu Editar el codi a l'aplicació Administració de portals.

Editar el codi disponible a l'estudi de disseny

Podeu començar a editar el codi del lloc web mitjançant Visual Studio Codi per al web des de la pàgina d'inici Power Pages triant l'opció Edita el codi del lloc al menú desplegable Edita .

També podeu editar el codi a l'estudi de disseny des de les àrees següents:

Fem un cop d'ull a com editar el codi mitjançant aquestes àrees.

Editar el codi de pàgina web des de l'espai de treball Pàgines

Quan obriu l'estudi de disseny de Power Pages, veureu l'opció Edita el codi al menú Pàgines1 i a la part superior dreta de la pantalla2.

Editar codi des de l'espai de treball Pàgines.

Codi de plantilla de capçalera de l'espai de treball Pàgines

Seleccioneu Edita la capçalera del lloc i, a continuació, seleccioneu Edita el codi per obrir l'editor de codi.

Editar codi des de la capçalera Pàgines.

Editar codi CSS personalitzat des de l'espai de treball Creació d'estils

Aneu a l'espai de treball Creació d'estils i seleccioneu el menú personalitzat Edita el codi CSS per obrir l'editor de codi.

Editeu el codi de CSS personalitzat.

Visualització d'accions del Power Pages

La visualització Accions del Power Pages , accessible a la part inferior de l'Explorador de fitxers, us permet administrar els llocs del Power Pages directament dins de l'editor. Redueix la necessitat de canviar a Power Pages Design Studio permetent als desenvolupadors realitzar tasques comunes ràpidament des de l'editor.

Accions disponibles

  • Lloc de visualització prèvia
    Aquesta acció esborra la memòria cau de configuració i obre el lloc al VS Code. Permet als desenvolupadors previsualitzar i provar canvis al codi del lloc sense necessitat de canviar de context a Power Pages Design Studio.

  • Obre a l'estudi de disseny Power Pages
    Després de fer canvis de codi, utilitza aquesta acció per anar a Power Pages Design Studio. Això és útil per configurar proveïdors d'autenticació, funcions web i altres opcions de configuració del lloc que no es poden editar a l'editor de codi.

  • Obre a l'escriptori VS Code
    Si el VS Code Desktop està instal·lat, aquesta acció obre el lloc a l'aplicació d'escriptori. També activa una descàrrega del lloc, assegurant que el codi estigui disponible localment i llest per editar-lo.

Visualització Accions del Power Pages al VS Code.

Notificació de conflicte de combinació

Si col·laboreu amb altres desenvolupadors, pot haver-hi situacions en què treballareu en el mateix codi font. En cas que intenteu desar els canvis en un fitxer obsolet rebreu una notificació per comparar o sobreescriure els canvis.

En comparar el codi es mostrarà l'actual codi amb el vostre codi i us permetrà revertir en els canvis existents, acceptar cada canvi individualment o utilitzar els canvis i sobreescriure el contingut existent.

Conflictes de combinació a codi.

Podreu revisar l'últim contingut i combinar o sobreescriure el codi o rebutjar els canvis.

Tutorial: Editar el codi de lloc amb Visual Studio Code per al web

En aquest tutorial es descriu l'edició del codi del lloc mitjançant Visual Studio Code per a web.

Pas 1: Editar el codi del lloc mitjançant Visual Studio el codi per al web

  1. Obriu el lloc a l'estudi de disseny del Power Pages

  2. A l'extrem superior dret, seleccioneu Edita el codi

    Obertura de Visual Studio Code des de l'estudi de disseny.

  3. Seleccioneu Obre Visual Studio Code al quadre de diàleg de confirmació.

  4. Inicieu la sessió a Visual Studio Code amb les credencials de l'entorn.

  5. Espereu que l'extensió web Power Platform Tools s'inicialitzi i el codi de pàgina web es carregui a la subfinestra esquerra.

Pas 2: actualitzeu el contingut i el codi

  1. L'explorador de l'esquerra de la pantalla carrega les respectives metadades de configuració de lloc web que es poden editar amb Visual Code per al web.

    Menú Explorador per a un espai de treball sense títol que mostra els fitxers web.

  2. Feu canvis als fitxers de metadades respectius i premeu Ctrl + S per desar els canvis.

  3. Aneu a estudi de disseny i seleccioneu Sincronitza per obtenir totes les actualitzacions de la vostra sessió actual de l'estudi de disseny.

    Interfície per permetre a l'usuari seleccionar el botó Sincronització per sincronitzar els canvis fets a Visual Studio Code a l'estudi de disseny.

  4. Seleccioneu Versió preliminar per veure els canvis al lloc de Power Pages.

Ús Visual Studio de codi per al web o Visual Studio Code Desktop

Els usuaris poden editar, depurar i obtenir una visualització prèvia dels canvis fets a les edicions de pàgina mitjançant Visual Studio Code per a web sense haver de fer servir eines externes. Visual Studio Code Desktop proporciona altres funcions avançades per editar totes les metadades del lloc i integrar-se amb GitHub, marcs i processos d'integració/desenvolupament continu (CI/CD).

Característica VS Code per a la web Escriptori VS Code
Crear nous registres de metadades de configuració de lloc web No Limitat a pàgines web, plantilles de pàgina, plantilles web, fragments de contingut i fitxers web.
Edició directa del lloc Sí No
Edició de metadades del lloc Limitat a l'edició de pàgines web, fragments de contingut, formularis bàsics, formularis de diversos passos, llistes i plantilles web. Configuració de totes les metadades de Power Pages
Visualització prèvia del lloc Planejat Planejat
Power Platform Suport CLI No Sí
Flux de treball avançat de CPU i emmagatzematge - ReactJS o suport d'una altra eina de construcció de marcs No Sí
Integració del GitGitb amb capacitats com ara el check-in de codi, el check-out, l'administració de conflictes i la combinació. No Sí

Edició de codi a l'aplicació d'administració de portals

Nota

  • L'ús del Visual Studio Code per al web per editar llocs web no s'admet al Government Community Cloud (GCC), al Government Community Cloud (GCC High) i al Departament de Defensa (DoD). Els usuaris d'aquestes regions poden utilitzar l'aplicació Gestió del Portal per fer els seus canvis.

Si la regió no suporta el codi Visual Studio per a la web, seleccionar la icona <de l'editor de codi o> a la barra de comandes obrirà l'aplicació de Gestió del Portal.

Aneu a les pàgines web corresponents, formularis bàsics, formularis de diversos passos, llistes o registres de plantilles web per editar codi.

Type Ubicació del codi
Pàgina web Seleccioneu un registre de pàgina web.
Seleccioneu el registre de contingut de la pàgina web a la secció Contingut localitzat.
La còpia de la pàgina es pot editar al camp Còpia (HTML) de la pestanya General .
El JavaScript personalitzat i el codi personalitzat CSS es poden editar des de la pestanya Avançat .
Formulari bàsic Seleccioneu el registre de formulari bàsic. Editeu JavaScript personalitzat a la pestanya Configuració addicional .
Formulari de diversos passos Seleccioneu el registre de formulari de diversos passos.
Seleccioneu el pas de formulari de diversos passos a la pestanya Passos del formulari . Editeu JavaScript personalitzat a la pestanya Opcions de formulari .
Llista Seleccioneu el registre de la llista. Editeu JavaScript personalitzat a la pestanya Opcions .
Plantilla web Seleccioneu el registre de plantilla web. Edita el codi font a la pestanya General .

Deseu el registre i obteniu una visualització prèvia del lloc web per provar el codi.

Consulteu també

  • Last updated on