Personnalisation de modèles pour les composants Forms Portal

Conditions préalables

Gestion des métadonnées de formulaire

Maîtrise du langage HTML et des feuilles de style CSS

Présentation

L’interface utilisateur des formulaires AEM 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 création de liste et la recherche des formulaires de votre organisation.

Forms Portal 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 dans votre jeu de styles CSS.

Pour créer un modèle personnalisé pour divers composants de Forms Portal, suivez la procédure ci-après.

Création d’un modèle personnalisé

  1. Créez un noeud sling:Folder sous */apps *

    Ajoutez une propriété « fpContentType ». Spécifiez les valeurs adéquates pour la propriété en fonction du composant pour lequel vous définissez le modèle personnalisé.

    • Composant Recherche et énumérateur : « /libs/fd/fp/formTemplate »

    • Composant Drafts & Submissions :

      • Section Brouillons : /libs/fd/fp/draftsTemplate
      • Section Envois : /libs/fd/fp/submissionsTemplate

    • Component Lien : /libs/fd/fp/linkTemplate

    Ajoutez un titre que vous souhaitez afficher lors de la sélection des modèles de disposition.

    *Remarque : le titre peut être différent du nom du nœud sling:Folder que vous avez créé. *
    L’image ci-après illustre la configuration pour le composant Recherche et énumérateur. Création d’un nœud sling:Folder

  2. Créez un fichier template.html dans ce dossier qui servira de modèle personnalisé.

  3. Créez le modèle personnalisé et utilisez des métadonnées personnalisées comme indiqué ci-dessous.

Exemple fonctionnel

Vous trouverez ci-dessous un exemple d’implémentation d’un modèle personnalisé dans lequel Forms Portal acquiert une disposition Geometrixx Gov Card Layout pour le composant Recherche et énumérateur.

<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 relatives aux modèles personnalisés

Un modèle personnalisé pour tout composant Forms Portal comprend des entrées répétables et non répétables. Les entrées répétables sont les entités de base des listes. Les composants Recherche et énumérateur, Brouillons et envois et Lien sont des exemples d’entrées répétables.

Forms Portal fournit une syntaxe pour que les espaces réservés affichent des métadonnées personnalisées/prêtes à l’emploi. Les espaces réservés sont remplis après l’affichage des résultats des formulaires, des brouillons ou des envois.

Pour inclure une entrée répétable, configurez la valeur de l’attribut data-repeatable sur true.

*Dans l’exemple présenté, deux éléments Div se trouvent dans la partie supérieure du modèle personnalisé. Le premier, 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, à savoir un formulaire dans le cas présent. L'attribut data-repeatable présent 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 particulier du formulaire, ajoutez la propriété $metadata_prop à l’emplacement.

Dans cet exemple, la propriété des métadonnées est utilisée dans plusieurs instances. Par exemple, il est utilisé dans description,name,formUrl,htmlStyle,pdfUrl,pdfStyle​et <a1. 2/>chemin de la manière prescrite.

Métadonnées prêtes à l’emploi

Les différents composants de Forms Portal fournissent des jeux exclusifs de métadonnées prêtes à l’emploi que vous pouvez utiliser pour les listes.

Composant Search & Lister

  • Title : titre du formulaire

  • name : nom du formulaire (il s’agit généralement du titre)

  • description : description du formulaire.

  • formUrl : URL permettant de générer le formulaire au format HTML

  • pdfUrl : URL permettant de générer le formulaire au format PDF

  • assetType : type de la ressource. Les valeurs valides sont Form, PDF Form, Print Form et Adaptive Form.

  • htmlStyle et pdfStyle : style d’affichage des icônes HTML et PDF utilisées pour le rendu. Les valeurs valides sont "__FP_display_none" ou blank

    Remarque : Veillez à 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) :

  1. Prise en charge des localisations : Pour localiser un texte statique, utilisez l'attribut ${localize-YOUR_TEXT​} et rendez la valeur localisée disponible, le cas échéant.

    Dans l'exemple présenté, les attributs ${localize-Apply} et ${localize-Download} sont utilisés pour localiser les termes Apply et Download.

  2. Prise en charge du tri : cliquez sur l'élément HTML pour trier les résultats de la recherche. Pour mettre en œuvre le tri dans une disposition de tableau, ajoutez l’attribut « data-sortKey » à l’en-tête spécifique du tableau. 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.

  3. 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 du texte d’info-bulle HTML enregistré dans la boîte de dialogue de modification, utilisez l’attribut ${config-htmlLinkText}. De même, pour le texte d’info-bulle PDF, utilisez l’attribut ${config-pdfLinkText} .

  • Title : titre du formulaire
  • formUrl : URL permettant de générer le formulaire au format HTML
  • target : attribut cible du lien. Les valeurs valides sont les suivantes : "_blank" » et "_self".
  • linkText : légende du lien.

Composant Brouillons et envois

  • Path : chemin du nœud des métadonnées de bouillon/envoi. Utilisez-la avec l’extension .HTML comme URL pour ouvrir un brouillon ou un envoi.
  • contextPath : chemin du contexte de l’instance AEM.
  • firstLetter : première lettre (majuscule) du titre du formulaire adaptatif qui a été enregistré en tant que brouillon ou envoyé.
  • formName : titre du formulaire adaptatif qui a été enregistré en tant que brouillon ou envoyé.
  • draftID : identifiant du brouillon répertorié (à utiliser uniquement dans le modèle pour la section Brouillons).
  • submitID : identifiant de l’envoi répertorié (à utiliser uniquement dans le modèle pour la section Envois).
  • status : état du formulaire envoyé. (A utiliser uniquement dans le modèle pour la section Envois).
  • description : description du formulaire adaptatif associé au brouillon ou à l’envoi.
  • diffTime : différence entre l’heure actuelle et la dernière action d’enregistrement du brouillon. Il peut s’agir également de la différence entre l’heure actuelle et la dernière action d’envoi pour l’envoi.
  • iconClass : classe CSS utilisée pour afficher la première lettre du brouillon/envoi. Forms Portal comprend les classes suivantes, qui fournissent divers arrière-plans colorés.
  • owner : utilisateur ayant créé le brouillon/envoi.
  • Today : date de création du brouillon ou de l’envoi au format JJ:MM:AAAA.
  • TimeNow : heure de création du brouillon ou de l’envoi au format HH:MM:SS.

Remarque :

  1. Pour l’option de suppression dans la section Brouillons sous le composant Brouillons et envois, appelez la classe CSS "__FP_deleteDraft". En outre, incluez l’attribut "draftID" avec la valeur ${draftID}, qui est l’ID de brouillon du brouillon correspondant.

  2. Lors de la création de liens pour ouvrir des brouillons et des envois, vous pouvez spécifier $path.html comme valeur de l'attribut href pour la balise d'ancrage.

Nœud Drafts and Submission

A. Elément conteneur

Métadonnées B. "path" avec une hiérarchie fixe pour obtenir la miniature stockée pour chaque formulaire.

C.Attribut répétable aux données utilisé pour la section de modèle de chaque formulaire

D. Pour localiser la chaîne "Apply"

E. Utilisation de la propriété de configuration pdfLinkText

F. Utilisation des métadonnées "pdfUrl"

Conseils, astuces et problèmes connus

  1. N’utilisez pas de guillemet simple (’) dans un modèle personnalisé.
  2. Pour les métadonnées personnalisées, stockez cette propriété sur le noeud jcr:content/metadata uniquement. Si vous le stockez à un autre emplacement, Forms Portal ne peut pas afficher les métadonnées.
  3. Vérifiez que le nom d’une métadonnée personnalisée ou existante ne contient pas de signe deux-points (😃. S’il en contient un, vous ne pouvez pas l’afficher dans l’interface utilisateur.
  4. data- repeatablen’a aucune signification pour un composant ​​Linkcomponent. Adobe recommande d’éviter l’utilisation de cette propriété dans le modèle d’un composant Lien.

Articles connexes

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free