Show Menu
TÓPICOS×

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

Pré-requisitos

Conhecimento prático de HTML e CSS

Visão geral

A interface do usuário do AEM Forms permite adicionar 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 Portal de formulários permite que você use metadados personalizados em listagens de formulários. 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 Portal de formulários.

Creating a custom template

  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 Portal do Forms adquire um layout personalizado de cartão Gov Geometrixx 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 Portal do Forms 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 Portal de Formulários fornece uma sintaxe para que os usuários possam exibir 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 com dados repetitivos como verdadeiro .
*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 contêiner 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 de dados repetíveis 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 propriedade ​$metadata_prop no local.
No exemplo, a propriedade metadata é usada em várias instâncias. Por exemplo, ele é usado na descrição , nome , formUrl , htmlStyle , pdfUrl , pdfStyle, e no caminho prescrito.

Metadados prontos

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

Componente de pesquisa e 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 em branco
    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 para localização: 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 $ e $ 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 exibiçã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 $. Da mesma forma, para o texto da dica de ferramenta do PDF, use o atributo $ .

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 do 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 o envio.
  • iconClass : Classe CSS usada para exibir a primeira letra do rascunho/envio. O Portal de formulários 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 $ , 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 âncora.
A . Elemento do contêiner
​B. Metadados de "caminho" com uma hierarquia fixa para obter a miniatura armazenada para cada formulário.
C. Atributo repetível de dados usado para a seção do modelo para cada formulário
​D. Para localizar a string "Apply"
​E. Uso da propriedade de configuração 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 Portal do Forms 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. a repetição de dados não tem importância para um componente Link . A Adobe recomenda que você evite usar essa propriedade no modelo para um componente de Link.