DocumentazioneAEM 6.5Guida utente

Tutorial: creare una comunicazione interattiva tutorial-create-interactive-communication

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Creato per:

  • Amministratore
  • Utente
  • Sviluppatore

09-style-your-adaptive-form-small

Questo tutorial è un passaggio della serie Crea la tua prima comunicazione interattiva. Si consiglia di seguire la serie in sequenza cronologica per comprendere, eseguire e dimostrare il caso di utilizzo completo dell’esercitazione.

Dopo aver creato tutti i blocchi predefiniti, ad esempio il modello di dati del modulo, i frammenti di documento, i modelli e i temi per la versione web, puoi iniziare a creare una comunicazione interattiva.

Le comunicazioni interattive possono essere distribuite attraverso due canali: stampa e web. Puoi anche creare una comunicazione interattiva con il canale di stampa come principale. L’opzione Stampa come master per il canale web assicura che il contenuto, l’ereditarietà e l’associazione dati del canale web siano derivati dal canale di stampa. Inoltre, assicura che le modifiche apportate nel canale di stampa siano sincronizzate nel canale web. Tuttavia, gli autori delle comunicazioni interattive possono interrompere l’ereditarietà di componenti specifici nel canale web.

Questo tutorial illustra i passaggi necessari per creare comunicazioni interattive per i canali di stampa e web. Al termine di questa esercitazione, sarai in grado di:

  • Creare una comunicazione interattiva per il canale di stampa
  • Creare comunicazioni interattive per il canale web
  • Creare comunicazioni interattive a mezzo Stampa e Web con Stampa come principale

Creazione di comunicazioni interattive per la stampa e il Web senza sincronizzazione create-interactive-communications-for-print-and-web-with-no-synchronization

Crea comunicazione interattiva per canale di stampa create-interactive-communication-for-print-channel

Di seguito è riportato un elenco delle risorse già create in questa esercitazione e necessarie durante la creazione della comunicazione interattiva per il canale di stampa:

Modello di stampa: create_first_ic_print_template

Modello dati modulo: FDM_Create_First_IC

Frammenti di documenti: bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charge_first_ic

Frammenti layout: table_lf

Immagini: PayNow e ValueAddedServices

  1. Accedi all'istanza di creazione dell'AEM e passa a Adobe Experience Manager > Forms > Forms e documenti.

  2. Seleziona Crea e seleziona Comunicazione interattiva. Viene visualizzata la procedura guidata Crea comunicazione interattiva.

  3. Specifica create_first_ic nel campo Title e nel campo Name. Seleziona FDM_Create_First_IC come modello dati del modulo e seleziona Next.

  4. Nella procedura guidata Canali:

    1. Specifica create_first_ic_print_template come modello di stampa e seleziona Seleziona. Verificare che la casella di controllo Usa stampa come master per canale Web non sia selezionata.

    2. Specifica la cartella Create_First_IC_templates > Create_First_IC_Web_Template come modello Web e seleziona Seleziona.

    3. Seleziona Crea.

    Viene visualizzato un messaggio di conferma che la comunicazione interattiva è stata creata correttamente.

  5. Seleziona Modifica per aprire la comunicazione interattiva nel riquadro a destra.

  6. Passa alla scheda Assets e applica il filtro per visualizzare solo i frammenti di documento nel riquadro a sinistra.

  7. Trascina i seguenti frammenti di documento nelle aree di destinazione nella comunicazione interattiva:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    Frammento di documento Area di destinazione
    bill_details_first_ic Dettagli fattura
    customer_details_first_ic DettagliCliente
    bill_summary_first_ic Riepilogo fatture
    summary_charge_first_interactive_communication Spese

    Frammenti di documenti per comunicazioni interattive

  8. Selezionare l'area di destinazione Grafici e selezionare + per aggiungere un componente Grafico.

  9. Selezionare il componente Grafico e selezionare configure_icon (Configura). Le proprietà del grafico vengono visualizzate nel riquadro a sinistra:

    1. Specificare un nome per il grafico.
    2. Selezionare Torta dall'elenco a discesa Tipo di grafico.
    3. Selezionare la proprietà calltype dal tipo di oggetto del modello dati calls nella sezione X-axis. Seleziona icona_completato .
    4. Selezionare Frequenza dall'elenco a discesa Funzione.
    5. Selezionare la proprietà calltype dal tipo di oggetto del modello dati calls nella sezione Y-axis. Seleziona icona_completato .
    6. Seleziona icona_fine per salvare le proprietà del grafico.

  10. Vai alla scheda Assets e applica il filtro per visualizzare solo i frammenti di layout nel riquadro a sinistra. Trascina il frammento di layout table_lf nell'area di destinazione Chiamate dettagliate.

  11. Selezionare il campo di testo nella colonna Data e selezionare configure_icon (Configura).

  12. Selezionare Oggetto modello dati dall'elenco a discesa Tipo di associazione e selezionare chiamate > calldate. Seleziona done_icon due volte per salvare le proprietà.

    Analogamente, creare l'associazione con calltime, callnumber, callduration e callcharge per i campi di testo nelle colonne Time, Number, Duration e Charges rispettivamente.

  13. Seleziona l'area di destinazione PayNow e seleziona + per aggiungere un componente Image.

  14. Seleziona il componente Immagine e seleziona configure_icon (Configura). Le proprietà dell’immagine vengono visualizzate nel riquadro a sinistra:

    1. Specifica PayNow come nome dell'immagine nel campo Name.
    2. Selezionare Carica, selezionare l'immagine salvata nel file system locale, quindi selezionare Apri.
    3. Seleziona icona_completato per salvare le proprietà dell'immagine.

  15. Ripetere i passaggi 13 e 14 per aggiungere l'immagine ValueAddedServices all'area di destinazione ValueAddedServices.

Creare una comunicazione interattiva per il canale web create-interactive-communication-for-web-channel

Di seguito è riportato l’elenco delle risorse già create in questa esercitazione e necessarie durante la creazione della comunicazione interattiva per il canale web:

Modello Web: Crea_Primo_IC_Modello_Web

Modello dati modulo: FDM_Create_First_IC

Frammenti di documenti: bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charge_first_ic

Immagini: PayNowWeb e ValueAddedServicesWeb

  1. Accedi all'istanza di creazione dell'AEM e passa a Adobe Experience Manager > Forms > Forms e documenti.

  2. Seleziona Crea e seleziona Comunicazione interattiva. Viene visualizzata la procedura guidata Crea comunicazione interattiva.

  3. Specifica create_first_ic nel campo Title e nel campo Name. Seleziona FDM_Create_First_IC come modello dati del modulo e seleziona Next.

  4. Nella procedura guidata Canali:

    1. Specifica create_first_ic_print_template come modello di stampa e seleziona Seleziona. Verificare che la casella di controllo Usa stampa come master per canale Web non sia selezionata.

    2. Specifica la cartella Create_First_IC_templates > Create_First_IC_Web_Template come modello Web e seleziona Seleziona.

    3. Seleziona Crea.

    Viene visualizzato un messaggio di conferma che la comunicazione interattiva è stata creata correttamente.

  5. Seleziona Modifica per aprire la comunicazione interattiva nel riquadro a destra.

  6. Selezionare la scheda Canali dal riquadro di sinistra e selezionare Web.

  7. Passa alla scheda Assets e applica il filtro per visualizzare solo i frammenti di documento nel riquadro a sinistra.

  8. Trascina i seguenti frammenti di documento nelle aree di destinazione nella comunicazione interattiva:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    Frammento di documento Area di destinazione
    bill_details_first_ic Dettagli fattura
    customer_details_first_ic DettagliCliente
    bill_summary_first_ic Riepilogo fatture
    summary_charge_first_interactive_communication Spese

  9. Selezionare l'area di destinazione Riepilogo addebiti e selezionare + per aggiungere un componente Grafico.

  10. Selezionare il componente Grafico e selezionare configure_icon (Configura). Le proprietà del grafico vengono visualizzate nel riquadro a sinistra:

    1. Specificare un nome per il grafico.

    2. Selezionare Torta dall'elenco a discesa Tipo di grafico.

    3. Selezionare la proprietà calltype dal tipo di oggetto del modello dati calls nella sezione X-axis. Seleziona icona_completato .

    4. Selezionare Frequenza dall'elenco a discesa Funzione.

    5. Selezionare la proprietà calltype dal tipo di oggetto del modello dati calls nella sezione Y-axis. Seleziona icona_completato .

    6. Seleziona icona_fine per salvare le proprietà del grafico.

  11. Seleziona la scheda Origini dati dal riquadro a sinistra e trascina l'oggetto modello dati chiamate nell'area di destinazione Chiamate dettagliate. Tutte le proprietà nell'oggetto modello dati calls vengono visualizzate come colonne di tabella nell'area di destinazione Chiamate dettagliate nel riquadro di destra.

    In base al caso d’uso, nella tabella sono necessarie le colonne Data chiamata, Ora chiamata, Numero chiamata, Durata chiamata e Spese di chiamata.

    Tabella per la comunicazione interattiva

  12. Selezionare Mobilenum intestazione colonna tabella e Altre opzioni > Elimina colonna. Eliminare la colonna Calltype.

  13. Selezionare l'intestazione di colonna della tabella Calldate e selezionare edit (Modifica) per rinominare il testo in Call Date. Analogamente, rinominare altre intestazioni di colonna nella tabella.

  14. In base al caso d'uso, inserisci un pulsante Paga ora nella comunicazione interattiva che offre all'utente l'opzione di effettuare il pagamento facendo clic sul pulsante. Per inserire il pulsante, effettua le seguenti operazioni:

    1. Seleziona l'area di destinazione Paga ora e seleziona + per aggiungere un componente Testo.

    2. Seleziona il componente testo e seleziona modifica (Modifica).

    3. Rinomina il testo in Paga ora.

    4. Selezionare il testo e l'icona Collegamento ipertestuale.

    5. Specifica l'URL del pagamento nel campo Percorso.

    6. Seleziona Nuova scheda dall'elenco a discesa Target.

    7. Seleziona done_icon per salvare le proprietà del collegamento ipertestuale.

  15. Seleziona Stile dall'elenco a discesa accanto all'opzione Anteprima.

    Seleziona modalità stile per comunicazione interattiva

  16. Personalizzare lo stile del testo del collegamento ipertestuale per visualizzarlo come pulsante nella comunicazione interattiva attenendosi alla procedura seguente:

    1. Seleziona il componente testo e seleziona modifica (Modifica).

    2. Nella sezione Bordo, specifica 1.5px come Larghezza bordo, seleziona Solido come Stile bordo e specifica 46px come Raggio bordo.

    3. Seleziona Rosso come colore di sfondo per il pulsante dalla sezione Sfondo.

    4. Nel campo Margine per Dimension e posizione, seleziona l'icona Modifica contemporaneamente e imposta il margine Destra come 450px. I campi Superiore, Inferiore e Sinistro vengono impostati come vuoti.

    Inserisci collegamento ipertestuale nella comunicazione interattiva

  17. Seleziona l'area di destinazione Paga ora e seleziona + per aggiungere un componente Immagine.

  18. Seleziona il componente Immagine e seleziona configure_icon (Configura). Le proprietà dell’immagine vengono visualizzate nel riquadro a sinistra:

    1. Specifica PayNow come nome dell'immagine nel campo Name.

    2. Seleziona Carica, seleziona l'immagine PayNowWeb salvata nel file system locale e seleziona Apri.

    3. Seleziona icona_completato per salvare le proprietà dell'immagine.

  19. In base al caso d'uso, inserisci un pulsante Abbonati nella comunicazione interattiva che offre all'utente l'opzione di abbonarsi ai servizi a valore aggiunto facendo clic sul pulsante.

    Ripetere i passaggi 13 - 17 per aggiungere un pulsante Abbonati all'area di destinazione Servizi aggiunti e aggiungere l'immagine Servizi aggiunti.

Creazione di comunicazioni interattive per la stampa e il Web con sincronizzazione automatica create-interactive-communications-for-print-and-web-with-auto-synchronization

È inoltre possibile creare una comunicazione interattiva abilitando la sincronizzazione automatica tra i canali di stampa e web. Per abilitare la sincronizzazione automatica, seleziona l’opzione Stampa come principale durante la creazione della comunicazione interattiva. Selezionando l’opzione Stampa come principale, il contenuto, l’ereditarietà e l’associazione dati del canale web vengono derivati dal canale di stampa. Inoltre, assicura che le modifiche apportate nel canale di stampa vengano applicate al canale web.

Esegui la procedura seguente per derivare il contenuto del canale web utilizzando il canale di stampa:

  1. Accedi all'istanza di creazione dell'AEM e passa a Adobe Experience Manager > Forms > Forms e documenti.

  2. Seleziona Crea e seleziona Comunicazione interattiva. Viene visualizzata la procedura guidata Crea comunicazione interattiva.

  3. Specifica create_first_ic nel campo Title e nel campo Name. Seleziona FDM_Create_First_IC come modello dati del modulo e seleziona Next.

  4. Nella procedura guidata Canali:

    1. Specifica create_first_ic_print_template come modello di stampa e seleziona Seleziona.

    2. Selezionare la casella di controllo Usa stampa come master per canale Web.

    3. Specifica la cartella Create_First_IC_templates > Create_First_IC_Web_Template come modello Web e seleziona Seleziona.

    4. Seleziona Crea.

    Viene visualizzato un messaggio di conferma che la comunicazione interattiva è stata creata correttamente.

  5. Seleziona Modifica per aprire la comunicazione interattiva nel riquadro a destra.

  6. Eseguire i passaggi da 6 a 15 della sezione Crea comunicazione interattiva per il canale di stampa.

  7. Selezionare la scheda Canali dal riquadro di sinistra e selezionare Web per generare automaticamente il contenuto per il canale Web dal canale di stampa.

  8. Poiché la casella di controllo Usa stampa come master per canale Web è selezionata nel passaggio 4, il contenuto e le associazioni vengono generati automaticamente per il canale Web dal canale di stampa.

    Il contenuto del canale di stampa viene inserito sotto il contenuto del modello del canale web. Per modificare il contenuto del canale web generato automaticamente dal canale di stampa, puoi annullare l’ereditarietà per qualsiasi area di destinazione.

    Passa il puntatore del mouse sull'area di destinazione pertinente nel canale Web e seleziona cancella ereditarietà (Annulla ereditarietà), quindi nella finestra di dialogo Annulla ereditarietà seleziona Sì.

    Annulla ereditarietà

    Se hai annullato l’ereditarietà di un componente, puoi riabilitarlo. Per riabilitare l'ereditarietà, passa il cursore del mouse sul limite dell'area di destinazione pertinente, che include il componente, quindi seleziona reenableinheritance .

  9. Seleziona la scheda Contenuto nel riquadro a sinistra.

  10. Trascinare il contenuto del canale Web generato automaticamente sui pannelli esistenti nel modello Web utilizzando la struttura del contenuto. Di seguito è riportato l’elenco dei componenti che devono essere ridisposti:

    • Dettagli distinta componente nel pannello Dettagli distinta
    • Componente Dettagli cliente nel pannello Dettagli cliente
    • Pannello Sintetico distinta - Sintetico distinta
    • Componente Riepilogo addebiti nel pannello Riepilogo addebiti
    • Frammento layout (tabella) nel pannello Chiamate dettagliate

    Struttura contenuto Web

  11. Ripeti i passaggi 13 - 18 di Crea comunicazione interattiva per il canale web per inserire i collegamenti ipertestuali Paga ora e Abbonati nel canale web della comunicazione interattiva.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2