Criação de uma página de portal de formulários

Os componentes do portal da Forms equipam os desenvolvedores da Web com componentes para criar e personalizar um portal de formulários em sites criados usando o Adobe Experience Manager (AEM). Para obter uma visão geral rápida do portal de formulários, consulte Introdução à publicação de formulários em um portal.

Pré-requisitos

Por padrão, os componentes do portal do Forms não estão disponíveis para uso. Certifique-se de que as categorias de componentes do portal de formulários a seguir estejam habilitadas, conforme descrito em Ativar componentesdo portal de formulários.

Os Serviços de Documento incluem os componentes Pesquisa e Lister, Link e Rascunhos e Envio.

Os Predicados de Serviços do Documento incluem os componentes Predicado de data, Predicado de texto completo, Predicado de propriedades e Predicado de tags. Esses componentes são usados para configurar a pesquisa no componente Pesquisar e Lister.

Depois de ativadas em uma página de sites AEM, essas categorias de componentes estão disponíveis para uso no navegador de componentes.

Componentes do portal da AEM Forms no navegadorde componentes Figura: categorias de componentes do portal do Forms

Componente de pesquisa e lister

O componente de Pesquisa e Lister, disponível em categoria de componentes de Serviços de Documento, é usado para lista de formulários em uma página e para implementar a pesquisa nos formulários listados. O componente inclui dois painéis:

  • painel Lista onde os formulários estão listados.
  • Painel de pesquisa no qual você adiciona a funcionalidade de pesquisa.

Você pode arrastar e soltar o componente de Pesquisa e Lister da categoria de componentes Serviços de Documento no navegador de componentes para a página. O componente, quando adicionado, é semelhante ao seguinte.

Componente de pesquisa e lister em uma página​Figura: Componente de pesquisa e lister em uma página com layout de Grade

painel Lista

O painel Lista é uma área em que seus formulários são listados. O componente de Pesquisa e Lister fornece várias opções de configuração que podem ser usadas para controlar a exibição de formulários no painel de Lista.

Para configurar o painel Lista, toque no componente Pesquisar e Lister e, em seguida, toque em settings_icon. A caixa de diálogo Editar componente é aberta.

Painel de Lista no modode edição Figura: Painel de Lista no modo de edição

A caixa de diálogo Editar inclui várias guias que fornecem opções de configuração descritas na tabela abaixo. Pressione OK para salvar a configuração, quando concluído.

Guia Configuração Descrição
Pastas de ativos Adicionar Item Configura as pastas onde os ativos são carregados usando a interface do usuário do AEM Forms. Por padrão, ele lista todos os ativos carregados. Para obter mais informações sobre a interface do usuário do AEM Forms, consulte Introdução ao gerenciamento de formulários.

Exibir

Texto do título Título do componente de Pesquisa e Lister. O título padrão é Forms Portal.
Modelo de layout Layout dos ativos.
Desativar pesquisa avançada Quando ativado, oculta o ícone de pesquisa avançada.
Desativar pesquisa de texto Quando ativada, oculta a barra de pesquisa de texto completo.
Resultado Número de resultados por página Configura o número máximo de formulários que você deseja exibir em uma página.
Texto de resultados

Configura o texto de resultados (por exemplo, 1-12 de 601 Resultados). The default value is Results.

Por exemplo, se você especificar o Forms neste campo e houver um total de 601 formulários, o texto resultante mudará para 1-12 de 601 Forms.

Texto da página

Configura o texto da página (por exemplo, Página 1 de 51). The default value is Page.

Por exemplo, se você especificar o Formulário de aplicativo neste campo e houver 51 páginas, o texto da página será alterado para Formulário de aplicativo 1 de 51.

Do Texto

Substitui a palavra de pelo texto especificado (Página 1 de 51). The default value is of.

Por exemplo, se você especificar fora desse campo, o texto mudará para Página 1 de 51.

Link do formulário Tipo de renderização Controla a listagem de formulários com base no tipo de renderização especificado. As opções disponíveis são PDF e HTML. Por exemplo, se você selecionar somente HTML como tipo de renderização, os PDF forms serão filtrados.
Perfil HTML Configura o perfil HTML a ser usado para renderização. Todos os perfis disponíveis são listados na lista suspensa.
Enviar URL

Configura um servlet no qual os dados do formulário são enviados.

Observação: O URL de envio de um formulário pode ser especificado em vários locais e sua ordem de precedência é a seguinte:

  1. O URL de envio incorporado no formulário (no botão Enviar) tem a prioridade mais alta.
  2. O URL de envio mencionado na interface do usuário do AEM Forms tem a segunda prioridade mais alta.
  3. O URL de envio mencionado no portal de formulários tem a prioridade mais baixa.
Dica da ferramenta Ação de renderização HTML Configura o texto da dica de ferramenta, que é exibida ao passar o ponteiro do mouse sobre (o ícone HTML5).
Dica da ferramenta Ação de renderização de PDF Configura o texto da dica de ferramenta, que é exibida ao passar o ponteiro do mouse sobre (o ícone PDF).
Estilo Tipo de estilo Permite que você especifique Sem estilo, Estilopadrão ou Estilo personalizado para listar os formulários.
Caminho de estilo personalizado Se você selecionou Personalizado como o Tipo de estilo, navegue para especificar o caminho para o CSS personalizado, caso contrário selecione Padrão.

Painel de pesquisa

O painel de pesquisa permite que você adicione os componentes Predicado de data, Predicado de texto completo, Predicado de propriedades e Predicado de tags da categoria Predicados de serviços de Documento no Sidekick AEM. Esses componentes implementam a funcionalidade de pesquisa para que os usuários realizem a pesquisa nos formulários listados.

Dica: É possível controlar a lista de formulários exibidos no portal de formulários com base em critérios predefinidos e ocultar a funcionalidade de pesquisa para usuários finais. Para controlar a lista de formulários, use os componentes Predicar para aplicar filtros de pesquisa. Você também pode especificar os valores de filtro padrão e desativar a pesquisa na guia Exibir da caixa de diálogo Editar componente.

Painel de pesquisa com data, texto completo, propriedades e tags - Predicado​Figura: Painel de pesquisa com data, texto completo, propriedades e previsão de tags

Predicado de data

O componente Predicado de data, quando adicionado, permite a pesquisa nos formulários listados que foram modificados durante uma duração especificada.

Para configurar o componente Predicado de data:

  1. Toque no componente e toque em settings_icon. A caixa de diálogo Editar é aberta.

  2. Especifique o seguinte:

    • Tipo: A única opção disponível é Data da​última modificação.
    • Texto: Rótulo ou legenda para o Componente de previsão de data. O valor padrão é Data da​última modificação.
    • Rótulo da data do Start: Rótulo ou legenda do campo de data do start.
    • Rótulo da data final: Rótulo ou legenda para o campo de data final.
    • Ocultar: Para aplicar o filtro de datas padrão a formulários de lista.
  3. Toque em OK.

Predicado de texto completo

O componente Predicado de texto completo implementa a pesquisa de texto completo nos dados do formulário, como nome e descrição. Os usuários podem pesquisar qualquer string de texto para retornar formulários que contenham o texto em seu nome ou descrição.

Para configurar o componente Predicado de texto completo:

  1. Toque no componente e toque em settings_icon. A caixa de diálogo Editar é aberta.
  2. Especifique o título no campo Título ​principal.
  3. Toque Em Ok.

Predicado de propriedades

O componente Predicado de propriedades implementa a pesquisa de formulários com base nas propriedades do formulário, como título, autor e descrição.

Para configurar o componente Predicado de propriedades:

  1. Toque no componente e toque em settings_icon. A caixa de diálogo Editar é aberta.

  2. Na guia Geral , especifique o rótulo de pesquisa. The default value is Properties.

  3. Na guia Opções , toque em Adicionar item.

  4. Selecione uma propriedade na lista suspensa e especifique um rótulo de pesquisa para ela no campo abaixo da lista suspensa.

  5. Repita a etapa 4 para adicionar mais propriedades. Você também pode especificar um valor de filtro padrão para formulários de lista com base nos critérios especificados e ocultar a propriedade para pesquisa por usuários finais. Marque a caixa de seleção Ocultar para uma propriedade e especifique o valor do filtro padrão.

    Por exemplo, se você deseja exibir formulários que contêm "Viagem" em seus títulos, selecione Ocultar ao lado da propriedade Título. Além disso, especifique Viagem na caixa de texto de valor de filtro padrão.

  6. Toque em OK.

Predicado de tags

O componente Predicado de tags implementa a pesquisa de formulários com base em tags definidas no Forms Manager.

Para configurar o componente Predicado de tags:

  1. Toque no componente e toque em settings_icon. A caixa de diálogo Editar é aberta.
  2. Toque no botão de seta para baixo ao lado do campo Tags.
  3. Selecione as tags apropriadas.
  4. Toque em OK.

As tags selecionadas são exibidas no painel Pesquisar junto com as caixas de seleção. Os usuários agora podem restringir sua pesquisa com base nas tags.

Lista de formulários em uma página

Para lista de formulários em uma página, adicione o Componente Pesquisar e Lister à página e configure o Painel de Lista. Para permitir que os usuários finais pesquisem formulários com data, texto e tags, adicione um componente do Painel de pesquisa.

Para vincular um formulário de qualquer lugar na página, use o componente Link. Para obter mais informações sobre o componente de link, consulte Incorporação do componente de link em uma página.

Para lista dos formulários que estão em um estado de rascunho e dos que já foram enviados, use o componente Rascunhos e Envios . Para obter mais informações, consulte Personalizando o componenteRascunhos e Envios.

Compatibilidade com dispositivos móveis

O componente de Pesquisa e Lister do Forms Portal é compatível com dispositivos móveis e se adapta de acordo. Todas as três visualizações padrão: Os relatos de grade, placa e painel de acordo com o dispositivo no qual o site é aberto, são fornecidos com o fato de que a página da Web também se adapta. O fato simples é que o Search & Lister é apenas um componente e não governa o estilo de nível de página.

A imagem a seguir mostra o componente de Pesquisa e Lister quando aberto em um dispositivo móvel:

Captura de tela do componentePesquisa e Lister Figura: Componente de pesquisa e lister

Personalizar uma página do portal de formulários

Você pode personalizar uma página do portal de formulários para fornecer uma aparência distinta à página. Você também pode adicionar metadados para melhorar a experiência de pesquisa, alterar o layout da página e adicionar estilos CSS personalizados. Para obter mais informações, consulte Personalização de modelos para componentesdo Forms Portal.

A interface do usuário do AEM Forms permite que você adicione metadados personalizados a formulários. Os metadados personalizados são úteis para fornecer uma experiência de listagem e pesquisa de formulários aos usuários finais. Para obter mais informações sobre metadados personalizados, consulte Personalização de modelos para componentesdo Forms Portal.

O portal de formulários fornece ações de renderização. Você pode personalizar o portal de formulários para adicionar mais ações. Para obter informações detalhadas, consulte Adicionar ação personalizada em itens do lister de formulários.

Nesta página