Editar código con Visual Studio Code para a Web (vista previa)

[Este tema é documentación preliminar e está suxeito a cambios.]

Desde o estudio de deseño, podes editar o código do sitio usando Visual Studio Code para a web. Esta función permítelle editar contido estático, HTML, CSS, Liquid e JavaScript para os seguintes metadatos do sitio web:

Metadatos Contido
Formularios avanzados (formularios con varios pasos) JavaScript
Formularios básicos JavaScript
Fragmentos de contido Todo o contido compatible con fragmentos de contido
Listas JavaScript
Ficheiros web Ver e descargar ficheiros multimedia. Editar ficheiros de texto (código).
Páxinas web Todo o contido compatible (por idioma), JavaScript e CSS
Modelos web Todos os contidos admitidos

Nota

Non poderás crear rexistros de metadatos, só engadir e editar contido, código e ver / descargar anexos de ficheiros.

Visual Studio Code para a Web ofrece unha experiencia gratuíta de Microsoft Visual Studio Code sen instalacións que funciona integramente no teu navegador, permitindo que navegues polo código do sitio e fagas cambios lixeiros de código rápida e segura. Máis información: Visual Studio Code para a experiencia web.

Importante

  • Esta é unha funcionalidade de vista previa.
  • As funcionalidades de vista previa non se deseñaron para uso de produción e poden ter funcionalidade restrinxida. Estas funcionalidades están dispoñibles antes da versión oficial para que os clientes poidan obter acceso a elas rápido e fornecer comentarios.

Demo de usar Visual Studio Code para web para editar Power Pages sitio.

Nota

  • Primeira vez Visual Studio Code para a Web carga pode levar tempo xa que instalará as extensións necesarias para esta función.
  • Non se admiten as operacións de creación, eliminación e cambio de nome de ficheiros.
  • Esta funcionalidade usa a extensión web de Power Platform Tools . As extensións web están restrinxidas polo sandbox do navegador e, polo tanto, teñen limitacións en comparación coas extensións normais.
    • A CLI de Power Platform non está soportada.
    • As funcións de extensión web de Power Platform Tools limítanse á experiencia de edición de código en Power Pages.
    • Esta función non está dispoñible en Government Community Cloud (GCC), Government Community Cloud (GCC High) e Department of Defense (DoD). Os usuarios destas rexións utilizarán a aplicación Xestión de portais para editar o código. Consulte Edición de código na aplicación Xestión de portais para obter máis información.

Editar código dispoñible no estudio de deseño

Podes comezar a editar o código do teu sitio usando Visual Studio Code for the Web desde a páxina principal de Power Pages elixindo a opción Editar código do sitio no menú despregable Edit.

Tamén podes editar código no estudo de deseño desde as seguintes áreas:

Vexamos como editar código usando estas áreas.

Editar o código da páxina web desde o espazo de traballo de Pages

Cando abres Power Pages estudio de deseño, ves a opción Editar código no menú de Páxinas1 e na esquina superior dereita da pantalla2.

Edite o código desde a área de traballo de páxinas.

Código do modelo de cabeceira do espazo de traballo de Pages

Seleccione Editar a cabeceira do sitio e, a seguir, seleccione Editar código para abrir o editor de código.

Edite o código desde a cabeceira de Páxinas.

Editar personalizado CSS código do espazo de traballo de estilos

Vaia á área de traballo de estilo e seleccione o menú Editar código de CSS personalizado para abrir o editor de código.

Editar código desde CSS personalizado.

Vista de accións de Power Pages

A vista Power Pages Accións, accesible na parte inferior do Explorador de Ficheiros, permíteche xestionar Power Pages sitios directamente desde o editor. Reduce a necesidade de cambiar a Power Pages Design Studio ao permitir que os desenvolvedores realicen tarefas comúns rapidamente desde dentro do editor.

Accións dispoñibles

  • Vista previa do sitio
    Esta acción limpa a caché de configuración e abre o sitio en VS Code. Permite aos desenvolvedores previsualizar e probar cambios no código do sitio sen necesidade de cambiar de contexto a Power Pages Design Studio.

  • Aberto no Power Pages estudio de deseño
    Despois de facer cambios no código, usa esta acción para ir a Power Pages design studio. Isto é útil para configurar provedores de autenticación, roles web e outras configuracións do sitio que non son editables no editor de código.

  • Abrir no escritorio de VS Code
    Se VS Code Desktop está instalado, esta acción abre o sitio na aplicación de escritorio. Tamén desencadea unha descarga do sitio, asegurando que o código está dispoñible localmente e listo para a edición.

Power Pages Vista de accións en VS Code.

Combinar a notificación de conflitos

Se estás colaborando con outros desenvolvedores, pode haber situacións nas que traballarás no mesmo código fonte. No caso de que intente gardar os cambios nun ficheiro obsoleto, recibirá unha notificación para Comparar ou Sobrescribir os cambios.

Ao comparar o código, amosarase o código actual xunto co seu código e permitiralle volver aos cambios existentes, aceptar cada cambio individualmente ou usar os seus cambios e sobrescribir os contidos existentes.

Combinar conflitos no código.

Poderá revisar o contido máis recente e combinar ou sobrescribir o código ou descartar os cambios.

Tutorial: Editar código do sitio usando Visual Studio Code para a Web

Neste tutorial, explicas como editar o código do sitio usando Visual Studio Code for Web.

Paso 1: Editar o código do sitio usando Visual Studio Code para a Web

  1. Abre o teu sitio en Power Pages estudio de deseño

  2. Na esquina superior dereita, seleccione Editar código

    Apertura en Visual Studio Code desde o estudio de deseño.

  3. Seleccione Open Visual Studio Code no diálogo de confirmación.

  4. Inicia sesión en Visual Studio Code usando as credenciais do teu entorno.

  5. Agarde a que a extensión web Power Platform Tools se inicie e o código da páxina web se cargue no panel esquerdo.

Paso 2: Actualizar o contido e o código

  1. O explorador da parte esquerda da pantalla carga os respectivos metadatos de configuración do sitio web que se poden editar mediante Visual Code para a web.

    Menú de explorador para unha área de traballo sen título que mostra ficheiros web.

  2. Faga cambios nos ficheiros de metadatos respectivos e prema Ctrl+S para gardar os cambios.

  3. Vaia ao estudio de deseño e seleccione Sincronizar para sacar todas as actualizacións da súa sesión actual do estudio de deseño.

    Interface para permitir ao usuario seleccionar o botón Sincronizar e sincronizar cambios feitos en Visual Studio Code a Design Studio.

  4. Seleccione Vista previa para ver cambios no sitio Power Pages.

Uso de Visual Studio Code para a web ou Visual Studio Code Desktop

Os usuarios poden editar, depurar e previsualizar cambios nas edicións de páxina usando Visual Studio Code para a Web sen necesidade de usar ferramentas externas. Visual Studio Code Desktop ofrece outras funcións avanzadas para editar todos os metadatos do sitio e integrarse con GitHub, frameworks e procesos de integración continua/desenvolvemento continuo (CI/CD).

Funcionalidade Código VS para a web Escritorio VS Code
Crear novos rexistros de metadatos de configuración do sitio web Non Limitado a páxinas web, modelos de páxinas, modelos web, fragmentos de contido e ficheiros web.
Edición directa do sitio Si Non
Edición de metadatos do sitio Limitado á edición de páxinas web, fragmentos de contido, formularios básicos, formularios con varios pasos, listas e modelos web. Configuración de todos os metadatos de Power Pages
Previsualización do sitio Planificado Planificado
Power Platform CLI apoio Non Si
Fluxo de traballo avanzado de CPU e almacenamento - ReactJS ou outra ferramenta de construción de frameworks Non Si
Integración de GitHub con capacidades como rexistro de código, desactivación, xestión de conflitos e fusión. Non Si

Edición de código na aplicación Xestión de portais

Nota

  • O uso de Visual Studio Code para a Web para editar sitios web non está soportado en Government Community Cloud (GCC), Government Community Cloud (GCC High) e no Departamento de Defensa (DoD). Os usuarios destas rexións poden usar a aplicación Xestión do Portal para facer os seus cambios.

Se a rexión non soporta o Visual Studio Code para a Web, seleccionar o icono do editor de código </> na barra de comandos abrirá a aplicación Portal Management.

Navegue aos correspondentes rexistros de Páxinas web, Formularios básicos, Formularios con varios pasos, Listas ou Modelos web para editar código.

Tipo Localización do código
páxina web Seleccione o rexistro da páxina web.
Seleccionar rexistro de contido da páxina web desde o contido localizado sección.
O texto da páxina pódese editar no Copiar (HTML) campo no Xeral pestana.
JavaScript personalizado e Personalizado CSS o código pódese editar desde o Avanzado pestana.
Formulario básico Seleccione o rexistro básico do formulario. Edite JavaScript personalizado na pestana Configuración adicional .
Formulario con varios pasos Seleccione o rexistro de formulario de varios pasos.
Seleccione o paso do formulario en varios pasos na pestana Pasos do formulario . Edite JavaScript personalizado na pestana Opcións do formulario .
Lista Seleccione o rexistro da lista. Editar JavaScript personalizado na pestana Opcións .
Modelo web Seleccione o rexistro do modelo web. Editar a fonte na pestana Xeral .

Garde o rexistro e previsualice o seu sitio web para probar o seu código.

Ver tamén

  • Last updated on