Personnaliser des modèles pour les composants du portail Formulaires customizing-templates-for-forms-portal-components

Conditions préalables prerequisites

Gestion des métadonnées de formulaire

Compréhension de base du HTML et du CSS

Vue d’ensemble overview

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 client lors du listage et de la recherche de formulaires de votre entreprise.

Le portail Formulaires 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 disposition et utiliser des métadonnées personnalisées avec votre jeu de styles CSS.

Procédez comme suit pour créer un modèle personnalisé pour divers composants du portail Formulaires.

Créer un modèle personnalisé creating-a-nbsp-custom-template

Exemple de travail working-example

Vous trouverez ci-dessous un exemple d’implémentation d’un modèle personnalisé dans lequel le portail Formulaires acquiert une disposition de carte Geometrixx Gov 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>

Spécifications techniques des modèles personnalisés technical-specifications-for-custom-templates

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.

Le portail Formulaires 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 la propriété ${metadata_prop} à cet emplacement.

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,pdfStyle et path.

Métadonnées prêtes à l’emploi out-of-the-box-metadata

Plusieurs composants du portail Formulaires fournissent des ensembles exclusifs de métadonnées prêtes à l’emploi que vous pouvez utiliser pour les listes.

Composant Search & Lister search-amp-lister-component

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

Composant Lien link-component

Composant Brouillons et envois drafts-amp-submissions-component

Remarque :

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 ».

Conseils, astuces et problèmes connus tips-tricks-and-known-issues

Articles connexes