Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
[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.
Visual Studio Code para a Web fornece uma experiência gratuita de instalação zero do Microsoft Visual Studio Code em execução inteira no navegador, permitindo que você navegue pelo código do site e faça alterações de código leves de forma rápida e segura. Mais informações: Visual Studio Code para a experiência 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.
Nota
- A carga do Visual Studio Code para a Web pela primeira vez pode levar algum tempo, pois instalará as extensões necessárias para esta funcionalidade.
- 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 de 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 na Web, na página inicial do Power Pages, escolhendo a opção Edit site code no menu suspenso Edit.
Você também pode editar código no estúdio de design das seguintes áreas:
- Editar o código da página da Web no espaço de trabalho do Pages
- Código do modelo de cabeçalho do espaço de trabalho do Pages
- Editar código CSS personalizado no espaço de trabalho Aplicação de Estilo
- Editar código JavaScript personalizado para formulários de várias etapas
- Editar código JavaScript personalizado para formulários básicos
- Editar JavaScript personalizado para listas
- Editar trechos de conteúdo
- Editar modelos da Web
- Exibir e fazer download de arquivos de mídia da Web (imagens)
- Editar arquivos Web baseados em texto (CSS, JavaScript, outros)
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 Power Pages estúdio de design, você verá a opção Edit code no menu Páginas1 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.
Modo de exibição de ações do Power Pages
A exibição Power Pages Actions, acessível na parte inferior do Explorador de Arquivos, permite gerenciar Power Pages sites diretamente no editor. Isso reduz a necessidade de mudar para Power Pages estúdio de design, 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 Power Pages estúdio de design.Abrir no estúdio de design do Power Pages
Depois de fazer alterações de código, use essa ação para ir para o estúdio de design do Power Pages. 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.
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 Visual Studio Code para a Web
Neste tutorial, você percorre a edição do código do site usando Visual Studio Code para a Web.
Etapa 1: Editar código do site usando Visual Studio Code para a Web
Abra seu site no Power Pages design studio
No canto superior direito, selecione Editar código
Selecione Open Visual Studio Code na caixa de diálogo de confirmação.
Entre em Visual Studio Code usando suas credenciais de ambientes.
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
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.
Faça alterações nos respectivos arquivos de metadados e pressione Ctrl+S para salvar as alterações.
Acesse o estúdio de design e selecione Sincronizar para obter todas as atualizações em sua sessão do estúdio de design.
Selecione Preview para ver as alterações no site Power Pages.
Usando Visual Studio Code para a Web ou Visual Studio Code Desktop
Os usuários podem editar, depurar e visualizar alterações nas edições de página usando Visual Studio Code para a Web sem a necessidade de usar ferramentas externas. Visual Studio Code Desktop fornece outros recursos avançados para editar todos os metadados do site e integrar com GitHub, estruturas e processos de CI/CD (integração contínua/desenvolvimento contínuo).
| 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. | Configuração de todos os 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 com o GitHub com recursos como registro de código, retirada, gerenciamento de conflitos e fusão. | 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 Government Community Cloud (GCC), no Government Community Cloud (GCC High) ou no Departamento de Defesa (DoD). Os usuários nessas regiões podem usar o aplicativo Gerenciamento de Portal para fazer suas alterações.
Se a região não der suporte ao Visual Studio Code para a Web, selecionar o ícone do editor de código </> na barra de comandos abrirá o aplicativo Portal Management.
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.