Didacticiel : Créer une communication interactive

Ce tutoriel fait partie de la série Création de votre première communication interactive. Il est recommandé de suivre la série dans l’ordre chronologique pour comprendre, exécuter et accomplir le cas d’utilisation complet du tutoriel.

Une fois que vous avez créé tous les blocs de création, 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 avec le canal d’impression comme gabarit. L’impression en tant qu’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 au 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 du canal web.

Ce tutoriel vous guide tout au long des étapes de 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 d’impression et web avec l’impression comme Principal

Créer des communications interactives pour l’impression et le web sans 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 tutoriel et qui sont nécessaires lors de la création de la communication interactive pour le canal d’impression :

Modèle d’impression : create_first_ic_print_template

Modèle de données de formulaire : FDM_Create_First_IC

Fragments de document : 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. Sélectionner 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électionner FDM_Create_First_IC comme modèle de données de formulaire et sélectionnez Suivant.

4. Dans l’assistant Canaux :

   1. Spécifier create_first_ic_print_template comme modèle d’impression et sélectionnez Sélectionner. Assurez-vous que la case Utiliser l’impression en tant que page principale pour le canal web n’est pas cochée.

   2. Spécifier Create_First_IC_templates folder > Create_First_IC_Web_Template comme modèle Web et sélectionnez Sélectionner.

   3. Sélectionnez Créer.

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

5. Sélectionner Modifier pour ouvrir la communication interactive dans le volet de droite.

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

7. Faites glisser les fragments de document 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

   

8. Sélectionner Graphiques zone cible, puis sélectionnez + pour ajouter une Graphique composant.

9. Sélectionnez le composant Graphique et sélectionnez (Configuration). Les propriétés du graphique s’affichent dans le volet de gauche :

   1. Attribuez un nom au graphique.
   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. Sélectionner .
   4. Sélectionnez Fréquence dans la liste déroulante Fonctions.
   5. Sélectionnez la propriété calltype à partir du type d’objet du modèle de données Appels dans la section Axe Y. Sélectionner .
   6. Sélectionner pour enregistrer les propriétés du graphique.

10. Accédez à l’onglet Actifs et appliquez le filtre pour afficher uniquement les fragments de mise en page dans le volet 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 le Date et sélectionnez (Configuration).

12. Sélectionnez Objet du modèle de données dans la liste déroulante Type de liaison et sélectionnez calls > calldate. Sélectionner deux fois 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. Sélectionner PayNow zone cible, puis sélectionnez + pour ajouter une Image composant.

14. Sélectionnez le composant Image et sélectionnez (Configuration). Les propriétés de l’image s’affichent dans le volet de gauche :

    1. Spécifier PayNow comme nom de l’image dans la variable Nom champ .
    2. Sélectionner Télécharger, sélectionnez l’image enregistrée sur le système de fichiers local, puis sélectionnez Ouvrir.
    3. Sélectionner 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 cible ValueAddedServices.

Créer une communication interactive pour canal web

Voici la liste des ressources qui ont déjà été créées dans ce tutoriel et qui sont nécessaires lors de 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

Fragments de document : 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. Sélectionner 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électionner FDM_Create_First_IC comme modèle de données de formulaire et sélectionnez Suivant.

4. Dans l’assistant Canaux :

   1. Spécifier create_first_ic_print_template comme modèle d’impression et sélectionnez Sélectionner. Assurez-vous que la case Utiliser l’impression en tant que page principale pour le canal web n’est pas cochée.

   2. Spécifier Create_First_IC_templates folder > Create_First_IC_Web_Template comme modèle Web et sélectionnez Sélectionner.

   3. Sélectionnez Créer.

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

5. Sélectionner Modifier pour ouvrir la communication interactive dans le volet de droite.

6. Sélectionnez la variable Canaux dans le volet de gauche, puis sélectionnez Web.

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

8. Faites glisser les fragments de document 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

9. Sélectionner Résumé des frais zone cible, puis sélectionnez + pour ajouter une Graphique composant.

10. Sélectionnez le composant Graphique et sélectionnez (Configuration). Les propriétés du graphique s’affichent dans le volet de gauche :

    1. Attribuez un nom au graphique.

    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. Sélectionner .

    4. Sélectionnez Fréquence dans la liste déroulante Fonctions.

    5. Sélectionnez la propriété calltype à partir du type d’objet du modèle de données Appels dans la section Axe Y. Sélectionner .

    6. Sélectionner 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 calls sont affichées sous forme de colonnes de tableau dans la zone cible Appels détaillés dans le volet droit.

    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.

    

12. Sélectionnez l’en-tête de colonne du tableau Mobilenum et sélectionnez Plus d’options > Supprimer colonne. De même, supprimez la colonne calltype.

13. Sélectionnez la variable Calldate en-tête de colonne du tableau et sélectionnez (Modifier) pour renommer le texte en Date de l’appel. De même, renommez les autres en-têtes de colonne du tableau.

14. En fonction du cas d’utilisation, insérez une Payer maintenant dans la communication interactive qui permet à l’utilisateur d’effectuer le paiement en cliquant sur le bouton . Pour insérer le bouton, procédez comme suit :

    1. Sélectionner Payer maintenant zone cible, puis sélectionnez + pour ajouter une Texte composant.

    2. Sélectionnez le composant de texte, puis sélectionnez (Modifier).

    3. Renommez le texte en Payer maintenant.

    4. Sélectionnez le texte et cliquez sur l’icône Lien hypertexte.

    5. Spécifiez l’URL de paiement dans la variable Chemin champ .

    6. Sélectionner Nouvel onglet de Cible liste déroulante.

    7. Sélectionner 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.

    

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

    1. Sélectionnez le composant de texte, puis sélectionnez (Modifier).

    2. Dans le Bordure , spécifiez 1,5 px as Largeur de la bordure, sélectionnez Plein as Style de bordure, et spécifiez 46 px as Rayon de bordure.

    3. Sélectionnez Rouge comme couleur d’arrière-plan pour le bouton dans le Contexte .

    4. Dans le Marge champ pour Dimensions et position , sélectionnez Modifier simultanément et définissez la variable Right margin as 450 px. Les zones Haut, Bas et Gauche sont définies comme vides.

    

17. Sélectionner Payer maintenant zone cible, puis sélectionnez + pour ajouter une Image composant.

18. Sélectionnez le composant Image et sélectionnez (Configuration). Les propriétés de l’image s’affichent dans le volet de gauche :

    1. Spécifier PayNow comme nom de l’image dans la variable Nom champ .

    2. Sélectionner Télécharger, sélectionnez la variable PayNowWeb image enregistrée sur le système de fichiers local, puis sélectionnez Ouvrir.

    3. Sélectionner 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 cible des services à valeur ajoutée et ajouter l’image ValueAddedServicesWeb.

Création de communications interactives pour l’impression et le 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 l’option Imprimer en tant que gabarit lors de la création de la communication interactive. La sélection de l’option Imprimer 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 au canal d’impression sont répercutées dans le canal web.

Pour dériver le contenu du canal web à l’aide du canal d’impression, procédez comme suit :

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

2. Sélectionner 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électionner FDM_Create_First_IC comme modèle de données de formulaire et sélectionnez Suivant.

4. Dans l’assistant Canaux :

   1. Spécifier create_first_ic_print_template comme modèle d’impression et sélectionnez Sélectionner.

   2. Cochez la case Utiliser l’impression en tant que page principale pour le canal web.

   3. Spécifier Create_First_IC_templates folder > Create_First_IC_Web_Template comme modèle Web et sélectionnez Sélectionner.

   4. Sélectionnez Créer.

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

5. Sélectionner Modifier pour ouvrir la communication interactive dans le volet de droite.

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

7. Sélectionnez la variable Canaux dans le volet de gauche, puis sélectionnez Web pour générer automatiquement le contenu pour le canal web à partir du canal d’impression.

8. Comme la case Utiliser l’impression en tant que page principale 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 généré automatiquement à partir du canal d’impression, vous pouvez annuler l’héritage pour n’importe quelle zone cible.

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

   

   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 bordure de la zone cible concernée, qui inclut le composant, puis sélectionnez .

9. Sélectionnez la variable Contenu dans le volet de gauche.

10. Faites glisser le contenu du canal web généré automatiquement vers 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 Détails client du panneau Détails client
    • Composant Résumé de facturation dans le panneau Résumé de facturation
    • Composant Résumé des frais dans le panneau Résumé des frais
    • Fragment de disposition (tableau) dans le panneau Appels détaillés

    

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.