Personalização de modelos para componentes do portal de formulários

Pré-requisitos

Gerenciamento de metadados de formulário

Conhecimento prático de HTML e CSS

Visão geral

A interface do usuário do AEM Forms permite que você adicione metadados a qualquer formulário. Os metadados personalizados podem melhorar a experiência do usuário ao listar e pesquisar formulários de sua organização.

O Forms Portal permite que você use metadados personalizados em listagens de formulário. Ao criar modelos personalizados para ativos, você pode modificar seu layout e usar metadados personalizados com seu conjunto de estilos CSS.

Execute as seguintes etapas para criar um modelo personalizado para vários componentes do Forms Portal.

Criando um modelo personalizado

1. Criar um nó sling:Folder em */apps *

   Adicione uma propriedade "fpContentType". Especifique os valores apropriados para a propriedade, dependendo do componente para o qual você está definindo o modelo personalizado.

   • Componente de pesquisa e lister: "/libs/fd/fp/formTemplate"

   • Componente Rascunhos e envios:

     • Seção de rascunhos: /libs/fd/fp/rascunhosModelo
     • Seção de submissões: /libs/fd/fp/submitTemplate

   • Componente do link: /libs/fd/fp/linkTemplate

   Adicione um título que você deseja que seja exibido ao selecionar modelos de layout.

   *Observação: O título pode ser diferente do nome do nó sling:Folder criado. *
   A imagem a seguir descreve a configuração do componente de Pesquisa e Lister.

2. Crie um arquivo template.html nesta pasta para servir como modelo personalizado.

3. Grave o modelo personalizado e use metadados personalizados, conforme descrito abaixo.

Exemplo de trabalho

A seguir está uma amostra da implementação de um modelo personalizado em que o Forms Portal adquire um layout personalizado de cartão Gov para o componente de Pesquisa e Lister.

<div class="__FP_boxes-container __FP_single-color">
    <div class="boxes __FP_boxes __FP_single-color" data-repeatable="true">
 <div class="__FP_boxes-thumbnail">
     <img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
        </div>
        <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
        <p>${description}</p>
        <div class="boxes-icon-cont __FP_boxes-icon-cont">
            <div class="op-dow">
                <a href="${formUrl}" target="_blank" class="__FP_button ${htmlStyle}" title="${config-htmlLinkText}">${localize-Apply}</a>
                <a href="${pdfUrl}" class="__FP_button ${pdfStyle}" title="${config-pdfLinkText}">${localize-Download}</a>
            </div>
        </div>
    </div>
</div>

Especificações técnicas para modelos personalizados

Um modelo personalizado para qualquer componente do Forms Portal inclui entradas repetíveis e não repetíveis. As entradas repetidas são entidades básicas para listagem. Exemplos de entradas repetíveis são o Search & Lister, os Rascunhos & Submissões e os componentes do Link.

O Forms Portal fornece uma sintaxe para que os usuários individuais exibam metadados personalizados/OOTB. Os espaços reservados são preenchidos após a exibição dos resultados de formulários, rascunhos ou envios.

Para incluir uma entrada repetível, configure o valor do atributo repetitivo de dados para true.

*No exemplo discutido, dois elementos Div estão presentes na parte superior do modelo personalizado. A primeira, com a classe CSS "__FP_boxes-container", funciona como um elemento de container para os formulários listados. O segundo, com a classe CSS "__FP_boxes", é um modelo para as entidades básicas, neste caso um Formulário. O atributo repetitivo de dados presente no elemento Div tem o valor true.

Cada espaço reservado tem um conjunto exclusivo de metadados OTB. Para exibir metadados personalizados em um local específico no formulário, adicione a $metadata_prop propriedade no local.

No exemplo, a propriedade metadata é usada em várias instâncias. Por exemplo, é usado em description,name,formUrl,htmlStyle,pdfUrl,pdfStyle, e path​da forma prescrita.

Metadados prontos para uso

Vários componentes do Forms Portal fornecem conjuntos exclusivos de metadados OOTB que podem ser usados para listagem.

Componente do Search & Lister

• Título: Título do formulário

• name: Nome do formulário (na maioria, é o mesmo que o título)

• descrição: Descrição do formulário

• formUrl: URL para renderizar o formulário como HTML

• pdfUrl: URL para renderizar o formulário como PDF

• assetType: Tipo do ativo. Os valores válidos incluem Formulário, Formulário PDF, Formulário impresso e Formulário adaptável

• htmlStyle e pdfStyle: Estilo de exibição para ícones HTML e PDF usados respectivamente para renderização. Os valores válidos são "__FP_display_none" ou blank

  Observação: Lembre-se de usar a classe __FP_display_none na sua folha de estilos personalizada

• downloadUrl: URL para baixar um ativo.

Suporte para localização, classificação e uso das propriedades de configuração na interface do usuário (somente Search & Lister):

1. Suporte a localizações: Para localizar qualquer texto estático, use o atributo ${localize-YOUR_TEXT​} e disponibilize o valor localizado, caso ainda não exista.

   No exemplo discutido, os atributos ${localize-Apply} e ${localize-Download} são usados para localizar o texto Aplicar e Baixar.

2. Suporte para classificação: Clique no elemento HTML para classificar os resultados da pesquisa. Para implementar a classificação em um layout tabulado, adicione o atributo "data-sortKey" no cabeçalho da tabela específica. Além disso, adicione seu valor como os metadados para os quais você deseja classificar.

   Por exemplo, para o cabeçalho "Título" na visualização de grade, o valor do cabeçalho "data-sortKey" é "título". Clique no cabeçalho para classificar os valores em uma coluna específica.

3. Uso das propriedades de configuração: O componente de Pesquisa e Lister tem várias configurações que podem ser usadas na interface do usuário. Por exemplo, para exibir o texto da Dica de ferramenta HTML salvo pela caixa de diálogo de edição, use o atributo ${config-htmlLinkText}. Da mesma forma, para o texto da dica de ferramenta do PDF, use o atributo${config-pdfLinkText} .

Componente de link

• Título: Título do formulário
• formUrl: URL para renderizar o formulário como HTML
• público alvo: Atributo de público alvo do link. Os valores válidos são "_blank" e "_self."
• linkText: Legenda do link

Componente Rascunhos e envios

• Caminho: Caminho do nó de metadados de rascunho/envios. Use-o com a extensão .HTML como um URL para abrir um rascunho ou envio.
• contextPath: Caminho de contexto da instância AEM
• firstLetter: A primeira letra (maiúscula) do título do formulário adaptável, que foi salva como Rascunho ou enviada.
• formName: O título do formulário adaptável, que foi salvo como Rascunho ou submetido.
• draftID: ID do rascunho listado (Use apenas no modelo para a seção Rascunho).
• submitID: ID para o envio que está listado (Use apenas no modelo para a seção Envio).
• status: Status do formulário enviado. (Use apenas no modelo para a seção Envio).
• descrição: Descrição do formulário adaptativo associado ao rascunho ou ao envio.
• diffTime: Diferença entre a hora atual e a última ação de salvar do rascunho. Como alternativa, a diferença entre a hora atual e a última ação de envio para a submissão.
• iconClass: Classe CSS usada para exibir a primeira letra do rascunho/envio. O Forms Portal inclui as seguintes classes, que fornecem vários planos de fundo coloridos.
• proprietário: Usuário que criou o rascunho/envio.
• Hoje: Data de criação do rascunho ou envio no formato DD:MM:AAAA.
• TimeNow: Hora de criação do rascunho ou envio no formato HH:MM:SS de 24 horas

Nota:

1. Para a opção de exclusão na seção Rascunhos sob o componente Rascunhos e submissões, nomeie a classe CSS "__FP_deleteDraft." Além disso, inclua o atributo "draftID" com o valor ${draftID}, que é a ID de rascunho do rascunho correspondente.

2. Ao criar links para rascunhos abertos e envios, você pode especificar $path.html como o valor do atributo href para a tag de âncora.

A. elemento container

B. Metadados de "caminho" com uma hierarquia fixa para obter a miniatura armazenada para cada formulário.

Atributo repetível C. Data usado para a seção do modelo para cada formulário

D. Para localizar a string "Aplicar"

E. Using the configuration property pdfLinkText

F. Uso dos metadados "pdfUrl"

Dicas, truques e problemas conhecidos

1. Não use aspas simples (') em nenhum modelo personalizado.
2. Para metadados personalizados, armazene essa propriedade somente no nó jcr:content/metadata. Se você armazená-lo em qualquer outro lugar, o Forms Portal não poderá exibir os metadados.
3. Certifique-se de que o nome de quaisquer metadados personalizados ou existentes não incluam dois pontos (😃. Se isso acontecer, você não poderá exibi-lo na interface do usuário.
4. data- repetitiva não tem importância para um componente ​​do Linkcomponent. O Adobe recomenda que você evite usar essa propriedade no modelo para um componente de Link.

Artigos relacionados

• Ativar componentes do portal de formulários
• Criar página do portal de formulários
• Lista de formulários em uma página da Web usando APIs
• Usar componente Rascunhos e envios
• Personalizar o armazenamento de rascunhos e formulários enviados
• Amostra para integrar o componente de rascunhos e envios ao banco de dados
• Personalização de modelos para componentes do portal de formulários
• Introdução à publicação de formulários em um portal