Compartilhar via

Editar código no Visual Studio Code para a Web (versão preliminar)

[Este tópico faz parte da documentação de pré-lançamento e está sujeito a alterações.]

No estúdio de design, você pode editar o código do site usando Visual Studio Code para a Web. Este recurso permite editar conteúdo estático, HTML, CSS, Liquid e JavaScript para os seguintes metadados do site:

Metadados Conteúdo
Formulários avançados (formulários de várias etapas) JavaScript
Formulários básicos JavaScript
Trechos de conteúdo Todo o conteúdo de trecho de conteúdo compatível
Listas JavaScript
Arquivos da Web Exibir e fazer download de arquivos de mídia. Editar arquivos de texto (código).
Páginas da Web Todo o conteúdo suportado (por idioma), JavaScript e CSS
Modelos da Web Todo conteúdo com suporte

Nota

Você não poderá criar registros de metadados, apenas adicionar e editar conteúdo, código e exibir/baixar anexos de arquivo.

O Visual Studio Code para a Web fornece uma experiência do Microsoft Visual Studio Code gratuita, sem instalação que é executada inteiramente em seu navegador, permitindo que você navegue pelo código do site e faça alterações pouco complexas de código com rapidez e segurança. Mais Informações: Experiência do Visual Studio Code para a Web.

Importante

  • Este é uma versão prévia do recurso.
  • As versões prévias do recurso não foram criadas para uso em ambientes de produção e podem ter funcionalidade restrita. Esses recursos são disponibilizados antes de um lançamento oficial para que os clientes possam ter acesso antecipado e forneçam comentários.

Demonstração de uso do Visual Studio Code para a Web para editar sites do Power Pages.

Nota

  • Na primeira vez, pode levar algum tempo para que o Visual Studio Code para a Web seja carregado, pois será necessário instalar extensões necessárias ao recurso.
  • Não há suporte para operações de Criação, Exclusão e Renomeação de Arquivos.
  • Esse recurso usa a extensão da Web do Power Platform Tools. As extensões da Web são restritas pela área restrita do navegador e, portanto, têm limitações em comparação com as extensões normais.
    • Não há suporte para a CLI do Power Platform.
    • Os recursos da extensão da Web do Power Platform Tools são limitados à experiência de edição de código do Power Pages.
    • Esse recurso não está disponível no Government Community Cloud (GCC), no Government Community Cloud (GCC High) e no Departamento de Defesa (DoD). Os usuários nessas regiões usarão o aplicativo Gerenciamento de Portais para editar o código. Consulte Editando código no aplicativo Gerenciamento de Portais para obter mais informações.

Editar código disponível no estúdio de design

Você pode começar a editar o código do seu site usando o Visual Studio Code para a Web na home page do Power Pages, escolhendo a opção Editar código do site no menu suspenso Editar.

Você também pode editar código no estúdio de design das seguintes áreas:

Vamos dar uma olhada em como editar código usando essas áreas.

Editar o código da página da Web no espaço de trabalho do Pages

Ao abrir o design studio do Power Pages, você vê a opção Editar código no menu do Pages1 e no canto superior direito da tela2.

Editar código no espaço de trabalho Páginas.

Código do modelo de cabeçalho do espaço de trabalho Páginas

Selecione Editar cabeçalho do site e selecione Editar código para abrir o editor de código.

Editar código no cabeçalho Páginas.

Editar código CSS personalizado no espaço de trabalho Aplicação de Estilo

Acesse Espaço de trabalho Aplicação de Estilo e selecione o menu Editar código do CSS personalizado para abrir o editor de código.

Editar código do CSS personalizado.

Exibição de ações do Power Pages

A exibição Ações do Power Pages , acessível na parte inferior do Explorador de Arquivos, permite que você gerencie sites do Power Pages diretamente no editor. Isso reduz a necessidade de mudar para o Power Pages Studio, permitindo que os desenvolvedores executem tarefas comuns rapidamente de dentro do editor.

Ações Disponíveis

  • Site de visualização
    Essa ação limpa o cache de configuração e abre o site no VS Code. Ele permite que os desenvolvedores visualizem e testem alterações no código do site sem a necessidade de alternar o contexto para o Power Pages Studio.

  • Abrir no Power Pages Studio
    Depois de fazer alterações de código, use essa ação para ir para o Power Pages Studio. Isso é útil para configurar provedores de autenticação, funções Web e outras configurações de site que não são editáveis no editor de código.

  • Abrir na Área de Trabalho do VS Code
    Se o VS Code Desktop estiver instalado, essa ação abrirá o site no aplicativo da área de trabalho. Ele também dispara um download de site, garantindo que o código esteja disponível localmente e pronto para edição.

Exibição de ações do Power Pages no VS Code.

Mesclar notificação de conflito

Se você estiver colaborando com outros desenvolvedores, poderá haver situações em que você trabalhará no mesmo código-fonte. Caso tente salvar alterações em um arquivo desatualizado, você receberá uma notificação para Comparar ou Substituir alterações.

A comparação do código mostrará o código atual ao lado do seu código e permitirá que você reverta para as alterações existentes, aceite cada alteração individualmente ou use suas alterações e substitua o conteúdo existente.

Mesclar conflitos no código.

Você poderá revisar o conteúdo mais recente e mesclar ou substituir o código ou descartar as alterações.

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

Neste tutorial, você passará pela edição do código do site usando o Visual Studio Code para Web.

Etapa 1: editar código do site usando o Visual Studio Code para a Web

  1. Abrir o site no Estúdio de design do Power Pages

  2. No canto superior direito, selecione Editar código

    Abrindo no Visual Studio Code do estúdio de design.

  3. Selecione Abrir Visual Studio Code na caixa de diálogo de confirmação.

  4. Entre no Visual Studio Code usando suas credencias de ambiente.

  5. Espere a extensão da Web do Power Platform Tools inicializar e o código da página da Web carregar no painel esquerdo.

Etapa 2: atualizar o conteúdo e o código

  1. O explorador no lado esquerdo da tela carrega os respectivos metadados de configuração do site que podem ser editados usando o Visual Code para a Web.

    Menu do Explorador de um espaço de trabalho sem título mostrando arquivos da Web.

  2. Faça alterações nos respectivos arquivos de metadados e pressione Ctrl+S para salvar as alterações.

  3. Acesse o estúdio de design e selecione Sincronizar para obter todas as atualizações em sua sessão do estúdio de design.

    Interface para permitir que o usuário selecione o botão Sincronizar para sincronizar as alterações feitas no Visual Studio Code com o estúdio de design.

  4. Selecione Versão preliminar para ver as alterações no site do Power Pages.

Usando Visual Studio Code para a Web ou o Visual Studio Code para Desktop

Os usuários podem editar, depurar e visualizar alterações nas edições de página usando o Visual Studio Code para a Web sem precisar usar ferramentas externas. O Visual Studio Code para Desktop fornece outros recursos avançados para edição de todos os metadados do site e integração com GitHub, estruturas e processos de integração/desenvolvimento contínuo (CI/CD).

Recurso Code VS para a Web Code VS para Desktop
Criar novos registros de metadados de configuração do site Não Limitado a páginas da web, modelos de página, modelos da Web, trechos de conteúdo e arquivos da Web.
Edição direta do site Sim Não
Edição de metadados do site Limitado à edição de páginas da Web, trechos de conteúdo, formulários básicos, formulários de várias etapas, listas e modelos da Web. Todas configurações de metadados do Power Pages
Versão preliminar do site Planejado Planejado
Suporte à CLI do Power Platform Não Sim
Fluxo de trabalho avançado associado à CPU e ligado ao armazenamento – suporte para ReactJS ou outra ferramenta de construção de framework Não Sim
Integração do GitHub com recursos como check-in e check-out de código, gerenciamento de conflitos e mesclagem. Não Sim

Editando código no aplicativo Gerenciamento de Portais

Nota

  • Não há suporte para o uso do Visual Studio Code para a Web para editar sites no GCC (Government Community Cloud), no Government Community Cloud (GCC High) e no Departamento de Defesa (DoD). Os usuários nessas regiões podem usar o aplicativo Gerenciamento de Portais para fazer suas alterações.

Se a região não for compatível com o Visual Studio Code para a Web, selecionar o ícone do editor de código </> na barra de comandos abrirá o aplicativo Gerenciamento de Portais.

Navegue até os registros Páginas da Web, Formulários Básicos, Formulários de Várias Etapas, Listas ou Modelos da Web correspondentes para editar o código.

Tipo Local do código
página da Web Selecionar registro da página da Web.
Selecione o registro de conteúdo da página da Web na seção Conteúdo Localizado.
A cópia da página pode ser editada no campo Copiar (HTML) na guia Geral.
JavaScript Personalizado e código CSS Personalizado pode ser editado da guia Avançado.
Formulário básico Selecione o registro do formato básico. Edite JavaScript Personalizado na guia Configurações Adicionais .
Formulário de várias etapas Selecione o registro de formulário de várias etapas.
Selecione a etapa de formulário de várias etapas na guia Etapas do Formulário . Edite JavaScript Personalizado na guia Opções de Formulário .
Lista Selecione o registro da lista. Edite JavaScript Personalizado na guia Opções .
Modelo da Web Selecione o registro do modelo da Web. Edite Fonte na guia Geral.

Salve o registro e visualize seu site para testar seu código.

Consulte também

  • Last updated on