AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.
Gestion des métadonnées de formulaire
Connaissances opérationnelles du HTML et de la page CSS
L’interface utilisateur des AEM Forms permet d’ajouter des métadonnées à n’importe quel formulaire. Les métadonnées personnalisées peuvent améliorer l’expérience utilisateur lors de la liste et de la recherche de formulaires de votre entreprise.
Forms Portal vous permet d’utiliser des métadonnées personnalisées dans les listes de formulaires. Lors de la création de modèles personnalisés pour les ressources, vous pouvez modifier leur mise en page et utiliser des métadonnées personnalisées avec votre jeu de styles CSS.
Effectuez les étapes suivantes pour créer un modèle personnalisé pour divers composants Forms Portal.
Créez un noeud sling:Folder sous */apps *
Ajoutez une propriété "fpContentType". Spécifiez les valeurs appropriées pour la propriété en fonction du composant pour lequel vous définissez le modèle personnalisé.
Composant Search & Lister : "/libs/fd/fp/formTemplate"
Composant Brouillons et envois :
Composant Link : /libs/fd/fp/linkTemplate
Ajoutez un titre à afficher lors de la sélection des modèles de mise en page.
*Remarque : Le titre peut être différent du nom de noeud de sling:Folder que vous avez créé. *
L’image ci-après illustre la configuration pour le composant Recherche et énumérateur.
Créez un fichier template.html dans ce dossier qui servira de modèle personnalisé.
Créez le modèle personnalisé et utilisez des métadonnées personnalisées comme décrit ci-dessous.
Vous trouverez ci-dessous un exemple d’implémentation d’un modèle personnalisé dans lequel Forms Portal acquiert une mise en page de carte Google Geometrixx personnalisée pour le composant Search & 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>
Le modèle personnalisé de tout composant du Portail Formulaires comprend des entrées répétables et non répétables. Les entrées répétables sont des entités de base pour la liste. Les composants Search & Lister, Drafts & Submissions et Link sont des exemples d’entrées répétables.
Forms Portal fournit une syntaxe permettant aux espaces réservés d’afficher des métadonnées personnalisées/prêtes à l’emploi. Les espaces réservés sont renseignés après l’affichage des résultats des formulaires, des brouillons ou des envois.
Pour inclure une entrée répétable, configurez l’attribut data-repeatable sur true.
*Dans l’exemple présenté, deux éléments Div se trouvent en haut du modèle personnalisé. La première, avec la classe CSS "__FP_boxes-container", fonctionne comme un élément conteneur pour les formulaires répertoriés. Le second, avec la classe CSS "__FP_boxes", est un modèle pour les entités de base, dans ce cas un formulaire. L’attribut data-repeatable qui figure dans l’élément Div a la valeur true.
Chaque espace réservé possède un jeu de métadonnées prêtes à l’emploi exclusif. Pour afficher des métadonnées personnalisées à un emplacement spécifique du formulaire, ajoutez le $metadata_prop, propriété à l'endroit.
Dans cet exemple, la propriété des métadonnées est utilisée dans plusieurs instances. Elle est utilisée par exemple de façon adéquate dans description,name,formUrl,htmlStyle,pdfUrl,pdfStyleet path.
Plusieurs composants de Forms Portal fournissent des ensembles exclusifs de métadonnées prêtes à l’emploi que vous pouvez utiliser pour les listes.
Title : titre du formulaire
name: Nom du formulaire (il s’agit généralement du même titre)
description: Description du formulaire
formUrl : URL permettant d’effectuer le rendu du formulaire au format HTML.
pdfUrl : URL permettant d’effectuer le rendu du formulaire au format PDF.
assetType : type de la ressource. Les valeurs valides sont les suivantes : Formulaire,Formulaire PDF, Imprimer le formulaire et Formulaire adaptatif.
htmlStyle et pdfStyle : style d’affichage des icônes HTML et PDF utilisées pour le rendu. Les valeurs valides sont les suivantes : « __FP_display_none** » ou vide**
Remarque : N’oubliez pas d’utiliser la classe __FP_display_none dans votre feuille de style personnalisée.
downloadUrl : URL permettant de télécharger une ressource.
Prise en charge de la localisation et du tri et utilisation des propriétés de configuration de l’interface utilisateur (Recherche et énumérateur uniquement) :
Prise en charge de la localisation: Pour localiser du texte statique, utilisez l’attribut ${localize-YOUR_TEXT} et rendre la valeur localisée disponible, si n’existe pas déjà.
Dans l’exemple présenté, les attributs ${localize-Apply} et ${localize-Download} sont utilisés pour localiser le texte Apply et Download.
Prise en charge du tri: Cliquez sur l’élément HTML pour trier les résultats de la recherche. Pour mettre en oeuvre le tri dans une disposition de tableau, ajoutez l’attribut "data-sortKey" sur l’en-tête du tableau en question. Ajoutez en outre sa valeur en tant que métadonnées pour lesquelles vous souhaitez effectuer un tri.
Par exemple, pour l’en-tête "Title" dans la vue Grille, la valeur de l’en-tête "data-sortKey" est "title". Cliquez sur l’en-tête pour trier les valeurs d’une colonne particulière.
Utilisation des propriétés de configuration : le composant Recherche et énumérateur possède plusieurs configurations que vous pouvez utiliser dans l’interface utilisateur. Par exemple, pour afficher le texte de l’info-bulle HTML enregistré dans la boîte de dialogue de modification, utilisez la variable Attribut ${config-htmlLinkText}. De même, pour le texte de l’info-bulle du PDF, utilisez la variable ${config-pdfLinkText} attribut.
Remarque :
Pour l’option de suppression de la section Brouillons sous le composant Drafts & Submissions, nommez la classe CSS "__FP_deleteDraft". En outre, incluez l’attribut « draftID » avec la valeur ${draftID}, qui correspond à l’ID du brouillon correspondant.
Lors de la création de liens pour ouvrir des brouillons et des envois, vous pouvez spécifier $path.html comme valeur de la variable href pour la balise d’ancrage.
A. Elément conteneur
B. Métadonnées « path » avec hiérarchie fixe pour obtenir la miniature stockée pour chaque formulaire.
C. Attribut « data-repeatable » utilisé pour la section du modèle de chaque formulaire.
D. Pour localiser la chaîne « Apply ».
E. Utilisation de la propriété de configuration pdfLinkText
F. Utiliser des métadonnées « pdfUrl ».