Show Menu
ARGOMENTI×

Esercitazione: Creazione di comunicazioni interattive

Questa esercitazione è un passaggio della serie Create your first Interactive Communication (Creazione della prima serie di comunicazioni interattive). Si consiglia di seguire le serie in sequenza cronologica per comprendere, eseguire e dimostrare l'uso completo dell'esercitazione.
Dopo aver creato tutti i blocchi costitutivi come il modello dati del modulo, i frammenti di documento, i modelli e i temi per la versione Web, è possibile iniziare a creare una comunicazione interattiva.
Le comunicazioni interattive possono essere distribuite attraverso due canali: Stampa e Web. Potete anche creare una comunicazione interattiva con il canale Stampa come principale. L'opzione Stampa come principale per il canale Web garantisce che il contenuto, l'ereditarietà e il binding dei dati del canale Web siano derivati dal canale Stampa. Inoltre, garantisce che le modifiche apportate al 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, potrete:
  • Creazione di comunicazioni interattive per il canale di stampa
  • Creazione di comunicazioni interattive per il canale Web
  • Creazione di comunicazioni interattive per la stampa e il Web con Stampa come principale

Creazione di comunicazioni interattive per la stampa e il Web senza sincronizzazione

Creazione di comunicazioni interattive per il canale di stampa

Di seguito sono elencate le risorse già create in questa esercitazione e necessarie per la creazione della comunicazione interattiva per il canale di stampa:
Modello dati modulo: FDM_Create_First_IC
Frammenti di layout: table_lf
Immagini: PayNow e ValueAddedServices
  1. Accedete all’istanza di creazione di AEM e andate a Adobe Experience Manager > Moduli > Moduli e documenti .
  2. Toccate Crea e selezionate Comunicazione ​interattiva. Viene visualizzata la procedura guidata Crea comunicazione interattiva.
  3. Specificate create_first_ic nel campo Titolo e Nome . Selezionare FDM_Create_First_IC come modello dati modulo e toccare Avanti .
  4. Nella procedura guidata Canali :
    1. Specificate create_first_ic_print_template come modello di stampa e toccate Seleziona . Assicurarsi che la casella di controllo Usa stampa come master per canale Web non sia selezionata.
    2. Specificate la cartella Create_First_IC_templates > Create_First_IC_Web_Template come modello Web e toccate Seleziona .
    3. Toccate Crea .
    Viene visualizzato un messaggio di conferma della corretta creazione della comunicazione interattiva.
  5. Toccate Modifica per aprire la comunicazione interattiva nel riquadro a destra.
  6. Fare clic sulla scheda Risorse e applicare il filtro per visualizzare solo i frammenti del documento nel riquadro a sinistra.
  7. Trascinare i seguenti frammenti di documento nelle aree di destinazione della comunicazione interattiva:
    Frammento di documento
    Area di destinazione
    bill_details_first_ic
    BillDetails
    customer_details_first_ic
    CustomerDetails
    bill_summary_first_ic
    BillSummary
    summary_charge_first_interactive_communication
    Oneri
  8. Toccate l’area di destinazione Grafici e toccate + per aggiungere un componente Grafico .
  9. Toccate il componente Grafico e selezionate (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 ​grafico.
    3. Selezionare la proprietà calltype dal tipo di oggetto modello dati chiamate nella sezione dell'asse ​X. Toccate .
    4. Selezionare Frequenza dall'elenco a discesa Funzione .
    5. Selezionare la proprietà calltype dal tipo di oggetto modello dati chiamate nella sezione dell'asse ​Y. Toccate .
    6. Toccate per salvare le proprietà del grafico.
  10. Vai alla scheda Risorse e applica il filtro per visualizzare solo i frammenti di layout nel riquadro a sinistra. Trascinare il frammento di layout table_lf nell’area di destinazione Chiamate ​dettagliate.
  11. Selezionate il Campo di testo nella colonna Data e toccate (Configura).
  12. Selezionare Oggetto modello dati dall'elenco a discesa Tipo di binding, quindi selezionare chiamate > data di chiamata. Toccate due volte per salvare le proprietà.
    Allo stesso modo, potete creare un binding con calltime , callnumber , callterm e callcharge per i campi di testo nelle colonne Time ,Number, Durata, Durata, e Oneridi testo.
  13. Toccate l’area di destinazione PayNow e toccate + per aggiungere un componente Immagine .
  14. Toccate il componente Immagine e selezionate (Configura). Le proprietà dell’immagine vengono visualizzate nel riquadro a sinistra:
    1. Specificate PayNow come nome dell'immagine nel campo Nome .
    2. Toccate Carica , selezionate l’immagine salvata nel file system locale e toccate Apri .
    3. Toccate per salvare le proprietà dell'immagine.
  15. Ripetere i passaggi 13 e 14 per aggiungere l'immagine ValueAddedServices all'area di destinazione ValueAddedServices .

Create Interactive Communication for Web channel

Di seguito è riportato l'elenco delle risorse già create in questa esercitazione e necessarie per la creazione della comunicazione interattiva per il canale Web:
Modello dati modulo: FDM_Create_First_IC
Immagini: PayNowWeb e ValueAddedServicesWeb
  1. Accedete all’istanza di creazione di AEM e andate a Adobe Experience Manager > Moduli > Moduli e documenti .
  2. Toccate Crea e selezionate Comunicazione ​interattiva. Viene visualizzata la procedura guidata Crea comunicazione interattiva.
  3. Specificate create_first_ic nel campo Titolo e Nome . Selezionare FDM_Create_First_IC come modello dati modulo e toccare Avanti .
  4. Nella procedura guidata Canali :
    1. Specificate create_first_ic_print_template come modello di stampa e toccate Seleziona . Assicurarsi che la casella di controllo Usa stampa come master per canale Web non sia selezionata.
    2. Specificate la cartella Create_First_IC_templates > Create_First_IC_Web_Template come modello Web e toccate Seleziona .
    3. Toccate Crea .
    Viene visualizzato un messaggio di conferma della corretta creazione della comunicazione interattiva.
  5. Toccate Modifica per aprire la comunicazione interattiva nel riquadro a destra.
  6. Toccate la scheda Canali dal riquadro a sinistra e toccate Web .
  7. Fare clic sulla scheda Risorse e applicare il filtro per visualizzare solo i frammenti del documento nel riquadro a sinistra.
  8. Trascinare i seguenti frammenti di documento nelle aree di destinazione della comunicazione interattiva:
    Frammento di documento
    Area di destinazione
    bill_details_first_ic
    BillDetails
    customer_details_first_ic
    CustomerDetails
    bill_summary_first_ic
    BillSummary
    summary_charge_first_interactive_communication
    Oneri
  9. Toccate Riepilogo spese nell’area di destinazione e toccate + per aggiungere un componente Grafico .
  10. Toccate il componente Grafico e selezionate (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 ​grafico.
    3. Selezionare la proprietà calltype dal tipo di oggetto modello dati chiamate nella sezione dell'asse ​X. Toccate .
    4. Selezionare Frequenza dall'elenco a discesa Funzione .
    5. Selezionare la proprietà calltype dal tipo di oggetto modello dati chiamate nella sezione dell'asse ​Y. Toccate .
    6. Toccate per salvare le proprietà del grafico.
  11. Selezionare la scheda Origini dati dal riquadro a sinistra e trascinare l'oggetto modello dati chiamate nell'area di destinazione Chiamate ​dettagliate. Tutte le proprietà nell'oggetto modello dati chiamate sono visualizzate come colonne di tabella nell'area di destinazione Chiamate ​dettagliate nel riquadro a destra.
    In base al caso d’uso, nella tabella sono necessarie le colonne Data chiamata, Ora chiamata, Numero chiamata, Durata chiamata e Addebito chiamate.
  12. Selezionare l'intestazione di colonna della tabella Mobilenum e selezionare Altre opzioni > Elimina colonna . Analogamente, elimina la colonna Calltype .
  13. Seleziona l’intestazione di colonna della tabella Calldate e tocca (Modifica) per rinominare il testo in Data chiamata . Allo stesso modo, rinominare le altre intestazioni di colonna nella tabella.
  14. In base al caso di utilizzo, inserire un pulsante Paga nella comunicazione interattiva che offre all'utente la possibilità di effettuare il pagamento facendo clic sul pulsante. Per inserire il pulsante, eseguire la procedura seguente:
    1. Toccate Paga ora nell’area di destinazione e toccate + per aggiungere un componente Testo .
    2. Toccate il componente di testo e toccate (Modifica).
    3. Rinominare il testo in Paga ora .
    4. Selezionate il testo e toccate l'icona Collegamento ipertestuale.
    5. Specificate l'URL di pagamento nel campo Percorso .
    6. Selezionare Nuova scheda dall'elenco a discesa Target .
    7. Toccate per salvare le proprietà del collegamento ipertestuale.
  15. Selezionare Stile dall'elenco a discesa accanto all'opzione Anteprima .
  16. Per formattare il testo del collegamento ipertestuale in modo da visualizzarlo come pulsante nella comunicazione interattiva, procedere come segue:
    1. Toccate il componente di testo e selezionate (Modifica).
    2. Nella sezione Bordo , specificate 1,5px come Larghezza ​bordo, selezionate Uniforme come Stile ​bordo e specificate46pxcome raggio di bordo fisso.
    3. Selezionate Rosso come colore di sfondo per il pulsante dalla sezione Sfondo .
    4. Nel campo Margine per Dimensioni e posizione , toccate l’icona Modifica simultaneamente e impostate il margine destro su 450 pixel . I campi In alto, In basso e A sinistra sono impostati come vuoti.
  17. Toccate Paga ora nell’area di destinazione e toccate + per aggiungere un componente Immagine .
  18. Toccate il componente Immagine e selezionate (Configura). Le proprietà dell’immagine vengono visualizzate nel riquadro a sinistra:
    1. Specificate PayNow come nome dell'immagine nel campo Nome .
    2. Toccate Carica , selezionate l'immagine PayNowWeb salvata nel file system locale, quindi toccate Apri .
    3. Toccate per salvare le proprietà dell'immagine.
  19. In base al caso di utilizzo, inserire un pulsante Iscrizione nella comunicazione interattiva che offra all'utente la possibilità di iscriversi ai servizi a valore aggiunto facendo clic sul pulsante.
    Ripetere i passaggi da 13 a 17 per aggiungere un pulsante Iscrizione all'area di destinazione Servizi aggiunti valori 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 attivare la sincronizzazione automatica, selezionate l’opzione Stampa come principale durante la creazione della comunicazione interattiva. Selezionando l'opzione Stampa come principale, il contenuto, l'ereditarietà e il binding dei dati del canale Web vengono derivati dal canale Stampa. Inoltre, garantisce che le modifiche apportate al canale Stampa si riflettano sul canale Web.
Per derivare il contenuto del canale Web utilizzando il canale di stampa, eseguire la procedura seguente:
  1. Accedete all’istanza di creazione di AEM e andate a Adobe Experience Manager > Moduli > Moduli e documenti .
  2. Toccate Crea e selezionate Comunicazione ​interattiva. Viene visualizzata la procedura guidata Crea comunicazione interattiva.
  3. Specificate create_first_ic nel campo Titolo e Nome . Selezionare FDM_Create_First_IC come modello dati modulo e toccare Avanti .
  4. Nella procedura guidata Canali :
    1. Specificate create_first_ic_print_template come modello di stampa e toccate Seleziona .
    2. Selezionate la casella di controllo Usa stampa come principale per canale Web.
    3. Specificate la cartella Create_First_IC_templates > Create_First_IC_Web_Template come modello Web e toccate Seleziona .
    4. Toccate Crea .
    Viene visualizzato un messaggio di conferma della corretta creazione della comunicazione interattiva.
  5. Toccate Modifica per aprire la comunicazione interattiva nel riquadro a destra.
  6. Esegui i passaggi 6 - 15 della sezione Crea comunicazione interattiva per canale di stampa.
  7. Toccate la scheda Canali dal riquadro a sinistra e toccate Web per generare automaticamente il contenuto per il canale Web dal canale Stampa.
  8. Poiché la casella Usa stampa come master per canale Web è selezionata al punto 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 cursore del mouse sull’area di destinazione desiderata nel canale Web e seleziona (Annulla ereditarietà), quindi tocca nella finestra di dialogo Annulla ereditarietà .
    Se è stata annullata l’ereditarietà di un componente, è possibile riattivarlo. Per abilitare nuovamente l'ereditarietà, passate il puntatore del mouse sul contorno dell'area di destinazione interessata, che include il componente, e toccate .
  9. Selezionate la scheda Contenuto nel riquadro a sinistra.
  10. Trascinate 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 - Pannello Dettagli fatturazione
    • Componente Dettagli cliente - Pannello Dettagli cliente
    • Riepilogo distinta, componente, al pannello Riepilogo fatturazione
    • Riepilogo del componente Addebiti nel pannello Riepilogo spese
    • Frammento di layout (tabella) nel pannello Chiamate dettagliate
  11. Ripetete i passaggi da 13 a 18 di Create Interactive Communication for Web channel per inserire i collegamenti ipertestuali Pay Now e Subscribe nel canale Web della Comunicazione interattiva.