Personalização de modelos para componentes do portal de formulários customizing-templates-for-forms-portal-components

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 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 creating-a-nbsp-custom-template

Exemplo de trabalho working-example

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 technical-specifications-for-custom-templates

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 dados repetíveis 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 dados repetíveis atributo 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 do formulário, adicione o propriedade $metadata_prop 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 ​da forma prescrita.

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

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

Componente Pesquisar e listar search-amp-lister-component

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

Componente Link link-component

Componente Rascunhos e envios drafts-amp-submissions-component

Nota:

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 de modelo para cada formulário

D. Para localizar a sequência de caracteres "Aplicar"

E. Uso da propriedade de configuração pdfLinkText

F. Usar os metadados "pdfUrl"

Dicas, truques e problemas conhecidos tips-tricks-and-known-issues

Artigos relacionados