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áginas1 e no canto superior direito do ecrã2.
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
Abra o seu site no estúdio de design do Power Pages
No canto superior direito, selecione Editar código
Selecione Abrir o Visual Studio Code na caixa de diálogo de confirmação.
Inicie sessão no Visual Studio Code com as suas credenciais do ambiente.
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
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.
Faça alterações aos respetivos ficheiros de metadados e prima Ctrl+S para guardar as alterações.
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.
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.