Esercitazione: Crea comunicazione interattiva

Creare una comunicazione interattiva utilizzando tutti i blocchi predefiniti

personalizzare la comunicazione interattiva

Questa esercitazione è un passaggio della serie Crea la tua prima comunicazione interattiva. Si consiglia di seguire la serie in sequenza cronologica per comprendere, eseguire e illustrare il caso d’uso completo dell’esercitazione.

Dopo aver creato tutti i blocchi predefiniti, ad esempio il modello 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 trasmesse attraverso due canali: Stampa e Web. È inoltre possibile creare una comunicazione interattiva con il canale Stampa come principale. L'opzione Stampa come master per il canale Web assicura che il contenuto, l'ereditarietà e il binding dei dati del canale Web siano derivati dal canale Stampa. Inoltre, assicura che le modifiche apportate nel canale Stampa siano sincronizzate nel canale Web. Gli autori delle comunicazioni interattive possono tuttavia interrompere l’ereditarietà di componenti specifici nel canale Web.

Questa esercitazione illustra i passaggi necessari per creare comunicazioni interattive per i canali Stampa e Web. Al termine di questa esercitazione, potrai:

  • Creazione di comunicazioni interattive per il canale di stampa
  • Creare comunicazioni interattive per il canale web
  • Creazione di comunicazioni interattive per la stampa e il web con Stampa come principale

Creare comunicazioni interattive per la stampa e il Web senza sincronizzazione

Creazione di comunicazioni interattive per il canale di stampa

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

Modello di stampa: create_first_ic_print_template

Modello dati modulo: FDM_Create_First_IC

Frammenti documento: bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charge_first_ic

Frammenti di layout: table_lf

Immagini: PayNow e ValueAddedServices

  1. Accedi all'istanza di authoring AEM e passa a Adobe Experience Manager > Forms > Forms & Documents.

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

  3. Specifica create_first_ic nel campo Titolo e nel campo Nome. Seleziona FDM_Create_First_IC come modello dati modulo e tocca Avanti.

  4. Nella procedura guidata Canali :

    1. Specifica create_first_ic_print_template come modello di stampa e tocca Seleziona. Assicurati che la casella di controllo Usa stampa come master per il canale Web non sia selezionata.
    2. Specifica la cartella Create_First_IC_templates > Create_First_IC_Web_Template come modello Web e tocca Select.
    3. Tocca Crea.

    Viene visualizzato un messaggio di conferma della corretta creazione della comunicazione interattiva.

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

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

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

    Frammento di documento Area di destinazione
    bill_details_first_ic DettagliFattura
    customer_details_first_ic DettagliCliente
    bill_summary_first_ic RiepilogoFatturazione
    summary_charge_first_interinterattivo_communication Oneri

    create_first_ic_doc_fragments

  8. Tocca Grafici area di destinazione e tocca + per aggiungere un componente Grafico.

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

    1. Specifica un nome per il grafico.
    2. Selezionare Torta dall'elenco a discesa Tipo di grafico.
    3. Seleziona la proprietà calltype dal tipo di oggetto del modello dati chiama nella sezione Asse X . Tocca done_icon.
    4. Selezionare Frequenza dall'elenco a discesa Funzione.
    5. Selezionare la proprietà calltype dal tipo di oggetto modello dati chiama nella sezione Asse Y. Tocca done_icon.
    6. Tocca done_icon per salvare le proprietà del grafico.

  10. Passa alla scheda Risorse 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. Seleziona il Campo di testo nella colonna Data e tocca configura_icon (Configura).

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

    Allo stesso modo, crea un binding con calltime, callnumber, callduration e callcariche per i campi di testo in Time, Number, <a12/ Le colonne Duration e Carica rispettivamente.

  13. Tocca Area target PayNow e tocca + per aggiungere un componente Immagine.

  14. Tocca 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. Tocca Carica, seleziona l’immagine salvata nel file system locale e tocca Apri.
    3. Tocca done_icon per salvare le proprietà dell'immagine.

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

Creare comunicazioni interattive per il canale web

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: Create_First_IC_Web_Template

Modello dati modulo: FDM_Create_First_IC

Frammenti documento: 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 authoring AEM e passa a Adobe Experience Manager > Forms > Forms & Documents.

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

  3. Specifica create_first_ic nel campo Titolo e nel campo Nome. Seleziona FDM_Create_First_IC come modello dati modulo e tocca Avanti.

  4. Nella procedura guidata Canali :

    1. Specifica create_first_ic_print_template come modello di stampa e tocca Seleziona. Assicurati che la casella di controllo Usa stampa come master per il canale Web non sia selezionata.
    2. Specifica la cartella Create_First_IC_templates > Create_First_IC_Web_Template come modello Web e tocca Select.
    3. Tocca Crea.

    Viene visualizzato un messaggio di conferma della corretta creazione della comunicazione interattiva.

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

  6. Tocca la scheda Canali dal riquadro a sinistra e tocca Web.

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

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

    Frammento di documento Area di destinazione
    bill_details_first_ic DettagliFattura
    customer_details_first_ic DettagliCliente
    bill_summary_first_ic RiepilogoFatturazione
    summary_charge_first_interinterattivo_communication Oneri

  9. Tocca Riepilogo delle spese nell’area di destinazione e tocca + per aggiungere un componente Grafico.

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

    1. Specifica un nome per il grafico.
    2. Selezionare Torta dall'elenco a discesa Tipo di grafico.
    3. Seleziona la proprietà calltype dal tipo di oggetto del modello dati chiama nella sezione Asse X . Tocca done_icon.
    4. Selezionare Frequenza dall'elenco a discesa Funzione.
    5. Selezionare la proprietà calltype dal tipo di oggetto modello dati chiama nella sezione Asse Y. Tocca done_icon.
    6. Tocca done_icon 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 chiamate 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 Addebiti chiamata .

    table_ic_web

  12. Seleziona l'intestazione di colonna della tabella Mobilenum e seleziona Altre opzioni > Elimina colonna. Allo stesso modo, elimina la colonna Calltype .

  13. Seleziona l'intestazione di colonna della tabella Data di chiamata e tocca modifica (Modifica) per rinominare il testo in Data di chiamata. Allo stesso modo, rinominare le altre intestazioni di colonna nella tabella.

  14. In base al caso d’uso, inserire un pulsante Paga ora nella comunicazione interattiva che offre all’utente un’opzione per effettuare il pagamento facendo clic sul pulsante . Esegui i seguenti passaggi per inserire il pulsante:

    1. Tocca Paga ora l’area di destinazione e tocca + per aggiungere un componente Testo.
    2. Tocca il componente testo e tocca modifica (Modifica).
    3. Rinomina il testo in Paga ora.
    4. Selezionare il testo e toccare l’icona Collegamento ipertestuale.
    5. Specifica l'URL di pagamento nel campo Percorso .
    6. Seleziona Nuova scheda dall'elenco a discesa Target.
    7. Tocca done_icon per salvare le proprietà dei collegamenti ipertestuali.

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

    select_style_ic_web

  16. Definire lo stile del testo del collegamento ipertestuale per visualizzarlo come pulsante nella comunicazione interattiva, eseguendo le operazioni seguenti:

    1. Tocca 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 <a1 2/>Raggio bordo .
    3. Selezionare Rosso come colore di sfondo per il pulsante dalla sezione Sfondo.
    4. Nel campo Margine per Dimension e posizione, tocca l'icona Modifica simultaneamente e imposta il margine Destra come 450px. I campi In alto, In basso e A sinistra sono impostati come vuoti.

    ic_web_hyperlink

  17. Tocca Paga ora l’area di destinazione e tocca + per aggiungere un componente Immagine.

  18. Tocca 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. Tocca Carica, seleziona l'immagine PayNowWeb salvata sul file system locale, quindi tocca Apri.
    3. Tocca done_icon per salvare le proprietà dell'immagine.

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

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

Creazione di comunicazioni interattive per la stampa e il Web con sincronizzazione automatica

È inoltre possibile creare una comunicazione interattiva abilitando la sincronizzazione automatica tra i canali Stampa e Web. Per abilitare la sincronizzazione automatica, selezionare l’opzione Stampa come master durante la creazione della comunicazione interattiva. Selezionando l'opzione Stampa come master, il contenuto, l'ereditarietà e il binding dei dati del canale Web vengono derivati dal canale Stampa. Inoltre, assicura che le modifiche apportate nel canale Stampa si riflettano nel canale Web.

Esegui i seguenti passaggi per derivare il contenuto del canale Web utilizzando il canale Stampa:

  1. Accedi all'istanza di authoring AEM e passa a Adobe Experience Manager > Forms > Forms & Documents.

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

  3. Specifica create_first_ic nel campo Titolo e nel campo Nome. Seleziona FDM_Create_First_IC come modello dati modulo e tocca Avanti.

  4. Nella procedura guidata Canali :

    1. Specifica create_first_ic_print_template come modello di stampa e tocca Seleziona.
    2. Selezionare la casella di controllo Usa stampa come master per il canale Web.
    3. Specifica la cartella Create_First_IC_templates > Create_First_IC_Web_Template come modello Web e tocca Select.
    4. Tocca Crea.

    Viene visualizzato un messaggio di conferma della corretta creazione della comunicazione interattiva.

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

  6. Esegui i passaggi 6 - 15 della sezione Crea comunicazione interattiva per il canale di stampa .

  7. Tocca la scheda Canali dal riquadro a sinistra e tocca Web per generare automaticamente il contenuto per il canale Web dal canale Stampa.

  8. Poiché la casella di controllo Usa stampa come master per il canale Web è selezionata al passaggio 4, il contenuto e i binding vengono generati automaticamente per il canale Web dal canale 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 Stampa, è possibile annullare l'ereditarietà per qualsiasi area di destinazione.

    Passa il puntatore del mouse sull'area di destinazione desiderata nel canale web e seleziona cancelinheritance (Annulla ereditarietà), quindi nella finestra di dialogo Annulla ereditarietà tocca Sì.

    cancel_inheritance_web_channel

    Se hai annullato l’ereditarietà di un componente, puoi riabilitarlo. Per riabilitare l’ereditarietà, passa il cursore del mouse sul bordo dell’area di destinazione rilevante, che include il componente, e tocca reenableinheritance.

  9. Seleziona la scheda Contenuto nel riquadro a sinistra.

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

    • Componente Dettagli fatturazione nel pannello Dettagli fatturazione
    • Componente Dettagli cliente al pannello Dettagli cliente
    • Componente Sintetico fatturazione nel pannello Sintetico fatturazione
    • Riepilogo del componente Addebiti al pannello Riepilogo delle spese
    • Frammento di layout (tabella) nel pannello Chiamate dettagliate

    ic_web_content_tree

  11. Ripetere i passaggi 13 - 18 di Crea comunicazione interattiva per il canale Web per inserire i collegamenti ipertestuali Paga ora e Iscriviti nel canale Web della comunicazione interattiva.

In questa pagina