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àgines1 i a la part superior dreta de la pantalla2.
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
Obriu el lloc a l'estudi de disseny del Power Pages
A la part superior dreta, seleccioneu Editar el codi
Seleccioneu Obre Visual Studio Code al quadre de diàleg de confirmació.
Inicieu la sessió a Visual Studio Code amb les credencials de l'entorn.
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
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.
Feu canvis als fitxers de metadades respectius i premeu Ctrl + S per desar els canvis.
Aneu a estudi de disseny i seleccioneu Sincronitza per obtenir totes les actualitzacions de la vostra sessió actual de l'estudi de disseny.
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.