Editar código com o Visual Studio Code para a Web (pré-visualização)

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

A partir do estúdio de design, pode editar código do site utilizando o Visual Studio Code para a Web. Esta caraterística permite-lhe 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ários passos)	JavaScript
Formulários básicos	JavaScript
Fragmentos de conteúdo	Todo o conteúdo suportado de fragmentos de conteúdo
Listas	JavaScript
Ficheiros web	Veja e transfira ficheiros de suporte de dados. Edite ficheiros de texto (código).
Páginas web	Todo o conteúdo suportado (por idioma), JavaScript e CSS
Modelos Web	Todo o conteúdo suportado

Nota

Não poderá criar registos de metadados, só adicionar e editar conteúdo, código e ver/transferir anexos de ficheiros.

O Visual Studio Code para a Web proporciona uma experiência de Microsoft Visual Studio Code gratuita sem instalação que é executada completamente no browser, permitindo-lhe navegar no código do site e efetuar alterações ligeiras, rápidas e seguras ao código. Mais informações: Experiência Visual Studio Code para a Web.

Importante

• Esta é uma caraterística de pré-visualização.
• As caraterísticas de pré-visualização não se destinam à produção e poderão ter caraterísticas restritas. Estas caraterísticas estão disponíveis antes do lançamento oficial, para que os clientes possam ter acesso antecipadamente e enviar comentários.

Nota

• O primeiro carregamento do Visual Studio Code para a Web poderá demorar algum tempo pois irá instalar as extensões necessárias para esta caraterística.
• As operações Criar, Eliminar e Mudar o nome não são suportadas.
• Esta caraterística utiliza a extensão Web Power Platform Tools. As extensões Web são restringidas pelo sandbox do browser e, consequentemente, têm limitações comparativamente às extensões normais.
  • Power PlatformO CLI não é suportado.
  • As caraterísticas da extensão Web Power Platform Tools estão limitadas à experiência de edição de código do Power Pages.
  • Esta caraterística não está disponível na Nuvem da Administração Pública (GCC), Nuvem da Administração Pública (GCC High) e Departamento de Defesa (DoD). Os utilizadores nestas regiões irão utilizar a aplicação Gestão de Portais para editar código. Consulte Editar código na aplicação Gestão de Portais para obter mais informações.

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

Pode começar a editar o código do seu site usando o Visual Studio Code para a Web na página inicial do Power Pages escolhendo a opção Editar código do site a partir do menu pendente Editar.

Também pode editar código no estúdio de design a partir das seguintes áreas:

• Editar código da página Web a partir da área de trabalho Páginas
• Código do modelo do cabeçalho a partir da área de trabalho Páginas
• Editar código CSS personalizado a partir da área de trabalho Estilos
• Editar código JavaScript personalizado para formulários de vários passos
• Editar código JavaScript personalizado para formulários básicos
• Editar JavaScript personalizado para listas
• Editar fragmentos de conteúdo
• Editar modelos web
• Ver e transferir ficheiros web de suporte de dados (imagens)
• Editar ficheiros web baseados em texto (CSS, JavaScript, outros)

Vejamos como editar código utilizando estas áreas.

Editar código da página Web a partir da área de trabalho Páginas

Quando abre o estúdio de design do Power Pages, vê a opção Editar código no menu Páginas¹ e no canto superior direito do ecrã².

Código do modelo do cabeçalho a partir da área de trabalho Páginas

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

Editar código CSS personalizado a partir da área de trabalho Estilos

Aceda à Área de trabalho Estilos e selecione o menu Editar código do CSS personalizado para abrir o editor de código.

Unir notificação de conflito

Se estiver a colaborar com outros programadores, pode haver situações em que irá trabalhar no mesmo código de origem. Se tentar guardar alterações num ficheiro desatualizado, receberá uma notificação para Comparar ou Substituir alterações.

A comparação do código irá mostra o código atual juntamente com o seu código e permitirá reverter para as alterações existentes, aceitar cada alteração individualmente ou utilizar as alterações e substituir o conteúdo existente.

Poderá rever o conteúdo mais recente e unir ou substituir o código ou eliminar as alterações.

Tutorial: Editar código de site utilizando o Visual Studio Code para a Web

Neste tutorial, pode editar o código do site utilizando o Visual Studio Code para a Web.

Passo 1: Editar código do site utilizando o Visual Studio Code para a Web

1. Abra o seu site no estúdio de design do Power Pages

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

   

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

4. Inicie sessão no Visual Studio Code com as suas credenciais do ambiente.

5. Aguarde que a extensão Web Power Platform Tools seja inicializada e que o código de página Web seja carregado no painel à esquerda.

Passo 2: Atualizar conteúdo e código

1. O explorador no lado esquerdo do ecrã carrega os respetivos metadados de configuração de sites que podem ser editados utilizando o Visual Code para a Web.

   

2. Faça alterações aos respetivos ficheiros de metadados e prima Ctrl+S para guardar as alterações.

3. Aceda ao estúdio de design e selecione Sincronizar para ver todas as atualizações na sua sessão atual do estúdio de design.

   

4. Selecione Pré-visualizar para ver alterações no site do Power Pages.

Utilizar o Visual Studio Code para a Web ou o Visual Studio Code de Ambiente de Trabalho

Os utilizadores podem editar, depurar e pré-visualizar alterações a edições de página com o Visual Studio Code para a Web sem necessitarem de utilizar ferramentas externas. O Visual Studio Code de Ambiente de Trabalho fornece outras funcionalidades avançadas para editar todos os metadados do site e integrar com o GitHub, estruturas e processos de integração contínua/desenvolvimento contínuo (CI/CD).

Caraterística	VS Code para a Web	VS Code de Ambiente de Trabalho
Crie novos registos de metadados de configuração do site	Não	Limitado a páginas web, modelos de página, modelos web, fragmentos de conteúdo e ficheiros web.
Edição direta de sites	Sim	Não
Edição de metadados de sites	Limitado a edição de páginas web, fragmentos de conteúdo, formulários básicos, formulários de vários passos, listas e modelos web.	Configuração de todos os metadados do Power Pages
Pré-visualização do site	Planeado	Planeado
Suporte para a CLI da Power Platform	Não	Sim
CPU avançada e fluxo de trabalho vinculado ao armazenamento – ReactJS ou outro suporte de ferramentas de compilação de arquitetura	Não	Sim
Integração com o GitHub com capacidades como dar entrada, dar saída, gerir conflitos e unir.	Não	Sim

Editar código na aplicação Gestão de Portais

Nota

• A utilização do Visual Studio Code para a Web para editar sites não é suportada na Nuvem da Administração Pública (GCC), Nuvem da Administração Pública (GCC High) e Departamento de Defesa (DoD). Os utilizadores nestas regiões podem utilizar a aplicação Gestão de Portais para fazerem as alterações necessárias.

Se a região não suportar o Visual Studio Code para a Web, a seleção do ícone de editor de códigos </> na barra de comandos abrirá a aplicação Gestão de Portais.

Navegue para os registos Páginas Web, Formulários Básicos, Formulários de Vários Passos, Listas ou Modelos Web correspondentes para editar código.

Type	Localização do código
Página Web	Selecione o registo de página Web. Selecione o registo de conteúdo da página Web a partir da secção Conteúdo Localizado. A cópia de página pode ser editada no campo Copiar (HTML) no separador Geral. O código JavaScript Personalizado e CSS Personalizado pode ser editado a partir do separador Avançadas.
Formulário básico	Selecione o registo de formulário básico. Edite JavaScript Personalizado no separador Definições Adicionais .
Formulário com vários passos	Selecione o registo de formulário de vários passos. Selecione o passo do formulário de vários passos no separador Passos de Formulário. Edite JavaScript Personalizado no separador Opções de Formulário.
List	Selecione o registo de lista. Edite JavaScript Personalizado no separador Opções .
Modelo Web	Selecione o registo de modelo Web. Edite Origem no separador Geral.

Guarde o registo e pré-visualize o site para testar o código.

Consulte também

• Utilizar o Visual Studio Code e a CLI do Microsoft Power Platform