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 adicionar metadados a qualquer formulário. Os metadados personalizados podem aprimorar a experiência do usuário ao listar e pesquisar formulários de sua organização.

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

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

Criação de 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 Pesquisar e lister: "/libs/fd/fp/formTemplate"

    • Componente Rascunhos e envios:

      • Seção de rascunhos: /libs/fd/fp/rascunhosModelo
      • Seção Submissões: /libs/fd/fp/enviosTemplate
    • Componente do link: /libs/fd/fp/linkTemplate

    Adicione um título que deseja exibir ao selecionar modelos de layout.

    OBSERVAÇÃO

    O título pode ser diferente do nome do nó de sling:Folder que você criou.

    A imagem a seguir descreve a configuração do componente Pesquisa e Lister .
    Criar um sling:Folder

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

  3. Escreva o modelo personalizado e use os metadados personalizados conforme descrito abaixo.

Exemplo de trabalho

A seguir encontra-se uma amostra da implementação de um modelo personalizado em que o Portal do Forms adquire um Layout de Cartão Governador do Geometrixx personalizado para o componente Pesquisar e Listar .

<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 Forms inclui entradas repetíveis e não repetitivas. As entradas repetíveis são entidades básicas para listagem. Exemplos de entradas repetíveis são os componentes Pesquisa e Lister, Rascunhos e Envio e Link .

O Portal Forms fornece uma sintaxe para os titulares locais exibirem 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 data-repetível 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 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 data-repetível​presente no elemento Div tem o valor true.

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

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

Metadados prontos para uso

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

Componente Pesquisar e listar

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

  • name: Nome do formulário (em sua 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 em sua folha de estilos personalizada.

  • downloadUrl: URL para baixar um ativo.

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

  1. Suporte à 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 ${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 com tabelas, adicione o atributo "data-sortKey" no cabeçalho da tabela específica. Além disso, adicione seu valor como metadados para os quais deseja classificar.
    Por exemplo, para o cabeçalho "Título" na exibição de grade, o valor do cabeçalho "data-sortKey" é "title". Clique no cabeçalho para classificar os valores em uma coluna específica.

  3. Uso das propriedades de configuração: O componente Pesquisar e listar tem várias configurações que você pode usar 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 texto de dica de ferramenta em PDF, use ${config-pdfLinkText} o atributo .

  • Título: Título do formulário
  • formUrl: URL para renderizar o formulário como HTML
  • target: Atributo de meta 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 de AEM
  • firstLetter: 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 enviado.
  • DraftID: ID do rascunho listado (Use somente no modelo para a seção Rascunho).
  • submitID: ID do envio listado (Use somente no modelo para a seção Envio).
  • status: Status do formulário enviado. (Use somente no modelo para a seção Enviar ).
  • descrição: Descrição do formulário adaptável associado ao rascunho ou ao envio.
  • diffTime: Diferença entre a hora atual e a última ação de salvamento 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 do Forms 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 envios, nomeie a classe CSS "__FP_deleteDraft." Além disso, inclua o atributo "rascunhoID" com o valor ${rascunhoID}, que é a ID de rascunho do rascunho correspondente.

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

Rascunhos e nó de envio

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 sequência de caracteres "Aplicar"

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 qualquer metadado personalizado ou existente não inclua dois pontos ( : ). Se isso acontecer, você não poderá exibi-lo na interface do usuário.
  4. data- repetitiva não tem significância para um componente ​do Linkcomponent. O Adobe recomenda evitar o uso dessa propriedade no modelo para um componente de Link.

Artigos relacionados

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now