Didacticiel : Créer une communication interactive tutorial-create-interactive-communication

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

Sélectionnez  Créer  puis sélectionnez Communication interactive. L’assistant Créer une communication interactive s’affiche.

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 puis sélectionnez Suivant.

Dans l’assistant Canaux  :

1. Définissez  create_first_ic_print_template  comme modèle d’impression puis sélectionnez  Sélectionner. Assurez-vous que la case Utiliser l’impression en tant que gabarit pour le canal web n’est pas cochée.

2. Définissez le dossier Create_First_IC_templates >  Create_First_IC_Web_Template  comme modèle web puis 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.

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

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

Faites glisser les fragments de document suivants vers leurs zones cibles dans la communication interactive :

Sélectionnez Graphiques dans la zone cible et sélectionnez + pour ajouter un composant Graphique.

Sélectionnez le composant Graphique et sélectionnez (Configurer). Les propriétés du graphique s’affichent dans le volet 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électionnez .
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électionnez .
6. Sélectionnez pour enregistrer les propriétés du graphique.

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.

Sélectionnez le champ de texte dans la colonne Date et sélectionnez (Configurer).

Sélectionnez Objet du modèle de données dans la liste déroulante Type de liaison et sélectionnez calls > calldate. Sélectionnez 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.

Sélectionnez la zone cible PayNow puis + pour ajouter un composant Image.

Sélectionnez le composant Image et séléctionnez (Configurer). Les propriétés d’image s’affichent dans le volet de gauche.

1. Spécifiez PayNow comme nom de l’image dans le champ Nom.
2. Sélectionnez Charger, sélectionnez l’image enregistrée sur le système de fichiers local puis choisissez Ouvrir.
3. Sélectionnez pour enregistrer les propriétés de l’image.

Répétez les étapes 13 et 14 pour ajouter l’image ValueAddedServices à la zone cible ValueAddedServices.

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

Sélectionnez  Créer  puis sélectionnez Communication interactive. L’assistant Créer une communication interactive s’affiche.

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 puis sélectionnez Suivant.

Dans l’assistant Canaux  :

1. Définissez  create_first_ic_print_template  comme modèle d’impression puis sélectionnez  Sélectionner. Assurez-vous que la case Utiliser l’impression en tant que gabarit pour le canal web n’est pas cochée.

2. Définissez le dossier Create_First_IC_templates >  Create_First_IC_Web_Template  comme modèle web puis 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.

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

Sélectionnez l’onglet Canaux dans le volet gauche puis Web.

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

Faites glisser les fragments de document suivants vers leurs zones cibles dans la communication interactive :

Sélectionnez Résumé des frais dans la zone cible puis + pour ajouter un composant Graphique.

Sélectionnez le composant Graphique, puis sélectionnez (Configurer). Les propriétés du graphique s’affichent dans le volet 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électionnez .

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électionnez .

6. Sélectionnez pour enregistrer les propriétés du graphique.

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.

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.

Sélectionnez l’en-tête de la colonne Calldate du tableau puis pour remplacer le texte par Date de l’appel. De même, renommez les autres en-têtes de colonne du tableau.

Selon le cas d’utilisation, insérez un bouton Payer maintenant dans la communication interactive qui permet à la personne d’effectuer le paiement en cliquant sur le bouton. Pour insérer le bouton, procédez comme suit :

1. Sélectionnez Payer maintenant dans la zone cible puis + pour ajouter un composant Texte.

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

3. Renommez le texte en Payer maintenant.

4. Sélectionnez le texte puis l’icône d’hyperlien.

5. Spécifiez l’URL de paiement dans le champ Chemin d’accès.

6. Sélectionnez Nouvel onglet de la liste déroulante Cible.

7. Sélectionnez pour enregistrer les propriétés de l’hyperlien.

Sélectionnez Style dans la liste déroulante en regard de l’option Aperçu.

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 la section Bordure, spécifiez 1,5 px comme Largeur de la bordure, sélectionnez Plein comme Style de bordure, puis 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, sélectionnez l’icône Modifier simultanément et définissez la marge de droite sur 450 px. Les zones Haut, Bas et Gauche sont définies comme vides.

Sélectionnez la zone cible Payer maintenant, puis sélectionnez + pour ajouter un composant Image.

Sélectionnez le composant Image, puis sélectionnez (Configurer). Les propriétés d’image s’affichent dans le volet de gauche.

1. Spécifiez PayNow comme nom de l’image dans le champ Nom.

2. Sélectionnez Charger, puis l’image PayNowWeb enregistrée dans le système de fichiers local, puis sélectionnez Ouvrir.

3. Sélectionnez pour enregistrer les propriétés de l’image.

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.

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

Sélectionnez  Créer  puis sélectionnez Communication interactive. L’assistant Créer une communication interactive s’affiche.

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 puis sélectionnez Suivant.

Dans l’assistant Canaux  :

1. Spécifiez create_first_ic_print_template comme modèle d’impression, puis sélectionnez Sélectionner.

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

3. Spécifiez le dossier Create_First_IC_templates > 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.

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

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

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

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.

Pointez sur la zone cible correspondante dans le canal web et sélectionnez  (Annuler l’héritage) puis, dans la boîte de dialogue Annuler l’héritage, appuyez sur Oui.

Si vous avez annulé l’héritage d’un composant, vous pouvez le réactiver. Pour réactiver l’héritage, pointez sur la limite de la zone cible pertinente incluant le composant et appuyez sur (Réactiver l’héritage).

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

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 Informations sur le client ou la cliente dans le panneau Informations sur le client ou la cliente
• 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

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.