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

[Aquest tema és documentació prèvia a la publicació 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.

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.
• Les operacions File Create, Delete and Rename no estan admeses.
• Aquesta característica utilitza l'extensió web Power Platform Tools. Les extensions web estan restringides per l'espai aïllat del navegador i, per tant, tenen limitacions en comparació amb les extensions normals.
  • Power PlatformNo s’admet l'CLI.
  • Les característiques d'extensió web Power Platform Tools es limiten a l'experiència d'edició de codi de Power Pages.
  • Aquesta funció no està disponible a Government Community Cloud (GCC), Government Community Cloud (GCC High) i 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 Visual Studio del vostre lloc mitjançant Codi per al web des de la Power Pages pàgina d'inici triant l'opció Edita el codi del lloc al menú desplegable Edita .

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

• Editar el codi de pàgina web des de l'espai de treball Pàgines
• Codi de plantilla de capçalera de l'espai de treball Pàgines
• Editar codi CSS personalitzat des de l'espai de treball Creació d'estils
• Editar el codi JavaScript personalitzat per als formularis de diversos passos
• Editar el codi JavaScript personalitzat per als formularis bàsics
• Editar JavaScript personalitzat per a llistes
• Editar fragments de contingut
• Editar plantilles web
• Visualitzar i baixar fitxers web multimèdia (imatges)
• Editar fitxers web basats en text (CSS, JavaScript, altres)

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àgines¹ i a la part superior dreta de la pantalla².

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 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.

Notificació de conflicte de combinació

Si esteu col·laborant amb altres desenvolupadors, pot ser que hi hagi situacions en les quals estareu treballant en el mateix codi d'origen. 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.

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: editeu el codi del lloc mitjançant Visual Studio Codi per a la Web

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

2. A la part superior dreta, seleccioneu Editar el codi

   

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.

   

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.

   

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

Ús Visual Studio de codi per al web o Visual Studio codi de l'escriptori

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 característiques avançades per editar totes les metadades del lloc i integrar-se amb GitHub, marcs i processos d'integració contínua / desenvolupament continu (CI / CD).

Característica	VS Codi per a la Web	VS Codi Escriptori
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
Suport tècnic de Power Platform CLI	No	Sí
Flux de treball avançat lligat a la CPU i a l'emmagatzematge - Suport per a ReactJS o altres eines de creació 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 Visual Studio de Codi per al web per editar llocs web no és compatible amb Government Community Cloud (GCC), Government Community Cloud (GCC High) i Departament de Defensa (DoD). Els usuaris d'aquestes regions poden utilitzar l'aplicació Administració de portals per fer-hi els canvis.

Si la regió no admet Visual Studio Code per al web, si seleccioneu la icona de l'editor de codi </> a la barra d'ordres s'obrirà l'aplicació Administració de portals.

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 pàgina web de la secció Contingut localitzat. La còpia de la pàgina es pot editar al camp Copia (HTML) de la pestanya General . JavaScript personalitzat i codi CSS personalitzat es poden editar des de la pestanya Avançades.
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 llista. Editeu JavaScript personalitzat a la pestanya Opcions.
Plantilla web	Seleccioneu el registre de plantilla web. Editeu l'origen a la pestanya General.

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

Consulteu també

• Utilitzar Visual Studio Code i Microsoft Power Platform CLI