Composants pour la création de pages

Les composants suivants sont conçus pour être utilisés lors de la création de contenu pour une page web standard. Ils forment un sous-ensemble des composants disponibles « prêts à l’emploi » pour une installation standard d’AEM.

Certains d’entre eux sont immédiatement visibles dans le sidekick, d’autres sont également disponibles en les activant/désactivant en mode de conception.

Les composants sont disponibles lors de la modification d’une page à partir de l’onglet Composants du sidekick et du sélecteur Insérer un nouveau composant (lorsque vous double-cliquez dans la zone Faire glisser des composants ou éléments ici).

Vous pouvez sélectionner un composant et le faire glisser vers l’emplacement souhaité sur votre page, puis sélectionner Modifier le contenu et les propriétés.

Les composants sont triés en plusieurs catégories (groupes de composants) y compris (pour la création de page) :

• Général : comprend des composants de base, y compris du texte, des images, des tableaux, des graphiques, etc.
• Colonnes : comprend les composants nécessaires à la mise en page du contenu.
• Formulaire : comprend tous les composants nécessaires pour créer un formulaire.

Les composants de type Général sont des composants de base qui servent à créer du contenu.

Vous pouvez définir un lien avec un titre et une description.

Le composant d’image adaptative génère des images dimensionnées en fonction de la fenêtre dans laquelle s’ouvre la page web. Pour utiliser le composant, vous devez fournir une image issue du système de fichiers ou du gestionnaire des actifs numériques. Si la page web s’ouvre, le navigateur web télécharge une copie de l’image qui a été redimensionnée, afin qu’elle s’adapte à la fenêtre active. 

Les caractéristiques suivantes permettent de déterminer la taille de la fenêtre :

• Écran du périphérique : les appareils mobiles affichent généralement les pages web sur la totalité de l’écran. 
• Taille de la fenêtre du navigateur web : les utilisateurs d’ordinateurs de bureau et portables peuvent redimensionner les fenêtres du navigateur web.

Par exemple, le composant génère une petite image lorsque la page web s’ouvre sur un téléphone mobile et une image de taille moyenne sur une tablette. Sur un ordinateur portable, le composant génère une grande image lorsque la page s’ouvre dans un navigateur plein écran. Si la taille du navigateur est réduite, le composant s’adapte en générant une image plus petite avant d’actualiser la vue.

Utilisez les fichiers image avec les extensions suivantes dans le composant d’image adaptative :

• .jpg
• .jpeg
• .png
• .gif **

Le tableau suivant répertorie la largeur de l’image générée en fonction de la largeur de la fenêtre d’affichage. La hauteur de l’image générée est calculée pour préserver le rapport L/H et éviter l’apparition de bandes blanches sur les bords de l’image. Il se peut aussi que l’image soit recadrée.

Si l’image est au format JPEG, sa qualité peut aussi dépendre de la taille de la fenêtre d’affichage, comme suit :

• Faible (0,42)
• Moyenne (0,82)
• Elevée (1)

La boîte de dialogue permet de modifier les propriétés pour votre instance du composant Image adaptative. Parmi ces propriétés, nombreuses sont celles qui sont communes au composant d’image sur lequel il est basé. Les propriétés sont disponibles dans deux onglets :

• Image
  • Image
    Faites glisser une image à partir de l’outil de recherche de contenu ou cliquez pour ouvrir une fenêtre de recherche dans laquelle vous pouvez charger une image. Ensuite, vous pouvez la recadrer, la faire pivoter ou la supprimer. Pour effectuer un zoom avant ou arrière sur l’image, utilisez le curseur situé sous l’image (au-dessus des boutons OK et Annuler).
  • Recadrer
    Recadrez une image en faisant glisser ses bords.
  • Rotation
    Cliquez plusieurs fois sur Rotation pour faire pivoter l’image dans la position souhaitée.
  • Effacer
    Permet de supprimer l’image actuelle.
• Avancé
  • Titre
    Le composant Image adaptative n’utilise pas cette propriété.
  • Texte de remplacement
    Texte secondaire à utiliser pour l’image.
  • Lier à
    Le composant Image adaptative n’utilise pas cette propriété.
  • Description
    Le composant Image adaptative n’utilise pas cette propriété.

Pour obtenir des informations sur la personnalisation du composant Image adaptive, reportez-vous à la section Présentation du composant Image adaptive.

Le composant Carrousel permet d’afficher les images associées à des pages individuelles :

• une à la fois ;
• pour une courte période ;
• dans l’ordre que vous spécifiez ;
• avec un délai que vous spécifiez.

Des contrôles « cliquables » permettent également à l’utilisateur de parcourir les pages affichées en temps réel, à la demande. Cliquer sur l’image de page actuellement visible vous permet d’accéder à cette page. C’est-à-dire que le carrousel agit comme une commande de navigation.

Ces propriétés sont disponibles dans deux onglets :

• Carrousel
  Vous spécifiez ici la manière dont le carrousel fonctionne :
  
  • Vitesse de lecture
    Le temps en millisecondes avant l’affichage de la diapositive suivante.
  • Temps de transition
    Le temps en millisecondes de transition entre deux diapositives.
  • Type des commandes
    Diverses options sont disponibles dans un menu déroulant ; par exemple, les boutons Précédent/Suivant ou les commutateurs haut-droit.
    
• Liste
  Vous spécifiez ici la manière dont les pages sont incluses dans le carrousel :
  • Construire la liste avec
    Il existe plusieurs manières de construire une liste de pages : Pages enfants, Liste fixe, Recherche ou Recherche avancée (toutes décrites ci-dessous).
    Quelle que soit la méthode employée, chacune des pages que vous ajoutez à la liste doit déjà comporter une image qui lui est associée, car c’est cette image qui s’affiche dans le carrousel. Si une page donnée ne comporte pas d’image sous ses propriétés de page, vous devez associer une image à la page avant de commencer, sinon le carrousel affiche une page vide (ou presque vide). Voir Modification des propriétés de page.
    Selon l’élément que vous choisissez, un nouveau panneau s’affiche :
    • Options des pages enfants
      • Page parente
        Spécifiez un chemin d’accès manuellement ou à l’aide du sélecteur. Laissez vide pour utiliser la page actuelle comme page parente.
    • Options de la liste fixe
      • Pages
        Sélectionnez une liste de pages. Cliquez sur + pour ajouter des entrées et sur les touches haut/bas pour changer l’ordre.
    • Options de recherche
      • Démarrer dans
        Spécifiez un chemin de départ manuellement ou à l’aide du sélecteur.
        
      • Requête de recherche
        Entrez une requête de recherche en texte brut.
    • Options de la recherche avancée
      • Notation des prédicats de Query Builder
        Entrez une requête de recherche à l’aide de la notation des prédicats de Query Builder. Par exemple, entrez « fulltext=Marketing » pour afficher dans le carrousel toutes les pages comportant le terme « Marketing » dans leur contenu.
        Voir API QueryBuilder pour consulter une discussion complète sur les expressions de requête et d’autres exemples.
  • Classer par
    Sélectionnez jcr:title, jcr:created, cq:lastModified ou cq:template dans le menu déroulant.
    
  • Limite
    Nombre maximal d’éléments que vous souhaitez utiliser dans le carrousel (facultatif).

Le composant Graphique permet d’ajouter un histogramme ou un graphique en courbes ou circulaire. AEM crée un graphique à partir des données que vous fournissez en les tapant directement dans l’onglet Données ou en les copiant-collant dans une feuille de calcul.

• Données
  • Données de graphique
    Ajoutez vos données de graphique au format CSV ; une virgule (« , ») est utilisée comme séparateur de valeurs.
• Avancé
  • Type de graphique
    Effectuez un choix parmi les types suivants : Histogramme, Graphique en courbes et Graphique circulaire.
  • Texte de remplacement
    Texte de remplacement qui s’affiche à la place du graphique.
  • Largeur
    Largeur du graphique en pixels.
  • Hauteur
    Hauteur du graphique en pixels.

L’exemple suivant illustre des données de graphique suivies de l’histogramme qui en résulte :

Des fragments de contenu sont créés et gérés sous forme de ressources indépendantes de la page. Vous pouvez ensuite utiliser ces fragments et leurs variantes lors de la création de vos pages de contenu.

Cette option permet de transférer un fichier compressé qui contient un bloc de conception.

Le composant Télécharger crée un lien dans la page web sélectionnée pour télécharger un fichier spécifique. Faites glisser un élément à partir de l’Outil de recherche de contenu ou téléchargez un fichier.

• Télécharger
  • Description
    Courte description affichée avec le lien de téléchargement.
  • Fichier
    Fichier disponible pour être téléchargé sur la page web résultante. Faites glisser un élément à partir de l’Outil de recherche de contenu ou cliquez dans la zone pour charger le fichier à télécharger.

L’exemple suivant montre le composant Télécharger dans Geometrixx :

Le composant d’intégration d’application externe (Externe) permet d’incorporer des applications externes dans une page AEM en utilisant un iframe.

• Externe
  • Application cible
    Indiquez l’URL de l’application web à intégrer, par exemple :
        http://en.wikipedia.org/wiki/Main_Page
    
  • Transmettre les paramètres
    Cochez les cases correspondant aux paramètres à transmettre à l’application, lorsque cela s’avère nécessaire.
  • Largeur et Hauteur
    Définissez la taille de l’iframe.

L’application externe est intégrée au système de paragraphes de la page AEM, par exemple, lorsque vous utilisez une application cible de http://en.wikipedia.org/wiki/Main_Page :

Le composant Flash vous permet de charger une animation Flash. Faites glisser un élément Flash à partir de l’Outil de recherche de contenu ou utilisez la boîte de dialogue :

• Flash
  • Animation Flash
    Le fichier d’animation Flash. Faites glisser un élément à partir de l’Outil de recherche de contenu ou cliquez pour ouvrir une fenêtre de recherche.
  • Taille
    Dimensions en pixels de la zone d’affichage contenant l’animation.
• Autre image
  Autre image à afficher.
• Avancé
  
  • Menu contextuel
    Indique si le menu contextuel doit être affiché ou masqué.
  • Mode Fenêtre
    Permet de spécifier comment doit apparaître la fenêtre (opaque, transparente ou comme une fenêtre distincte, par exemple).
  • Couleur de fond
    Couleur de fond sélectionnée dans la palette de couleurs fournie.
  • Version minimale
    Version minimale d’Adobe Flash Player requise pour exécuter l’animation. La valeur par défaut est la version 9.0.0.
  • Attributs
    Permet de spécifier les autres attributs nécessaires.

Le composant Image affiche une image et le texte qui l’accompagne selon les paramètres définis.

Vous pouvez charger une image, puis la modifier et la manipuler (par exemple, la recadrer, la faire pivoter ou y ajouter un lien/titre/texte).

Vous pouvez faire glisser et déposer une image à partir de l’Outil de recherche de contenu directement sur le composant ou sa boîte de dialogue d’édition. Vous pouvez également double-cliquer dans la zone centrale de la boîte de dialogue d’édition pour parcourir votre système de fichiers local et charger une image. Les deux onglets de la boîte de dialogue d’édition contrôlent également toutes les définitions, ainsi que la manipulation de l’image :

Lorsqu’une image est chargée, vous pouvez configurer ce qui suit :

• Mapper
  Pour faire correspondre une image, sélectionnez Mapper. Vous spécifiez ensuite comment créer l’image interactive (rectangle, polygone, etc.) et l’emplacement où doit pointer la zone.
• Recadrer
  Sélectionnez cette option pour recadrer une image à l’aide de la souris.
• Rotation
  Pour faire pivoter une image, sélectionnez Rotation, à plusieurs reprises si nécessaire.
• Effacer
  Permet de supprimer l’image actuelle.
• Barre de zoom Pour effectuer un zoom avant ou arrière sur l’image, utilisez le curseur situé sous l’image (au-dessus des boutons OK et Annuler).
  
• Titre
  Titre de l’image.
• Texte de remplacement
  Texte de remplacement à utiliser lors de la création de contenu accessible.
  
• Lier à
  Créez un lien vers les ressources ou d’autres pages de votre site web.
  
• Description
  Description de l’image.
• Taille
  Permet de définir la hauteur et la largeur de l’image.

L’image finale (avec Titre et Description) peut s’afficher comme suit :

Le composant Liste vous permet de configurer des critères de recherche pour afficher une liste :

• Liste
  • Construire la liste avec
    Indiquez ici où la liste doit récupérer son contenu. Il existe plusieurs méthodes :
  • Selon l’élément que vous choisissez, un nouveau panneau s’affiche :
    • Options des pages enfants
      • Enfants de (Page parente)
        Spécifiez un chemin d’accès manuellement ou à l’aide du sélecteur. Laissez vide pour utiliser la page actuelle comme page parente.
    • Options de la liste fixe
      • Pages
        Sélectionnez une liste de pages. Cliquez sur + pour ajouter des entrées et sur les touches haut/bas pour changer l’ordre.
    • Options de recherche
      • Démarrer dans
        Spécifiez un chemin de départ manuellement ou à l’aide du sélecteur.
      • Requête de recherche
        Entrez une requête de recherche en texte brut.
    • Options de la recherche avancée
      • Notation des prédicats de Query Builder
        Entrez une requête de recherche à l’aide de la notation des prédicats de Query Builder. Par exemple, entrez « fulltext=Marketing » pour afficher dans le carrousel toutes les pages comportant le terme « Marketing » dans leur contenu.
        Voir API QueryBuilder pour consulter une discussion complète sur les expressions de requête et d’autres exemples.
    • Tags
      Permet de spécifier la Page parente, les Tags / Mots-clés et les critères de correspondance.
  • Afficher comme
    Permet de spécifier la façon dont doivent être répertoriés les éléments (Liens, Teasers et Actualités).
  • Classer par
    Permet d’indiquer si la liste doit être triée et, dans l’affirmative, le critère de tri. Vous pouvez entrer un critère ou en sélectionner un dans la liste déroulante fournie.
  • Limite
    Permet de spécifier le nombre maximal d’éléments à afficher dans la liste.
  • Activer le flux
    Indique si un flux RSS doit être activé pour la liste.
  • Paginer après
    Spécifiez ici le nombre d’éléments de liste à afficher à la fois. Une liste qui contient un nombre d’éléments supérieur à celui spécifié utilise la pagination pour s’afficher en plusieurs parties.

L’exemple suivant illustre un composant Liste affichant une liste de pages enfants. La conception est contrôlée par les définitions CSS personnalisées d’une conception de site.

Ces options fournissent les champs de nom d’utilisateur et de mot de passe.

Vous pouvez configurer :

• Se connecter
  • Libellé de section
    Texte d’introduction pour les champs de saisie.
    
  • Libellé du nom de l’utilisateur
    Texte pour libeller le champ du nom d’utilisateur.
    
  • Libellé du mot de passe
    Texte pour libeller le champ du mot de passe.
    
  • Libellé du bouton Se connecter
    Texte pour le bouton de connexion.
    
  • Rediriger vers
    Spécifiez la page de votre site web qui doit s’ouvrir une fois l’utilisateur connecté.
    
• Déjà connecté
  • Libellé du bouton Continuer
    Texte pour indiquer que l’utilisateur est déjà connecté.
    
    

• Titre
  • Titre
    Spécifiez le texte du titre à afficher.
  • Lien
    Spécifiez la page (produit) pour laquelle l’état de la commande doit être affiché.
  • Type/Taille
    Sélectionnez l’une des options proposées.
    

Le composant Référence permet de référencer du texte à partir d’une autre page de votre site web AEM (dans l’instance actuelle). Le contenu du paragraphe référencé s’affiche alors comme s’il faisait partie de la page actuelle. Le contenu est mis à jour lorsque le paragraphe source est modifié (peut nécessiter une actualisation de la page).

• Référence de paragraphe
  • Référence
    Spécifiez le chemin d’accès à la page et au paragraphe à référencer (y compris le contenu).
    

Pour spécifier le chemin d’accès à un paragraphe, vous devez le suffixer (vers la page) avec :

.../jcr:content/par/<paragraph-ID>

Par exemple :

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par/similar-products

Outre qu’il référence un paragraphe spécifique, le chemin peut également être modifié pour spécifier un système de paragraphes entier. Pour ce faire, vous pouvez suffixer le chemin avec :

/jcr:content/par

Par exemple :

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par

Une fois configuré, le contenu s’affiche exactement comme sur la page source. Le fait qu’il s’agisse d’une référence n’apparaît que lorsque vous ouvrez le composant pour le modifier :

Le composant Rechercher offre des capacités de recherche à votre page.

Vous pouvez configurer les options suivantes :

• Rechercher
  • Types de nœuds
    Si la recherche doit se limiter à un type de nœud spécifique, indiquez-le ici. Par exemple, cq:Page.
  • Chemin d’accès de la recherche
    Spécifiez la page racine de la branche à rechercher.
    
  • Texte du bouton de recherche
    Nom affiché sur le bouton de recherche actuel.
  • Texte des statistiques
    Texte affiché au-dessus des résultats de la recherche.
  • Aucun texte de résultat
    Si la recherche ne renvoie aucun résultat, le texte entré ici est affiché.
  • Vérifier l’orthographe du texte
    Si quelqu’un d’autre entre un terme similaire, ce texte s’affiche avant ce terme.
    Par exemple, si vous tapez geometrixxe, le système affiche « Vouliez-vous dire : geometrixx ».
  • Texte des pages semblables
    Ce texte s’affiche en regard d’un résultat pour des pages similaires. Cliquez sur ce lien pour afficher les pages ayant un contenu similaire.
  • Texte des recherches associées
    Texte affiché en regard des recherches de termes et rubriques associés.
  • Texte des tendances de recherche
    Titre situé au-dessus des termes de recherche saisis par les utilisateurs.
  • Libellé des pages de résultats
    Texte qui apparaît en bas de cette liste avec des liens vers d’autres pages de résultats.
  • Libellé précédent
    Nom qui apparaît sur le lien vers les pages de recherche précédentes.
  • Libellé suivant
    Nom qui apparaît sur le lien vers les pages de recherche suivantes.

L’exemple ci-dessous montre le composant Recherche après une recherche du mot geometrixx dans le répertoire racine d’une installation standard. Il présente également la pagination des résultats :

L’exemple suivant montre un terme de recherche mal orthographié et non disponible :

Liste automatique du plan du site qui (avec les paramètres par défaut) répertorie toutes les pages (sous forme de liens actifs) du site web actuel. Par exemple (extrait) :

 Si nécessaire, vous pouvez configurer l’option suivante :

• Plan du site
  • Chemin racine
    Chemin à partir duquel doit commencer la liste.

Ce composant vous permet de charger une série d’images à afficher sous forme de diaporama dans la page. Vous pouvez ajouter ou supprimer des images et leur attribuer un titre. Sous l’onglet Avancé, vous pouvez également spécifier la taille de la zone d’affichage.

Vous pouvez configurer :

• Diapositives
  • Nouvelle diapositive
    Spécifiez une sélection de diapositives à l’aide des boutons Ajouter (et Supprimer).
    
  • Titre
    Spécifiez un titre le cas échéant. Celui-ci s’affiche en superposition sur la diapositive appropriée.
• Avancé
  • Taille
    Permet de spécifier la largeur et la hauteur en pixels.
    

Le composant Diaporama affiche ensuite de façon répétée chaque image en séquence pendant une courte durée, avant de passer en fondu à la diapositive suivante :

Le composant Tableau est préconfiguré pour vous permettre de construire, remplir et formater un tableau. Dans la boîte de dialogue, vous pouvez configurer le tableau et créer le contenu comme suit :

• de bout en bout ; ou
• en copiant-collant une feuille de calcul ou un tableau à partir d’un éditeur externe (Excel, OpenOffice, Bloc-notes, etc.).
  

La capture d’écran ci-après illustre l’utilisation du composant Tableau (la conception est déterminée par le CSS propre au site) :

Un nuage de tags (balises) présente une sélection graphique de balises appliquées au contenu dans votre site web :

Lorsque vous configurez le composant Nuage de tags, vous pouvez spécifier les options suivantes :

• Tags à afficher
  Emplacement où sont collectées les balises à afficher : page, page avec tous les enfants ou toutes les balises.
• Page
  Sélectionnez la page à référencer.
  
• Aucun lien sur les balises
  Permet de spécifier si les balises affichées doivent se comporter comme des liens.

Pour plus d’informations sur l’application de balises, consultez la rubrique Utilisation des balises.

Le composant Texte permet d’entrer un bloc de texte à l’aide de l’éditeur WYSIWYG, avec une fonctionnalité fournie par l’éditeur de texte enrichi. Utilisez les icônes disponibles pour mettre en forme le texte, y compris les caractéristiques de police, l’alignement, les liens, les listes et la mise en retrait.

L’onglet Styles de la boîte de dialogue Modifier vous permet également de définir les options suivantes :

• Espacement
• Style de texte

Le texte mis en forme s’affiche alors sur la page ; la conception réelle dépend du CSS du site :

Pour plus d’informations sur le composant Texte et les fonctions de l’éditeur de texte enrichi, reportez-vous à la page Éditeur de texte enrichi.

Outre le mode d’édition de texte enrichi basé sur la boîte de dialogue, AEM propose un mode d’édition statique qui permet l’édition directe du texte tel qu’il est affiché dans la mise en page.

Le composant Texte et image permet d’ajouter un bloc de texte et une image. Vous pouvez également ajouter et modifier du texte et des images séparément. Pour plus d’informations, reportez-vous aux composants Texte et Image.

Vous pouvez configurer :

• Styles de composant (Styles)
  Permet d’aligner l’image sur la gauche ou sur la droite. Par défaut, le contenu est aligné à gauche, avec l’image à gauche.
• Propriétés de l’image (Propriétés d’image avancées)
  Permet de spécifier ce qui suit :
  • Ressource image
    Transférez l’image nécessaire.
  • Titre
    Titre du bloc de texte ; il s’affiche lorsque l’utilisateur pointe dessus avec la souris.
  • Texte de remplacement
    Texte de remplacement à afficher lorsque l’image ne peut pas être affichée. Si rien n’est indiqué, le titre est affiché.
  • Lier à
    Spécifiez un chemin cible.
    
  • Description
    Description de l’image.
  • Taille
    Permet de définir la hauteur et la largeur de l’image.

L’exemple suivant illustre un composant Texte et image avec l’image alignée sur la gauche :

Le composant Titre permet d’afficher les éléments suivants :

• le nom de la page actuelle (lorsque le champ Titre est vide) ;
• le texte spécifié dans le champ Titre.

Vous pouvez configurer :

• Titre
  Si vous souhaitez utiliser un autre nom que le titre de la page, saisissez-le ici.
• Lien
  URI si le titre doit se comporter comme un lien.
• Type/Taille
  Sélectionnez Petite ou Grande dans la liste déroulante. Petite est générée sous la forme d’une image. Grande est générée sous la forme de texte.

L’exemple suivant illustre un composant Titre affiché (la conception est déterminée par le CSS propre au site).

Le composant Vidéo permet de placer un élément vidéo prédéfini « prêt à l’emploi » sur une page.

Voir également configurer vos profils vidéo pour une utilisation des profils avec les éléments HTML5.

Une fois une instance du composant placée sur la page, vous pouvez configurer les options suivantes :

• Vidéo
  • Contenu vidéo
    Transférez ou déposez votre contenu vidéo.
    
  • Taille
    La taille native de la vidéo (largeur x hauteur en pixels) s’affiche dans les cases en regard de l’option Taille (voir ci-dessus). Entrez ici manuellement les dimensions de largeur et de hauteur si vous souhaitez remplacer les dimensions natives de la vidéo. Cliquez sur OK pour abandonner la boîte de dialogue.

Les colonnes constituent un mécanisme pour contrôler la disposition du contenu dans AEM. Dans une installation standard, des composants sont fournis pour créer deux et/ou trois colonnes.

L’exemple suivant illustre l’utilisation des composants 2 colonnes et 3 colonnes. Vous pouvez utiliser les espaces réservés pour des nouveaux composants :

Composant Contrôle de colonne qui est égal par défaut à 2 colonnes.

Composant Contrôle de colonne qui est égal par défaut à 3 colonnes.

Le composant Contrôle de colonne permet aux utilisateurs de sélectionner la manière de diviser le contenu dans le panneau principal de la page web en plusieurs colonnes. Les utilisateurs peuvent sélectionner le nombre de colonnes requis (à partir d’une liste prédéfinie), puis créer, supprimer ou déplacer le contenu dans chacune des colonnes.

• Contrôle de colonne
  • Disposition des colonnes
    Permet de sélectionner le nombre de colonnes à restituer. Une fois créée, chaque colonne comporte son propre lien pour faire glisser les composants ou ressources lors de l’ajout de contenu.

Les composants Formulaire servent à créer des formulaires permettant aux visiteurs d’envoyer leur saisie. Les formulaires et leurs composants peuvent être utilisés pour recueillir diverses informations, dont les commentaires d’un utilisateur (un questionnaire de satisfaction client, par exemple) et des informations le concernant (un enregistrement d’utilisateur, par exemple).

Les formulaires sont constitués de plusieurs composants différents :

• Formulaire
  Le composant Formulaire définit le début et la fin d’un nouveau formulaire sur une page. D’autres composants peuvent être placés entre ces éléments comme des tableaux, des téléchargements, etc. 
• Champs de formulaires et éléments
  Les champs de formulaires et les éléments peuvent inclure des zones textuelles, des cases d’option, des images, etc. L’utilisateur effectue souvent une action dans un champ de formulaire, comme saisir du texte. Voir les éléments de formulaires individuels pour plus d’informations.
• Composants Profil
  Les composants Profil sont associés aux profils des visiteurs utilisés pour la collaboration sociale et pour tout autre domaine où la personnalisation des visiteurs est requise. 

Vous trouverez ci-dessous un exemple de formulaire constitué du composant Formulaire (début et fin) avec deux champs de texte de formulaire pour la saisie et un champ de texte général pour le texte d’introduction, ainsi qu’un bouton Envoyer.

Bien que chaque composant de formulaire ait une finalité différente, nombre d’entre eux comportent des options et des paramètres semblables.

Les onglets suivants sont disponibles dans la boîte de dialogue lors de la configuration d’un composant de formulaire :

• Titre et texte
  Spécifiez ici les informations de base, comme le titre du formulaire et le texte d’accompagnement. Le cas échéant, vous pouvez également définir d’autres informations essentielles, par exemple s’il s’agit d’un champ à sélection multiple, ou les différents éléments pouvant être sélectionnés.
• Valeurs initiales
  Permet d’indiquer une valeur par défaut.
• Contraintes
  Permet d’indiquer si un champ est obligatoire et les contraintes qui lui sont appliquées (doit être numérique, par exemple).
• Style
  Indique la taille et le style des champs.

Ces onglets vous fournissent les paramètres nécessaires ; ceux-ci peuvent dépendre du type de composant individuel, mais peuvent inclure :

• Titre et texte
  • Nom de l’élément
    Nom de l’élément de formulaire. Celui-ci indique où sont stockées les données de référentiel.
    Il s’agit d’un champ obligatoire qui doit contenir uniquement les caractères suivants :
    • Caractères alphanumériques
    • _ . / : -
  • Titre
    Titre affiché avec le champ. Si rien n’est indiqué, le titre par défaut s’affiche.
  • Description
    Permet de fournir des informations supplémentaires pour l’utilisateur, le cas échéant. Sur le formulaire, la description s’affiche sous le champ dans une police plus petite que le titre.
    
  • Afficher/masquer
    Détermine les conditions de visibilité du champ.
• Valeurs initiales
  • Valeur par défaut
    Il s’agit de la valeur affichée dans le champ à l’ouverture du formulaire ; c’est-à-dire, avant que l’utilisateur n’ait saisi la moindre donnée.
• Contraintes
  • Obligatoire
    Cette option qui dépend du type de composant de formulaire, fournit une ou plusieurs cases à cocher pour indiquer que ce champ ou certaines parties de ce champ sont obligatoires.
    
  • Message obligatoire
    Un message qui informe les utilisateurs que ce champ est obligatoire ; un champ obligatoire est également marqué d’un astérisque.
    
  • Contrainte
    Les contraintes disponibles dépendent du type de composant de formulaire.
    
  • Message de contrainte
    Message qui informe les utilisateurs de ce qui est obligatoire.
    
• Style
  • Taille
    En lignes et en colonnes.
    
  • Largeur
    En pixels.
    
  • CSS.

Le composant Formulaire définit le début et la fin d’un formulaire à l’aide des éléments Début du formulaire et Fin de formulaire. Ces deux paragraphes sont toujours utilisés conjointement pour s’assurer que le formulaire est correctement défini.

Entre le début et la fin d’un formulaire, vous pouvez ajouter des composants qui définissent les champs de saisie réels à l’intention des utilisateurs.

Ce composant est nécessaire pour définir le début d’un nouveau formulaire sur la page. Vous pouvez configurer les options suivantes :

• Formulaire
  • Page de remerciement
    Page à référencer pour remercier les visiteurs qui ont saisi des données. Si ce champ est laissé vide, le formulaire est réaffiché après la soumission.
  • Démarrer le workflow
    Détermine quel workflow est déclenché une fois le formulaire envoyé.
• Avancé
  • Type d’action
    Un formulaire nécessite une action. Celle-ci définit l’opération dont l’exécution est déclenchée avec les données soumises par l’utilisateur (similaire à l’action= dans HTML). Certaines actions nécessitent une Configuration de l’action correspondante.
    Plusieurs types d’action sont inclus dans une installation AEM standard :
    • Demande de compte
      
    • Créer le contenu
    • Créer une piste
      
    • Créer un compte et le mettre à jour
    • Service de messagerie électronique : créer un abonné et l’ajouter à la liste
    • Service de messagerie électronique : envoyer un message de répondeur automatique
    • Service de messagerie électronique : désabonner l’utilisateur de la liste
    • Modifier la communauté
      
    • Modifier la (les) ressource(s)
      
    • Modifier la (les) ressource(s) contrôlée(s) du workflow
      
    • Courrier
    • Détails de la commande passée
      
    • Mise à jour du profil
      
    • Réinitialiser le mot de passe
      
    • Définir le mot de passe
      
    • Contenu de la boutique
      Il s’agit du type d’action par défaut.
      
    • Stocker le contenu avec les chargements
    • Envoyer la commande
    • Désabonner l’abonné
    • Mettre à jour la commande
      
  • Identifiant du formulaire
    L’identifiant du formulaire identifie de manière unique le formulaire. Utilisez l’identifiant du formulaire lorsque vous avez plusieurs formulaires sur une seule page ; veillez à ce qu’ils utilisent des identifiants différents.
  • Chemin de chargement
    Le chemin d’accès aux propriétés de nœud utilisées pour charger des valeurs prédéfinies dans les champs de formulaire.
    Il s’agit d’un champ facultatif qui spécifie le chemin d’accès à un nœud dans un référentiel. Lorsque ce nœud comporte des propriétés qui correspondent aux noms de champs, les champs appropriés sur le formulaire sont préchargés avec les valeurs de ces propriétés. S’il n’existe aucune correspondance, le champ contient la valeur par défaut.
    Utilisez l’option Chemin de chargement pour prérenseigner le formulaire avec des valeurs dans les champs obligatoires. Voir Préchargement des valeurs de formulaire.
  • Validation du client
    Indique si la validation du client est obligatoire pour ce formulaire (la validation de serveur a toujours lieu). Ceci peut être réalisé en conjonction avec le composant Captcha de formulaires.
  • Type de ressource de validation
    Définit le type de ressource de validation de formulaire si vous souhaitez valider le formulaire entier (et non des champs individuels). Si vous validez le formulaire complet, incluez également l’un des éléments suivants : 
    • Un script pour la validation côté client :
         /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp
    • Un script pour la validation côté serveur :
         /apps/<myApp>/form/<myValidation>/formservervalidation.jsp
  • Configuration de l’action
    Les options disponibles dans Configuration de l’action dépendent du Type d’action sélectionné :
    • Demande de compte
      • Page Créer un compte
        Page utilisée lors de la création d’un compte.
    • Créer le contenu
      • Chemin d’accès au contenu
        Chemin d’accès à tout contenu dont le formulaire produit une image mémoire. Entrez un chemin d’accès qui se termine par une barre oblique /. Celle-ci signifie que pour chaque port de formulaire, un nœud est créé à l’emplacement donné ; par exemple :
            /forms/feedback/
      • Type
        Sélectionnez le type requis.
        
      • Formulaire
        Spécifiez le formulaire.
        
      • Rendu avec
        Sélectionnez l’option requise dans la liste.
        
      • Type de ressource
        Lorsque cette valeur est définie, elle est ajoutée pour chaque commentaire en tant que sling:resourceType..
        
      • Sélecteur d’affichage
    • Créer une piste
      • La piste sera ajoutée à cette liste
        Spécifiez la liste de pistes requise.
    • Créer un compte et le mettre à jour
      • Groupe initial
        Groupe auquel affecter un nouvel utilisateur.
      • Accueil
        Page à afficher après une connexion réussie.
      • Chemin d’accès
        Chemin d’accès (relatif) à l’emplacement de création et de stockage du nouveau compte.
      • Afficher des données...
        Cliquez sur ce bouton pour accéder aux informations concernant les résultats de formulaire dans l’éditeur en masse. Vous avez alors la possibilité d’exporter les informations dans un fichier .tsv (séparé par des tabulations) en vue de l’utiliser, par exemple, dans une feuille de calcul Excel.
    • Courrier
      • Origine
        Entrez l’adresse électronique à partir de laquelle le courrier électronique doit être envoyé.
      • Envoyer à
        Entrez les adresses du ou des destinataires du formulaire.
      • CC
        Entrez les adresses du ou des destinataires en copie (CC).
      • CCI
        Entrez les adresses du ou des destinataires en copie carbone invisible (CCI).
      • Objet
        Entrez l’objet du courrier électronique.
    • Réinitialiser le mot de passe
      • Page Changer le mot de passe
        Page utilisée lors du changement de mot de passe.
    • Stocker le contenu
      • Chemin d’accès au contenu
        Chemin d’accès à tout contenu dont le formulaire produit une image mémoire. Entrez un chemin d’accès qui se termine par une barre oblique /. Celle-ci signifie que pour chaque port de formulaire, un nœud est créé à l’emplacement donné ; par exemple :
            /forms/feedback/
      • Afficher des données...
        Cliquez sur ce bouton pour accéder aux informations concernant les résultats de formulaire dans l’éditeur en masse. Vous avez alors la possibilité d’exporter les informations dans un fichier .tsv (séparé par des tabulations) en vue de l’utiliser, par exemple, dans une feuille de calcul Excel.
    • Stocker le contenu avec les chargements
      Il s’agit des mêmes options que Contenu de la boutique.
      
    • Désabonner l’abonné
      • La piste sera supprimée de cette liste.
        Spécifiez la liste de pistes requise.

Ceci marque la fin du formulaire. Vous pouvez configurer les options suivantes :

• Fin de formulaire
  • Afficher le bouton Envoyer
    Indique si le bouton Envoyer doit être visible ou non.
  • Envoyer le nom
    Identifiant à spécifier si vous utilisez plusieurs boutons Envoyer dans un formulaire.
  • Envoyer le titre
    Nom qui apparaît sur le bouton, Envoyer, par exemple.
  • Afficher le bouton Réinitialiser
    Cochez la case pour que le bouton Réinitialiser soit visible.
  • Réinitialiser le titre
    Nom qui apparaît sur le bouton Réinitialiser.
  • Description
    Informations qui s’affichent sous le bouton.

Ce composant permet à l’utilisateur de saisir un nom de compte :

Ce composant permet d’ajouter une adresse internationale au format suivant :

Le composant est configuré pour une utilisation immédiate, mais vous pouvez modifier la configuration le cas échéant, par exemple en ajoutant des contraintes aux éléments individuels de l’adresse. Lorsque les champs sont laissés vides, les valeurs par défaut sont utilisées.

Le composant Captcha requiert que l’utilisateur saisisse une chaîne alphanumérique comme affichée à l’écran. La chaîne est modifiée à chaque actualisation.

Vous pouvez configurer plusieurs paramètres différents pour ce composant, notamment un message à afficher lorsque la chaîne Captcha n’est pas valide.

Une case à cocher vous permet de créer une liste composée d’une ou de plusieurs cases à cocher (plusieurs d’entre elles peuvent être simultanément cochées).

Vous pouvez spécifier divers paramètres y compris un titre, une description et un nom d’élément. À l’aide des boutons + et -, vous pouvez ajouter ou supprimer des éléments, puis les positionner à l’aide des flèches pointant vers le haut ou vers le bas.

Ce composant vous permet de fournir les champs nécessaires pour saisir les informations de carte de crédit. Vous pouvez le configurer pour spécifier les types de cartes acceptés et les informations requises (par exemple, le code de sécurité).

Une liste déroulante peut être configurée pour être utilisée avec différentes valeurs pouvant être sélectionnées.

Vous pouvez spécifier un titre et des éléments pour qu’ils apparaissent dans la liste. À l’aide des boutons + et -, vous pouvez ajouter ou supprimer des éléments de la liste, puis les positionner à l’aide des flèches pointant vers le haut ou vers le bas. Spécifiez si les utilisateurs sont autorisés à sélectionner plusieurs éléments de la liste, ainsi que tous les éléments qui doivent être automatiquement sélectionnés la première fois qu’ils ouvrent la liste (valeurs initiales).

Le composant Chargement du fichier fournit à l’utilisateur un moyen pour sélectionner un fichier et le télécharger.

Ce composant permet de créer un champ masqué. Ceux-ci peuvent être utilisés à diverses fins, par exemple, lorsque vous devez exécuter une action après avoir soumis le formulaire ou lorsque des données masquées sont nécessaires au post-traitement.

Un bouton d’image permet de créer un bouton comportant vos texte et image :

Le composant Chargement de l’image fournit à l’utilisateur un moyen pour sélectionner un fichier image et le télécharger.

Le champ Lien permet à l’utilisateur de spécifier une URL.

Ce composant est fréquemment utilisé dans le formulaire d’événement de calendrier, pour le champ d’URL/de lien d’un événement.

Ce composant permet à l’utilisateur de saisir son mot de passe :

Ce composant fournit à l’utilisateur deux champs pour :

• la saisie d’un mot de passe ;
• la nouvelle saisie du mot de passe pour vérifier que la saisie est correcte.

Avec les paramètres par défaut, le composant ressemble à celui-ci :

Un groupe de cases d’option fournit une liste composée d’une ou de plusieurs cases d’option (une seule case peut être sélectionnée à un moment donné).

Spécifiez le nom de l’élément avec un titre et une description. À l’aide des boutons + et -, ajoutez ou supprimez des éléments, placez-les à l’aide des touches Haut et Bas et spécifiez une valeur par défaut, le cas échéant :

Ce composant vous permet de créer un bouton Envoyer avec le texte par défaut :

Ou votre propre texte :

Ce champ vous permet de sélectionner des balises :

Vous pouvez spécifier plusieurs paramètres, y compris les espaces de noms qui peuvent être utilisés à l’aide d’un onglet spécialisé :

• Champ de balise
  • Espaces de noms autorisés
    • Geometrixx Outdoors
    • Workflow
    • Forum
    • Photothèque
    • Geometrixx Media
    • Balises standard
    • Marketing
    • Propriétés de l’élément
  • Largeur en pixels
  • Taille de la fenêtre contextuelle

Le champ de texte standard peut être configuré selon la taille et la largeur requises avec votre propre message :

Permet de créer un bouton Envoyer à utiliser dans un workflow.