Personalização de modelos para componentes do Forms Portal customizing-templates-for-forms-portal-components

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Tópicos:
Forms Portal

Pré-requisitos prerequisites

Gerenciamento de metadados de formulário

Conhecimento prático de HTML e CSS

Visão geral overview

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 Forms Portal permite usar metadados personalizados em listagens de formulários. Ao criar modelos personalizados para ativos, você pode modificar o layout e usar metadados personalizados com o conjunto de estilos CSS.

Faça o seguinte para poder criar um modelo personalizado para vários componentes do Forms Portal.

Criação de um modelo personalizado creating-a-nbsp-custom-template

Criar um nó sling:Folder em /apps

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

Componente de pesquisa e listagem: "/libs/fd/fp/formTemplate"
Componente de rascunhos e envios:
- Seção Rascunhos: /libs/fd/fp/draftsTemplate
- Seção de envios: /libs/fd/fp/submissionsTemplate
Componente do link: /libs/fd/fp/linkTemplate

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

note note
NOTE
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 de Pesquisa e Lister.
Criação de um sling:Folder

Crie um arquivo template.html nesta pasta para que ele possa servir como modelo personalizado.
Grave o modelo personalizado e use os metadados personalizados conforme descrito abaixo.

Exemplo de trabalho working-example

Este é um exemplo de implementação de um modelo personalizado em que o Forms Portal adquire um Layout de cartão de visita de Geometrixx personalizado 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 technical-specifications-for-custom-templates

Um modelo personalizado para qualquer componente do Forms Portal inclui entradas repetíveis e não repetíveis. As entradas repetíveis são entidades básicas para listagem. Exemplos de entradas repetíveis são Pesquisa e Listagem, Rascunhos e envios e Componentes de link.

O Forms Portal fornece uma sintaxe para que os marcadores de posição exibam metadados personalizados/prontos para uso. 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 dados repetíveis para true.

No exemplo discutido, dois elementos Div estão presentes na parte superior do modelo personalizado. O primeiro, 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. A variável dados repetíveis o atributo presente no elemento Div tem o valor true.

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

No exemplo, a propriedade de metadados é usada em várias instâncias. Por exemplo, é usado em descrição,name,formUrl,htmlStyle,pdfUrl,pdfStyle, e caminho do modo prescrito.

Metadados prontos para uso out-of-the-box-metadata

Vários componentes do Forms Portal fornecem conjuntos exclusivos de metadados prontos para uso que você pode usar para listagem.

Componente de pesquisa e listagem search-amp-lister-component

Título: Título do formulário
name: Nome do formulário (geralmente é 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, Imprimir formulário, e Formulário adaptável
htmlStyle& pdfStyle: Estilo de exibição dos ícones HTML e PDF, respectivamente, usados para renderização. Os valores válidos são "__FP_display_none" ou em branco.

NOTE

Lembre-se de usar a classe __FP_display_none em sua folha de estilos personalizada.

downloadUrl: o 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):

Suporte à localização: Para localizar qualquer texto estático, use o atributo ${localize-YOUR_TEXT} e disponibilize o valor localizado, se ainda não existir.
No exemplo discutido, os atributos ${localize-Apply} e ${localize-Download} são usados para localizar o texto Aplicar e Baixar.
Suporte para classificação: Clique no elemento HTML para classificar os resultados da pesquisa. Para implementar a classificação em um layout de tabela, adicione o atributo "data-sortKey" ao cabeçalho de tabela específico. Além disso, adicione seu valor como os 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" é "título". Clique no cabeçalho para classificar os valores em uma coluna específica.
Uso das propriedades de configuração: o componente de Pesquisa e Lister tem várias configurações que você pode usar na interface do usuário. Por exemplo, para exibir o texto de Dica de ferramenta do HTML salvo por meio da caixa de diálogo de edição, use o ${config-htmlLinkText} atributo. Da mesma forma, para o texto da dica de ferramenta PDF, use o ${config-pdfLinkText} atributo.

Componente de link link-component

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

Rascunhos e componentes de envios drafts-amp-submissions-component

Caminho: Caminho do nó de metadados de rascunho/envios. Use-a com a extensão .HTML como um URL para que você possa abrir um rascunho ou envio.
contextPath: caminho de contexto da instância AEM
firstLetter: Primeira letra (maiúscula) do título do formulário adaptável, que foi salvo como rascunho ou enviado.
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 da 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 Envio).
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 enviada para o envio.
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 DD:MM:YYYY formato.
TimeNow: Hora de criação do rascunho ou envio no HH:MM:SS Formato de 24 horas

Nota:

Para a opção de exclusão na seção Rascunhos, no componente Rascunhos e envios, 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.
Ao criar links para rascunhos e envios abertos, é possível especificar ${path}.html como o valor de href para a tag de âncora.

Nó Rascunhos e Envio

A. Elemento de contêiner

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

C Atributo de repetição de dados usado para a seção de modelo para cada formulário

D. 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 tips-tricks-and-known-issues

Não use aspas simples (') em nenhum modelo personalizado.
Para metadados personalizados, armazene essa propriedade no jcr:content/metadata somente nó. Se você armazená-lo em qualquer outro lugar, o Forms Portal não poderá exibir os metadados.
Certifique-se de que o nome de qualquer metadado personalizado ou metadado existente não inclua dois pontos ( : ). Caso isso ocorra, não será possível exibi-lo na interface do usuário do.
dados repetíveis não tem significado para uma Link componente. A Adobe recomenda que você evite usar essa propriedade no modelo para um componente Link.