Componentes da página
Depois de criar uma página, adicione componentes para criar o layout e inclua conteúdo estático e dinâmico. Essa abordagem de design simples adiciona o HTML, O CSS ou o código correspondentes à página sem exigir que você conheça a estrutura ou a sintaxe desses idiomas.
Para adicionar uma seção, selecione qualquer seção existente na página, selecione o sinal de adição (+) ou Adicione uma seção e escolha entre um dos layouts de seção disponíveis.
Dica
Você pode alterar o layout da seção mais tarde.
Para adicionar um componente, selecione uma seção vazia ou um elemento existente onde você deseja colocar o componente. Use o sinal de mais (+) ou o botão de estouro (...) para exibir todos os componentes disponíveis e selecione um componente para inserir.
Há dois tipos de componentes:
Os componentes padrão criam o layout da página e o conteúdo estático.
Componentes conectados a dados exibem conteúdo dinâmico e interativo com base em dados do Dataverse.
Todas as seções e componentes dão suporte à edição no contexto. Você pode editar qualquer seção ou componente diretamente da tela. Quando você seleciona uma seção ou um componente, um menu de contexto é exibido. Você pode ajustar as propriedades do elemento selecionado, como alinhamento, estilo, cor, tamanho e muito mais. Para obter mais informações, consulte Personalizar páginas da Web para obter mais detalhes sobre os componentes disponíveis e suas propriedades.
Código-fonte
Muitas vezes, você precisa de elementos que não estão disponíveis como componentes do design studio. Uma página pode precisar de um layout e formatação mais complexos ou pode precisar de mais CSS ou JavaScript. Você pode criar esses requisitos no Visual Studio Code para a Web. Criadores e desenvolvedores profissionais podem usar este editor para exibir e modificar o código-fonte da página e CSS e JavaScript associados.
Para exibir o código-fonte da página, selecione Editar código na barra de comandos.
Ao selecionar Editar código, você será redirecionado para o Visual Studio Code para a Web para fazer suas edições na página HTML, CSS ou JavaScript. Depois de salvar o código-fonte, as alterações sincronizam e aparecem na tela.
Aviso
Você poderá danificar o layout da página se inserir uma sintaxe incorreta no código-fonte. Crie uma cópia do código original antes de fazer qualquer alteração significativa.
Copilot no espaço de trabalho Pages
O Copilot está integrado em todo o espaço de trabalho do Pages para ajudar você a criar e preencher o conteúdo com mais rapidez.
Texto gerado por IA
Selecione qualquer componente de texto na tela e, em seguida, selecione o botão Copilot na barra de ferramentas. Descreva o texto desejado e Copilot gera cópia para você. Esse recurso está em disponibilidade geral.
Formulário gerado por IA
Ao adicionar um componente, selecione Form e, em seguida, escolha criar o formulário com Copilot. Descreva o formulário em linguagem natural e Copilot cria automaticamente a tabela, o formulário e o componente de formulário básico do Dataverse. Esse recurso geralmente está disponível em todas as regiões, exceto DoD.
Formulário de várias etapas gerado por IA (prévia)
Você também pode usar Copilot para criar um formulário de várias etapas. No sidecar Copilot, descreva o formulário de várias etapas de que você precisa e Copilot cria um formulário com uma ou mais etapas com base em sua descrição. Uma visualização do formulário é exibida na tela para você examinar antes de adicioná-lo à página. Se já existirem tabelas relevantes no Dataverse, Copilot sugerirá usá-las; caso contrário, uma nova tabela será criada automaticamente.
Assistência de preenchimento de formulário de IA (versão prévia)
Ao adicionar um componente de formulário a uma página, você pode habilitar a assistência de preenchimento de formulário de IA para ajudar os usuários do site a preencher formulários com mais facilidade. Esse recurso extrai informações relevantes de anexos carregados e preenche automaticamente os campos de formulário. Ele também permite que os usuários reescrevam entradas de texto de várias linhas usando a assistência de rascunho de IA. Habilite essa opção nas configurações do componente de formulário.
Adicionar uma seção com Copilot
Use o sidecar do Copilot para descrever uma seção e peça ao Copilot para adicioná-la à página.
Código gerado por IA (versão prévia)
Ao abrir uma página no Visual Studio Code para a Web usando Edit code, você pode usar Copilot para gerar código HTML, JavaScript e CSS usando linguagem natural. Descreva o comportamento desejado no painel de chat Copilot e Copilot gera um snippet de código que você pode copiar ou inserir diretamente. Você também pode selecionar o código existente e usar a opção Explicar para obter uma explicação em linguagem simples do que ele faz.
Note
Copilot para geração de código é ajustado para linguagens com suporte Power Pages (HTML, JavaScript, CSS) e estruturas como Bootstrap e jQuery. Verifique se os nomes de tabela e coluna gerados estão corretos antes de usar o código em seu site.
Componente de pesquisa com IA generativa (versão prévia)
Você pode adicionar um componente de Pesquisa a qualquer página para permitir que os usuários do site pesquisem seu site usando consultas de linguagem natural. O componente inclui uma barra de pesquisa e um resumo gerado por IA dos resultados. Para usar a versão com IA, primeiro, você deve habilitar a Generative AI Search para o site. Adicione o componente no painel de componentes no espaço de trabalho Páginas.
Recursos de IA em uma lista (versão prévia)
Os componentes da lista de dados dão suporte a dois aprimoramentos alimentados por IA para usuários do site:
Resumo da IA – gera automaticamente resumos concisos e visualizações de gráfico dos dados na lista. Habilite essa opção ao criar uma nova lista ou ative essa opção em uma lista existente selecionando Editar lista e ativando Resumo por IA da lista.
Pesquisa de idioma natural – permite que os usuários filtrem e pesquisem dados de lista usando consultas de conversa. Habilite isso nas configurações de lista em Mais opções>Habilitar pesquisa nesta lista>Pesquisa com idioma natural.
Para obter mais informações, consulte Adicionar recursos de IA em uma lista na documentação do Power Pages.