Esercitazione: Creazione di comunicazioni interattive

09-style-your-adaptive-form-small

Questa esercitazione è un passaggio della serie Crea la tua prima comunicazione interattiva. 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 di stampa: create_first_ic_print_template

Modello dati modulo: FDM_Create_First_IC

Frammenti del 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. Accedete all'istanza di creazione AEM e andate a Adobe Experience Manager > Forms > Forms & Documents.

  2. Toccate Crea e selezionate Comunicazione interattiva. Viene visualizzata la procedura guidata Crea comunicazione interattiva.

  3. Specificare create_first_ic nel campo Title e Name. Selezionare FDM_Create_First_IC come modello dati modulo e toccare Next.

  4. Nella procedura guidata Canali:

    1. Specificare create_first_ic_print_template come modello di stampa e toccare Seleziona. Assicurarsi che la casella di controllo Usa stampa come master per canale Web non sia selezionata.

    2. Specificate Create_First_IC_templates folder > Create_First_IC_Web_Template come modello Web e toccate Select.

    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

    Frammenti di documenti per le comunicazioni interattive

  8. Toccate l'area di destinazione Grafici, quindi toccate + per aggiungere un componente Grafico.

  9. Toccate il componente Grafico e selezionate 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. Selezionare la proprietà calltype dal tipo di oggetto modello dati call nella sezione X-axis. Toccate done_icon.
    4. Selezionare Frequency dall'elenco a discesa Function.
    5. Selezionare la proprietà calltype dal tipo di oggetto modello dati call nella sezione Y-axis. Toccate done_icon.
    6. Toccate done_icon per salvare le proprietà del grafico.

  10. Fare clic sulla scheda Risorse e applicare 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. Selezionare il campo di testo nella colonna Date e toccare configure_icon (Configura).

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

    Analogamente, creare un binding con calltime, callnumber, callDuration e callcharge per i campi di testo in Time, Number, Time Durata e Caricamenti rispettivamente.

  13. Toccate l'area di destinazione PayNow, quindi toccate + per aggiungere un componente Image.

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

    1. Specificare PayNow come nome dell'immagine nel campo Name.
    2. Toccate Carica, selezionate l'immagine salvata nel file system locale, quindi toccate Apri.
    3. Toccate 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.

Creazione di comunicazioni interattive per il canale Web

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

Modello dati modulo: FDM_Create_First_IC

Frammenti del documento: bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charge_first_ic

Immagini: PayNowWeb e ValueAddedServicesWeb

  1. Accedete all'istanza di creazione AEM e andate a Adobe Experience Manager > Forms > Forms & Documents.

  2. Toccate Crea e selezionate Comunicazione interattiva. Viene visualizzata la procedura guidata Crea comunicazione interattiva.

  3. Specificare create_first_ic nel campo Title e Name. Selezionare FDM_Create_First_IC come modello dati modulo e toccare Next.

  4. Nella procedura guidata Canali:

    1. Specificare create_first_ic_print_template come modello di stampa e toccare Seleziona. Assicurarsi che la casella di controllo Usa stampa come master per canale Web non sia selezionata.

    2. Specificate Create_First_IC_templates folder > Create_First_IC_Web_Template come modello Web e toccate Select.

    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 delle spese nell'area di destinazione, quindi toccate + per aggiungere un componente Chart.

  10. Toccate il componente Grafico e selezionate 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. Selezionare la proprietà calltype dal tipo di oggetto modello dati call nella sezione X-axis. Toccate done_icon.

    4. Selezionare Frequency dall'elenco a discesa Function.

    5. Selezionare la proprietà calltype dal tipo di oggetto modello dati call nella sezione Y-axis. Toccate done_icon.

    6. Toccate done_icon per salvare le proprietà del grafico.

  11. Selezionare la scheda Origini dati dal riquadro a sinistra e trascinare l'oggetto modello dati call nell'area di destinazione Chiamate dettagliate. Tutte le proprietà dell'oggetto modello dati call 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 Addebito chiamate.

    Tabella per la comunicazione interattiva

  12. Selezionare l'intestazione della colonna Mobilenum e selezionare Altre opzioni > Elimina colonna. Analogamente, eliminare la colonna Calltype.

  13. Selezionare l'intestazione di colonna della tabella Calldate e toccare edit (Edit) per rinominare il testo in Call Date. Allo stesso modo, rinominare le altre intestazioni di colonna nella tabella.

  14. In base al caso d'uso, inserire un pulsante Pay Now 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 l'area di destinazione e toccate + per aggiungere un componente Testo.

    2. Toccate il componente di testo e toccate edit (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 Path.

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

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

  15. Selezionare Style dall'elenco a discesa accanto all'opzione Preview.

    Selezionare la modalità Stile per la comunicazione interattiva

  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 (Modifica).

    2. Nella sezione Bordo, specificare 1.5px come Larghezza bordo, selezionare Uniforme come Stile bordo e specificare 46px come <a1 2/>Raggio del bordo .

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

    4. Nel campo Margine per Dimension e posizione, toccare l'icona Modifica simultaneamente e impostare il margine Right come 450px. I campi In alto, In basso e A sinistra sono impostati come vuoti.

    Inserisci collegamento ipertestuale nella comunicazione interattiva

  17. Toccate Pay Now area di destinazione e toccate + per aggiungere un componente Image.

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

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

    2. Toccate Carica, selezionate l'immagine PayNowWeb salvata nel file system locale, quindi toccate Apri.

    3. Toccate done_icon per salvare le proprietà dell'immagine.

  19. In base al caso di utilizzo, inserire un pulsante Iscrizione nella comunicazione interattiva che offre 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 AEM e andate a Adobe Experience Manager > Forms > Forms & Documents.

  2. Toccate Crea e selezionate Comunicazione interattiva. Viene visualizzata la procedura guidata Crea comunicazione interattiva.

  3. Specificare create_first_ic nel campo Title e Name. Selezionare FDM_Create_First_IC come modello dati modulo e toccare Next.

  4. Nella procedura guidata Canali:

    1. Specificare create_first_ic_print_template come modello di stampa e toccare Seleziona.

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

    3. Specificate Create_First_IC_templates folder > Create_First_IC_Web_Template come modello Web e toccate Select.

    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. Eseguire i passaggi da 6 a 15 della sezione Crea comunicazione interattiva per il 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 di controllo 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.

    Passate il puntatore del mouse sull'area di destinazione desiderata nel canale Web e selezionate cancelinheritance (Annulla ereditarietà), quindi nella finestra di dialogo Annulla ereditarietà toccate Sì.

    Annulla ereditarietà

    Se è stata annullata l’ereditarietà di un componente, è possibile riattivarlo. Per riabilitare l'ereditarietà, passate il puntatore del mouse sul contorno dell'area di destinazione interessata, che include il componente, e toccate reenableinheritance.

  9. Selezionare 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

    Struttura contenuto Web

  11. Ripetere i passaggi da 13 a 18 di Crea comunicazione interattiva per il canale Web per inserire i collegamenti ipertestuali Pay Now e Subscribe nel canale Web della comunicazione interattiva.

In questa pagina