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:
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
Accedete all'istanza di creazione AEM e andate a Adobe Experience Manager > Forms > Forms & Documents.
Toccate Crea e selezionate Comunicazione interattiva. Viene visualizzata la procedura guidata Crea comunicazione interattiva.
Specificare create_first_ic nel campo Title e Name. Selezionare FDM_Create_First_IC come modello dati modulo e toccare Next.
Nella procedura guidata Canali:
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.
Specificate Create_First_IC_templates folder > Create_First_IC_Web_Template come modello Web e toccate Select.
Toccate Crea.
Viene visualizzato un messaggio di conferma della corretta creazione della comunicazione interattiva.
Toccate Modifica per aprire la comunicazione interattiva nel riquadro a destra.
Fare clic sulla scheda Risorse e applicare il filtro per visualizzare solo i frammenti del documento nel riquadro a sinistra.
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 |
Toccate l'area di destinazione Grafici, quindi toccate + per aggiungere un componente Grafico.
Toccate il componente Grafico e selezionate (Configura). Le proprietà del grafico vengono visualizzate nel riquadro a sinistra:
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.
Selezionare il campo di testo nella colonna Date e toccare (Configura).
Selezionare Oggetto modello dati dall'elenco a discesa Tipo di binding, quindi selezionare chiamate > calldate. Toccate due volte 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.
Toccate l'area di destinazione PayNow, quindi toccate + per aggiungere un componente Image.
Toccate il componente Immagine e selezionate (Configura). Le proprietà dell’immagine vengono visualizzate nel riquadro a sinistra:
Ripetere i passaggi 13 e 14 per aggiungere l'immagine ValueAddedServices all'area di destinazione ValueAddedServices.
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
Accedete all'istanza di creazione AEM e andate a Adobe Experience Manager > Forms > Forms & Documents.
Toccate Crea e selezionate Comunicazione interattiva. Viene visualizzata la procedura guidata Crea comunicazione interattiva.
Specificare create_first_ic nel campo Title e Name. Selezionare FDM_Create_First_IC come modello dati modulo e toccare Next.
Nella procedura guidata Canali:
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.
Specificate Create_First_IC_templates folder > Create_First_IC_Web_Template come modello Web e toccate Select.
Toccate Crea.
Viene visualizzato un messaggio di conferma della corretta creazione della comunicazione interattiva.
Toccate Modifica per aprire la comunicazione interattiva nel riquadro a destra.
Toccate la scheda Canali dal riquadro a sinistra e toccate Web.
Fare clic sulla scheda Risorse e applicare il filtro per visualizzare solo i frammenti del documento nel riquadro a sinistra.
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 |
Toccate Riepilogo delle spese nell'area di destinazione, quindi toccate + per aggiungere un componente Chart.
Toccate il componente Grafico e selezionate (Configura). Le proprietà del grafico vengono visualizzate nel riquadro a sinistra:
Specifica un nome per il grafico.
Selezionare Torta dall'elenco a discesa Tipo di grafico.
Selezionare la proprietà calltype dal tipo di oggetto modello dati call nella sezione X-axis. Toccate .
Selezionare Frequency dall'elenco a discesa Function.
Selezionare la proprietà calltype dal tipo di oggetto modello dati call nella sezione Y-axis. Toccate .
Toccate per salvare le proprietà del grafico.
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.
Selezionare l'intestazione della colonna Mobilenum e selezionare Altre opzioni > Elimina colonna. Analogamente, eliminare la colonna Calltype.
Selezionare l'intestazione di colonna della tabella Calldate e toccare (Edit) per rinominare il testo in Call Date. Allo stesso modo, rinominare le altre intestazioni di colonna nella tabella.
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:
Toccate Paga ora l'area di destinazione e toccate + per aggiungere un componente Testo.
Toccate il componente di testo e toccate (Modifica).
Rinominare il testo in Paga ora.
Selezionate il testo e toccate l'icona Collegamento ipertestuale.
Specificate l'URL di pagamento nel campo Path.
Selezionare Nuova scheda dall'elenco a discesa Target.
Toccate per salvare le proprietà del collegamento ipertestuale.
Selezionare Style dall'elenco a discesa accanto all'opzione Preview.
Per formattare il testo del collegamento ipertestuale in modo da visualizzarlo come pulsante nella comunicazione interattiva, procedere come segue:
Toccate il componente di testo e selezionate (Modifica).
Nella sezione Bordo, specificare 1.5px come Larghezza bordo, selezionare Uniforme come Stile bordo e specificare 46px come <a1 2/>Raggio del bordo .
Selezionare Rosso come colore di sfondo per il pulsante dalla sezione Sfondo.
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.
Toccate Pay Now area di destinazione e toccate + per aggiungere un componente Image.
Toccate il componente Immagine e selezionate (Configura). Le proprietà dell’immagine vengono visualizzate nel riquadro a sinistra:
Specificare PayNow come nome dell'immagine nel campo Name.
Toccate Carica, selezionate l'immagine PayNowWeb salvata nel file system locale, quindi toccate Apri.
Toccate per salvare le proprietà dell'immagine.
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.
È 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:
Accedete all'istanza di creazione AEM e andate a Adobe Experience Manager > Forms > Forms & Documents.
Toccate Crea e selezionate Comunicazione interattiva. Viene visualizzata la procedura guidata Crea comunicazione interattiva.
Specificare create_first_ic nel campo Title e Name. Selezionare FDM_Create_First_IC come modello dati modulo e toccare Next.
Nella procedura guidata Canali:
Specificare create_first_ic_print_template come modello di stampa e toccare Seleziona.
Selezionare la casella di controllo Usa stampa come master per il canale Web.
Specificate Create_First_IC_templates folder > Create_First_IC_Web_Template come modello Web e toccate Select.
Toccate Crea.
Viene visualizzato un messaggio di conferma della corretta creazione della comunicazione interattiva.
Toccate Modifica per aprire la comunicazione interattiva nel riquadro a destra.
Eseguire i passaggi da 6 a 15 della sezione Crea comunicazione interattiva per il canale di stampa.
Toccate la scheda Canali dal riquadro a sinistra e toccate Web per generare automaticamente il contenuto per il canale Web dal canale Stampa.
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 (Annulla ereditarietà), quindi nella finestra di dialogo Annulla ereditarietà toccate Sì.
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 .
Selezionare la scheda Contenuto nel riquadro a sinistra.
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:
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.