Gerenciamento de metadados de formulário
Conhecimento prático de HTML e CSS
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.
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:
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.
Crie um arquivo template.html nesta pasta para servir como modelo personalizado.
Grave o modelo personalizado e use metadados personalizados, conforme descrito abaixo.
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>
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 pathda forma prescrita.
Vários componentes do Forms Portal fornecem conjuntos exclusivos de metadados OOTB que podem ser usados para listagem.
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):
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.
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.
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} .
Nota:
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.
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"