Compartilhar via

Tutorial: configurar o controle rich text editor em portais

Observação

Desde o dia 12 de outubro de 2022, os portais do Power Apps passaram a ser Power Pages. Mais Informações: O Microsoft Power Pages já está disponível para todos (blog)
Em breve, migraremos e mesclaremos a documentação dos portais do Power Apps com a documentação do Power Pages.

Neste tutorial, você configurará os portais do Power Apps para adicionar o controle rich text editor a um formulário básico e, em seguida, adicionar o formulário básico a uma página da Web. Os usuários do portal poderão interagir com o controle rich text editor para formatar o texto no formulário.

Pré-requisitos

Sua versão do portal deve ser a 9.4.3.x ou superior.

Etapa 1. Adicionar o controle rich text editor a uma coluna em um aplicativo baseado em modelo

Siga os passos do tutorial Adicionar ou substituir uma coluna de texto para edição de rich text para adicionar o componente a uma coluna em um formulário baseado em modelo.

Observação

Para exibir os dados como rich text, talvez seja necessário aumentar o tamanho dos caracteres dos colunas de texto.

Etapa 2. Verificar que aplicativo baseado em modelo usa o novo controle

Você pode atualizar um aplicativo baseado em modelo existente ou criar um novo aplicativo com o formulário ao qual você adicionou o componente. Por exemplo, a imagem a seguir mostra a tabela de feedback formulário de fale conosco simples usando o controle rich text editor em um aplicativo baseado em modelo.

Editor de rich-text para a tabela de feedback.

Etapa 3. Adicionar um controle rich text editor a um formulário básico em portais

Nesta etapa, você criará um novo formulário básico em portais e, em seguida, adicionará o controle ao formulário básico. Você também pode usar um formulário básico existente.

Etapa 3.1. Criar um novo formulário básico

  1. Abra o aplicativo de Gerenciamento de Portal.

  2. No painel esquerdo, em Conteúdo, selecione Formulários Básicos.

  3. Selecione Nova.

  4. Insira um Nome para o formulário. Neste exemplo, usamos Formulário básico de feedback com RTE.

  5. Para Nome da tabela, selecione Feedback (feedback).

  6. Selecione o nome do formulário de aplicativo baseado em modelo ao qual você adicionou o controle rich text. Neste exemplo, formulário de fale conosco simples.

  7. Selecione o portal do seu site.

    Configuração de formulário básico.

  8. Selecione Salvar e Fechar.

Etapa 3.2. Adicionar o controle rich text editor ao formulário básico

  1. Abra o aplicativo de Gerenciamento de Portal.

  2. No painel esquerdo, em Conteúdo, selecione Formulários Básicos.

  3. Selecione o formulário básico criado na etapa 3.1.

  4. Selecione a guia Metadados do Formulário Básico.

  5. Selecione Novos Metadados do Formulário Básico.

  6. Selecione Atributo para Tipo.

  7. Para o Nome lógico do atributo, selecione o nome da coluna para a qual o controle rich text é ativado. Neste exemplo, Comentários (comentários).

    Configuração de metadados de formulário básico.

  8. Insira um valor para este rótulo. Neste exemplo, Comentários (comentários).

  9. Em Estilo de Controle, selecione Componente de código.

    Configuração básica de metadados de formulário definindo o estilo de controle como 'componente de código'.

  10. Selecione Salvar e Fechar.

Etapa 3.3. Adicionar permissões de tabela para a tabela de anexos de rich text

Para usar e armazenar imagens no editor de rich text no portal, você precisará adicionar permissões de tabela à tabela anexa de rich text (msdyn_richtextfile).

  1. Abra seu portal no Studio de portals.

  2. No painel esquerdo, escolha Configurações (ícone de engrenagem) e selecione Permissões de tabela.

    Selecionar permissões de tabela.

  3. Crie uma nova permissão de tabela para a tabela de anexos de rich text. O nome pode ser qualquer coisa que você escolher; neste exemplo, usaremos Anexo RTE.

  4. Selecione Tipo de acesso para Acesso global.

    Observação

    O tipo Acesso global é escolhido porque não há relação entre a tabela configurada para usar o controle rich text editor e a tabela de anexos de rich text.

  5. Em Permissão para, selecione Ler, Gravar, Criar e Excluir.

  6. Atribua uma função Web apropriada para a permissão da tabela.

    Configuração das permissões da tabela de rich text.

Importante

Se você quiser armazenar imagens como strings de base 64 diretamente na coluna que você configurou para usar o controle rich text editor, é necessário configurar o controle usando um arquivo de configuração JSON. Defina disableImages e disableDefaultImageProcessing como verdadeiro para permitir que as imagens sejam renderizadas de forma consistentes em todos os clientes. Usar este método não requer a permissão de tabela global no anexo de rich text (msdyn_richtextfile).

Etapa 3.4. Adicionar configuração do site da API da Web

  1. Abra o aplicativo de gerenciamento de portal.

  2. Acesse Configurações do Site.

  3. Crie as seguintes configurações do site, insira o nome, seu site e o valor de verdadeiro e selecione Salvar e fechar.

    Nome da configuração do site Valor
    Webapi/msdyn_richtextfile/enabled true
    Webapi/msdyn_richtextfile/fields *

Etapa 4. Criar uma página da Web em portais que use o formulário básico

  1. Abra seu portal no Studio dos portais do Power Apps.

  2. No canto superior esquerdo, selecione Nova página.

  3. Selecione o layout Em branco.

  4. No painel de propriedades do lado direito, atualize o nome do site. Por exemplo, Feedback.

  5. Atualize o URL parcial. Por exemplo, feedback.

  6. Dentro do editor de página, abaixo da seção Cabeçalho, selecione a seção Coluna.

  7. No painel esquerdo, selecione Componentes (+).

  8. Em Componentes do portal, selecione Formulário.

  9. No painel de propriedades do lado direito, selecione Usar existente.

  10. Em Nome, selecione o formulário básico que você criou anteriormente neste tutorial. Neste exemplo, Formulário básico de feedback com RTE.

    Dica

    Se você não vir o formulário, selecione Configuração de sincronização para sincronizar as alterações de Dataverse.

  11. Em Permissões, selecione Gerenciar permissões de tabela e certifique-se de que tem as permissões de tabela e funções Web configuradas para o tabela do Dataverse associada ao formulário.

    Observação

    Por padrão, a tabela feedback tem as permissões criar configuradas para as funções Web padrão. Para mais informações, vá para Fale conosco.

  12. Selecione Procurar no site no canto superior direito.

    A página da Web agora mostrará o formulário básico para a tabela de comentários com o controle rich text editor, semelhante à forma como o formulário aparece enquanto o aplicativo baseado em modelo é usado.

    Formulário básico mostrando o componente de rich text em uma página da Web.

Editor de rich text em um formulário somente leitura

Em um formulário somente leitura, o editor de rich text exibe a formatação e as imagens. O conteúdo pode ser lido, mas não editado ou atualizado.

Confira também

Visão geral do Power Apps component framework
Criar seu primeiro componente
Adicionar componentes de código a um campo ou tabela em aplicativos baseados em modelo