Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
[Este tópico é documentação de pré-lançamento e está sujeito a alterações.]
A partir do estúdio de design, pode editar o código do site usando 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
Você não poderá criar registros de metadados, apenas adicionar e editar conteúdo, código e visualizar/baixar anexos de arquivos.
O Visual Studio Code para a Web oferece uma experiência gratuita e sem instalação do Microsoft Visual Studio Code, que corre inteiramente no seu navegador, permitindo-lhe navegar pelo código do site e fazer alterações leves de código rápida e segura. Mais informações: Visual Studio Code para a experiência Web.
Importante
- Esta é uma funcionalidade 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 carregamento do Visual Studio Code para a Web na primeira vez pode demorar algum tempo, já que irá instalar as extensões necessárias para esta funcionalidade.
- As operações Criar, Excluir e Renomear Arquivos não são suportadas.
- Este recurso usa a extensão web 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.
- A CLI da Power Platform não é suportada.
- As funcionalidades de extensão web do Power Platform Tools limitam-se à 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 Department of Defense (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 for the Web a partir da página inicial Power Pages escolhendo a opção Editar código do site no menu suspenso Edit.
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 arquivos da 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 abres Power Pages design studio, vês a opção Editar código no menu Páginas1 e no canto superior direito do ecrã2.
Editar código a partir da área de trabalho Páginas.
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 a partir do cabeçalho de Páginas.
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.
Editar código a partir do CSS Personalizado.
Power Pages Vista de Ações
A vista Ações do Power Pages, acessível na parte inferior do Explorador de Ficheiros, permite-lhe gerir sites do Power Pages diretamente no editor. Reduz a necessidade de mudar para o Power Pages design studio, permitindo que os programadores realizem tarefas comuns rapidamente a partir do próprio editor.
Ações disponíveis
Site de pré-visualização
Esta ação limpa o cache de configuração e abre o site no VS Code. Permite aos programadores pré-visualizar e testar alterações ao código do site sem necessidade de mudar de contexto para o Power Pages Design Studio.Abrir no estúdio de design Power Pages
Depois de fazer alterações no código, use esta ação para ir ao Power Pages Design 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ódigos.Abrir no VS Code Desktop
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 do site, garantindo que o código esteja disponível localmente e pronto para edição.
Unir notificação de conflito
Se você estiver colaborando com outros desenvolvedores, pode haver situações em que você estará trabalhando no mesmo código-fonte. 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.
Una conflitos no código.
Poderá rever o conteúdo mais recente e unir ou substituir o código ou eliminar as alterações.
Tutorial: Editar código do site usando o Visual Studio Code for the Web
Neste tutorial, percorre a edição do código do site usando o Visual Studio Code for Web.
Passo 1: Editar o código do site usando o Visual Studio Code for the Web
Abra o seu site em Power Pages design studio
No canto superior direito, selecione Editar código
Selecione Open Visual Studio Code no diálogo de confirmação.
Inicie sessão no Visual Studio Code usando as credenciais do seu 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.
Menu do Explorer para uma área de trabalho sem título a mostrar os ficheiros 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é-visualização para ver alterações no site Power Pages.
Utilização do Visual Studio Code para a Web ou Visual Studio Code Desktop
Os utilizadores podem editar, depurar e pré-visualizar alterações às edições de página usando o Visual Studio Code for the Web sem necessidade de recorrer a ferramentas externas. O Visual Studio Code Desktop oferece outras funcionalidades avançadas para editar todos os metadados do site e integrar com GitHub, frameworks 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. | Toda a configuração de metadados do Power Pages |
| Pré-visualização do site | Planeado | Planeado |
| Suporte para a Power Platform CLI | Não | Sim |
| Fluxo de trabalho avançado de CPU e limitado pelo armazenamento - Suporte ao ReactJS ou outra ferramenta de compilação para frameworks | Não | Sim |
| Integração com o GitHub com funcionalidades como realizar check-in e check-out de código, gerir conflitos e fundir. | Não | Sim |
Editar código na aplicação Gestão de Portais
Nota
- O uso do Visual Studio Code para a Web para editar sites não é suportado no Government Community Cloud (GCC), Government Community Cloud (GCC High) e no Departamento de Defesa (DoD). Os utilizadores destas regiões podem usar a aplicação Portal Management para fazer as suas alterações.
Se a região não suportar o Visual Studio Code para a Web, selecionar o ícone do editor de código </> na barra de comandos abrirá a aplicação de gestão Portal.
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.
| Tipo | 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 formulário básico apropriado. Edite JavaScript personalizado na guia Configurações adicionais. |
| Formulário com vários passos | Selecione o registro de formulário em 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 . |
| Listar | Selecione o registo de lista. Edite JavaScript personalizado na guia Opções. |
| Modelo Web | Selecione o registro do modelo da Web. Editar Fonte na aba Geral. |
Guarde o registo e pré-visualize o site para testar o código.