Edita codi amb Visual Studio Code per a la web (previsualització)

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

Des de l'estudi de disseny, pots editar el codi del lloc utilitzant Visual Studio Code per a la 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 a la Web ofereix una experiència gratuïta i sense instal·lació de Microsoft Visual Studio Code que funciona íntegrament al navegador, permetent-te navegar pel codi del lloc web i fer canvis lleugers de codi ràpidament i de manera 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

• Primera vegada Visual Studio Code per a la web la càrrega pot trigar una mica, ja que s'instal·laran les extensions necessàries per a aquesta funció.
• 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 funcionalitats d'extensió web de 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

Pots començar a editar el codi del teu lloc utilitzant Visual Studio Code for the Web des de la pàgina principal de Power Pages triant l'opció Edita el codi del lloc des del menú desplegable Edit.

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

• Editar el codi de la 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 el codi personalitzat CSS des de l'espai de treball Estil
• 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 obres Power Pages Design Studio, veus l'opció Edita codi al menú de Pàgines¹ i a la cantonada superior dreta de la pantalla².

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.

Vista d'accions de Power Pages

La vista Power Pages Accions, accessible a la part inferior de l'Explorador de fitxers, et permet gestionar Power Pages llocs directament des 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 en Power Pages estudi de disseny
  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.

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 del lloc utilitzant Visual Studio Code per a la Web

En aquest tutorial, repasses l'edició del codi del lloc utilitzant Visual Studio Code for Web.

Pas 1: Editar el codi del lloc utilitzant Visual Studio Code per a la Web

1. Obre el teu lloc a Power Pages estudi de disseny

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

   

3. Selecciona Obre Visual Studio Code des del diàleg de confirmació.

4. Inicia sessió a Visual Studio Code utilitzant les credencials del teu 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.

   

4. Selecciona Previsualització per veure els canvis al lloc Power Pages.

Ús de Visual Studio Code per a la Web o Visual Studio Code Desktop

Els usuaris poden editar, depurar i previsualitzar canvis en les edicions de pàgina utilitzant Visual Studio Code for the Web sense necessitat d'eines externes. Visual Studio Code Desktop ofereix altres funcions avançades per editar totes les metadades del lloc i integrar-se amb GitHub, frameworks i processos d'integració contínua/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ó de GitHub amb capacitats com el check-in de codi, el check-out, la gestió de conflictes i la fusió.	No	Sí

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

Nota

• L'ús de Visual Studio Code per a la Web per editar llocs web no és compatible amb Government Community Cloud (GCC), Government Community Cloud (GCC High) i el 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 Visual Studio Code per a la web, seleccionar la icona de l'editor de codi </> a la barra de comandes obrirà l'aplicació Portal Management.

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é

• Utilitza Visual Studio Code i Microsoft Power Platform CLI