Didacticiel : Créer une communication interactive

Créer une communication interactive en utilisant tous les blocs de construction

mettre en forme votre communication interactive

Ce didacticiel est une étape de la série Créer votre première série de communications interactives. Il est recommandé de suivre la série dans l’ordre chronologique pour comprendre, exécuter et démontrer le cas d’utilisation complet du didacticiel.

Une fois que vous avez créé tous les blocs de construction, tels que le modèle de données de formulaire, les fragments de document, les modèles et les thèmes pour la version web, vous pouvez commencer à créer une communication interactive.

Les communications interactives peuvent être fournies par deux canaux : impression et web. Vous pouvez également créer une communication interactive en configurant le canal d’impression comme option principale. L’impression comme option principale pour le canal web garantit que le contenu, l’héritage et la liaison des données du canal web sont dérivés du canal d’impression. Elle garantit également que les modifications apportées dans le canal d’impression sont synchronisées dans le canal web. Les auteurs de communication interactive sont toutefois autorisés à interrompre l’héritage pour des composants spécifiques dans le canal web.

Ce didacticiel vous guide pas à pas dans la création de communications interactives pour les canaux d’impression et web. À la fin de ce didacticiel, vous serez capable de :

  • Créer une communication interactive pour le canal d’impression
  • Créer une communication interactive pour le canal web
  • Créer des communications interactives pour les versions impression et web avec l’impression comme option principale

Créer des communications interactives pour les versions impression et web sans aucune synchronisation

Créer une communication interactive pour le canal d’impression

Voici la liste des ressources qui ont déjà été créées dans ce didacticiel et qui sont nécessaires à la création de la communication interactive pour le canal d’impression :

Imprimer le modèle: create_first_ic_print_template

Modèle de données de formulaire: FDM_Create_First_IC

Document de fragments : bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charges_first_ic

Fragments de mise en page : table_lf

Images : PayNow et ValueAddedServices

  1. Connectez-vous à l’instance d’auteur AEM et accédez à Adobe Experience Manager > Formulaires > Formulaires et documents.

  2. Appuyez sur Créer et sélectionnez Communication interactive. L'assistant Créer une communication interactive s'affiche.

  3. Spécifiez create_first_ic dans les champs Titre et Nom. Sélectionnez FDM_Create_First_IC comme modèle de données de formulaire et appuyez sur Suivant.

  4. Dans l'Assistant Canaux :

    1. Spécifiez create_first_ic_print_template comme modèle d’impression et appuyez sur Sélectionner. Assurez-vous que la case Utiliser l'impression comme Principal pour le Canal Web n'est pas cochée.
    2. Spécifiez le dossier Create_First_IC_templates > Create_First_IC_Web_Template comme modèle Web et appuyez sur Sélectionner.
    3. Appuyez sur Créer.

    Un message de confirmation s’affiche pour confirmer que la communication interactive a été créée correctement.

  5. Appuyez sur Modifier pour ouvrir la communication interactive dans le volet droit.

  6. Accédez à l'onglet Ressources et appliquez le filtre pour n'afficher que les fragments de document dans le volet de gauche.

  7. Faites glisser les fragments de documents suivants vers leurs zones cibles dans la communication interactive :

    Fragment de document Zone cible
    bill_details_first_ic BillDetails
    customer_details_first_ic CustomerDetails
    bill_summary_first_ic BillSummary
    summary_charges_first_interactive_communication Frais

    create_first_ic_doc_fragments

  8. Appuyez sur Graphiques dans la zone cible et appuyez sur + pour ajouter un composant Graphique.

  9. Appuyez sur le composant de graphique et sélectionnez configure_icon (Configurer). Les propriétés du graphique s’affichent dans le volet gauche :

    1. Spécifiez un nom pour le diagramme.
    2. Sélectionnez Diagramme circulaire dans la liste déroulante Type de graphique.
    3. Sélectionnez la propriété calltype à partir du type d’objet du modèle de données Calls dans la section Axe X. Appuyez sur done_icon.
    4. Sélectionnez Fréquence dans la liste déroulante Fonctions.
    5. Sélectionnez la propriété calltype dans le type d'objet de modèle de données appels de la section Axe Y. Appuyez sur done_icon.
    6. Appuyez sur done_icon pour enregistrer les propriétés du graphique.
  10. Accédez à l'onglet Ressources et appliquez le filtre pour n'afficher que les fragments de mise en page dans le volet de gauche. Faites glisser le fragment de mise en page table_lf dans la zone cible Appels détaillés.

  11. Sélectionnez le champ de texte dans la colonne Date et appuyez sur configure_icon (Configurer).

  12. Sélectionnez Objet du modèle de données dans la liste déroulante Type de liaison et sélectionnez calls > calldate. Appuyez deux fois sur done_icon pour enregistrer les propriétés.

    De même, créez une liaison avec calltime, callnumber, callduration et callcharges pour les champs texte dans les colonnes Heure, Numéro, Durée et Frais.

  13. Appuyez sur Zone de cible PayNow, puis sur + pour ajouter un composant Image.

  14. Appuyez sur le composant Image et sélectionnez configure_icon (Configurer). Les propriétés de l’image s’affichent dans le volet gauche :

    1. Spécifiez PayNow comme nom de l’image dans le champ Nom.
    2. Appuyez sur Télécharger, sélectionnez l’image enregistrée sur le système de fichiers local, puis appuyez sur Ouvrir.
    3. Appuyez sur done_icon pour enregistrer les propriétés de l’image.
  15. Répétez les étapes 13 et 14 pour ajouter l’image ValueAddedServices à la zone de cible ValueAddedServices.

Créer une communication interactive pour canal web

Voici la liste des ressources qui ont déjà été créées dans ce didacticiel et qui sont nécessaires à la création de la communication interactive pour le canal web :

Modèle Web: Create_First_IC_Web_Template

Modèle de données de formulaire: FDM_Create_First_IC

Document de fragments : bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charges_first_ic

Images : PayNowWeb et ValueAddedServicesWeb

  1. Connectez-vous à l’instance d’auteur AEM et accédez à Adobe Experience Manager > Formulaires > Formulaires et documents.

  2. Appuyez sur Créer et sélectionnez Communication interactive. L'assistant Créer une communication interactive s'affiche.

  3. Spécifiez create_first_ic dans les champs Titre et Nom. Sélectionnez FDM_Create_First_IC comme modèle de données de formulaire et appuyez sur Suivant.

  4. Dans l'Assistant Canaux :

    1. Spécifiez create_first_ic_print_template comme modèle d’impression et appuyez sur Sélectionner. Assurez-vous que la case Utiliser l'impression comme Principal pour le Canal Web n'est pas cochée.
    2. Spécifiez le dossier Create_First_IC_templates > Create_First_IC_Web_Template comme modèle Web et appuyez sur Sélectionner.
    3. Appuyez sur Créer.

    Un message de confirmation s’affiche pour confirmer que la communication interactive a été créée correctement.

  5. Appuyez sur Modifier pour ouvrir la communication interactive dans le volet droit.

  6. Appuyez sur l'onglet Canaux dans le volet de gauche et appuyez sur Web.

  7. Accédez à l'onglet Ressources et appliquez le filtre pour n'afficher que les fragments de document dans le volet de gauche.

  8. Faites glisser les fragments de documents suivants vers leurs zones cibles dans la communication interactive :

    Fragment de document Zone cible
    bill_details_first_ic Détails de la facture
    customer_details_first_ic Détails du client
    bill_summary_first_ic BillSummary
    summary_charges_first_interactive_communication Frais
  9. Appuyez sur Résumé des frais zone de cible, puis sur + pour ajouter un composant Graphique.

  10. Appuyez sur le composant de graphique et sélectionnez configure_icon (Configurer). Les propriétés du graphique s’affichent dans le volet gauche :

    1. Spécifiez un nom pour le diagramme.
    2. Sélectionnez Diagramme circulaire dans la liste déroulante Type de graphique.
    3. Sélectionnez la propriété calltype à partir du type d’objet du modèle de données Calls dans la section Axe X. Appuyez sur done_icon.
    4. Sélectionnez Fréquence dans la liste déroulante Fonctions.
    5. Sélectionnez la propriété calltype dans le type d'objet de modèle de données appels de la section Axe Y. Appuyez sur done_icon.
    6. Appuyez sur done_icon pour enregistrer les propriétés du graphique.
  11. Sélectionnez l’onglet Sources de données dans le volet gauche et faites glisser l’objet de modèle de données calls vers la zone cible Appels détaillés. Toutes les propriétés de l'objet de modèle de données appels s'affichent sous forme de colonnes de tableau dans la zone de cible Appels analysés du volet de droite.

    Selon le cas d’utilisation, vous avez besoin des colonnes Date d’appel, Heure d’appel, Numéro d’appel, Durée d’appel et Frais d’appel dans le tableau.

    table_ic_web

  12. Sélectionnez Mobilenum en-tête de colonne de table et Autres options > Supprimer la colonne. De même, supprimez la colonne calltype.

  13. Sélectionnez l'en-tête de colonne de la table Calldate et appuyez sur modifier (Modifier) pour renommer le texte en Date d'appel. De même, renommez les autres en-têtes des colonnes du tableau.

  14. Selon le cas d’utilisation, insérez un bouton Payer maintenant dans la communication interactive qui permet à l’utilisateur d’effectuer le paiement en cliquant sur le bouton. Effectuez les étapes suivantes pour insérer le bouton :

    1. Appuyez sur Payez maintenant zone de cible, puis sur + pour ajouter un composant Texte.
    2. Appuyez sur le composant de texte et appuyez sur modifier (Modifier).
    3. Renommez le texte avec Payer maintenant.
    4. Sélectionnez le texte et appuyez sur l’icône Hyperlien.
    5. Spécifiez l’URL de paiement dans le champ Chemin d’accès.
    6. Sélectionnez Nouvel onglet dans la liste déroulante Cible.
    7. Appuyez sur done_icon pour enregistrer les propriétés de l’hyperlien.
  15. Sélectionnez Style dans la liste déroulante en regard de l’option Aperçu.

    select_style_ic_web

  16. Personnalisez le texte de l’hyperlien pour l’afficher en tant que bouton dans la communication interactive en suivant les étapes suivantes :

    1. Appuyez sur le composant de texte et sélectionnez modifier (Modifier).
    2. Dans la section Bordure, spécifiez 1,5 px comme largeur de bordure, sélectionnez Solide comme style de bordure et spécifiez 46 px comme rayon de bordure.
    3. Sélectionnez Rouge comme couleur d’arrière-plan pour le bouton dans la section Arrière-plan.
    4. Dans le champ Marge de la section Dimensions et position, appuyez sur l’icône Modifier simultanément et définissez la marge de droite à 450 px. Les zones Haut, Bas et Gauche sont définies comme vides.

    ic_web_hyperlink

  17. Appuyez sur Payez maintenant zone de cible, puis sur + pour ajouter un composant Image.

  18. Appuyez sur le composant Image et sélectionnez configure_icon (Configurer). Les propriétés de l’image s’affichent dans le volet gauche :

    1. Spécifiez PayNow comme nom de l’image dans le champ Nom.
    2. Appuyez sur Télécharger, sélectionnez l'image PayNowWeb enregistrée sur le système de fichiers local, puis appuyez sur Ouvrir.
    3. Appuyez sur done_icon pour enregistrer les propriétés de l’image.
  19. Selon le cas d’utilisation, insérez un bouton S’abonner dans la communication interactive qui permet à l’utilisateur de s’abonner aux services à valeur ajoutée en cliquant sur le bouton.

    Répétez les étapes 13 à 17 pour ajouter un bouton S’abonner à la zone de cible Value Ajouté Services et ajoutez l’image ValueAddedServicesWeb.

Créer des communications interactives pour les versions impression et web avec synchronisation automatique

Vous pouvez également créer une communication interactive en activant la synchronisation automatique entre les canaux d’impression et web. Pour activer la synchronisation automatique, sélectionnez Impression comme option principale lors de la création de la communication interactive. La sélection d’Impression comme option principale garantit que le contenu, l’héritage et la liaison des données du canal web sont dérivés du canal d’impression. Elle garantit également que les modifications apportées dans le canal d’impression sont répercutées dans le canal web.

Exécutez les étapes suivantes pour dériver le contenu du canal web à l’aide du canal d’impression :

  1. Connectez-vous à l’instance d’auteur AEM et accédez à Adobe Experience Manager > Formulaires > Formulaires et documents.

  2. Appuyez sur Créer et sélectionnez Communication interactive. L'assistant Créer une communication interactive s'affiche.

  3. Spécifiez create_first_ic dans les champs Titre et Nom. Sélectionnez FDM_Create_First_IC comme modèle de données de formulaire et appuyez sur Suivant.

  4. Dans l'Assistant Canaux :

    1. Spécifiez create_first_ic_print_template comme modèle d’impression et appuyez sur Sélectionner.
    2. Cochez la case Utiliser l'impression comme Principal pour le Canal Web.
    3. Spécifiez le dossier Create_First_IC_templates > Create_First_IC_Web_Template comme modèle Web et appuyez sur Sélectionner.
    4. Appuyez sur Créer.

    Un message de confirmation s’affiche pour confirmer que la communication interactive a été créée correctement.

  5. Appuyez sur Modifier pour ouvrir la communication interactive dans le volet droit.

  6. Exécutez les étapes 6 à 15 de la section Créer une communication interactive pour le canal d'impression.

  7. Appuyez sur l’onglet Canaux dans le volet gauche et appuyez sur Web pour générer automatiquement du contenu pour le canal web à partir du canal d’impression.

  8. Comme la case à cocher Utiliser l'impression comme Principal pour le Canal Web est cochée à l'étape 4, le contenu et les liaisons sont générés automatiquement pour le canal Web à partir du canal d'impression.

    Le contenu du canal d’impression est inséré sous le contenu du modèle de canal web. Pour modifier le contenu du canal web qui a été généré automatiquement à partir du canal d’impression, vous pouvez annuler l’héritage pour toute zone cible.

    Passez la souris sur la zone de cible appropriée dans le canal Web et sélectionnez annuler l’héritage (Annuler l’héritage), puis dans la boîte de dialogue Annuler l’héritage, appuyez sur Oui.

    cancel_héritage_web_canal

    Si vous avez annulé l’héritage d’un composant, vous pouvez le réactiver. Pour réactiver l’héritage, passez la souris sur la limite de la zone de cible concernée, qui inclut le composant, et appuyez sur réactiver l’héritage.

  9. Sélectionnez l’onglet Contenu dans le volet gauche.

  10. Faites glisser le contenu du canal web généré automatiquement dans les panneaux existants du modèle web à l’aide de l’arborescence de contenu. Voici la liste des composants qui doivent être réorganisés :

    • Composant Informations de facturation dans le panneau Informations de facturation
    • Composant Informations sur le client dans le panneau Informations sur le client
    • Composant Récapitulatif de facturation dans le panneau Récapitulatif de facturation
    • Composant Récapitulatif des frais dans le panneau Récapitulatif des frais
    • Fragment de mise en page (tableau) dans le panneau Appels détaillés

    ic_web_content_tree

  11. Répétez les étapes 13 à 18 de la section Créer une communication interactive pour canal web pour insérer les hyperliens Payer maintenant et S’abonner dans le canal web de la communication interactive.

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
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now