Esercitazione: Creazione di comunicazioni interattive

09-style-your-adaptive-form-small

Questa esercitazione è un passaggio nel Creare la prima comunicazione interattiva serie. 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

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

Creare 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 e documenti.

  2. Tocca Crea e seleziona Comunicazione interattiva. La Creazione di comunicazioni interattive viene visualizzata la procedura guidata.

  3. Specifica create_first_ic in Titolo e Nome campo . Seleziona FDM_Create_First_IC come modello dati modulo e tocca Successivo.

  4. In Canali procedura guidata:

    1. Specifica create_first_ic_print_template come modello di stampa e tocca Seleziona. Assicurati che Usa Stampa come master per il canale web casella di controllo non selezionata.

    2. Specifica Crea_First_IC_templates cartella > Crea_Primo_IC_Modello_Web come modello web e tocca Seleziona.

    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. Vai a Risorse e applicare 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

    Frammenti di documenti per le comunicazioni interattive

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

  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. Seleziona Torta dal Tipo di grafico elenco a discesa.
    3. Seleziona la calltype della proprietà chiama tipo di oggetto modello dati nel Asse X sezione . Tocca done_icon.
    4. Seleziona Frequenza dal Funzione elenco a discesa.
    5. Seleziona la calltype della proprietà chiama tipo di oggetto modello dati nel Asse Y sezione . Tocca done_icon.
    6. Tocca done_icon per salvare le proprietà del grafico.
  10. Vai a Risorse e applica il filtro per visualizzare solo i frammenti di layout nel riquadro a sinistra. Trascina e rilascia la table_lf frammento di layout nel Chiamate dettagliate area target.

  11. Seleziona il Campo di testo nella sezione Data tocca e colonna configure_icon (Configura).

  12. Seleziona Oggetto Data Model dal Tipo di binding elenco a discesa e seleziona chiama > calldate. Tocca done_icon due volte per salvare le proprietà.

    Allo stesso modo, crea un binding con calltime, numero di telefono, callduration e chiamate per i campi di testo nella Time, Numero, Durata e Oneri rispettivamente.

  13. Tocca PayNow area di destinazione e tocca + per aggiungere un Immagine componente.

  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 Nome campo .
    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 ValueAddedServices all'immagine ValueAddedServices area target.

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

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 e documenti.

  2. Tocca Crea e seleziona Comunicazione interattiva. La Creazione di comunicazioni interattive viene visualizzata la procedura guidata.

  3. Specifica create_first_ic in Titolo e Nome campo . Seleziona FDM_Create_First_IC come modello dati modulo e tocca Successivo.

  4. In Canali procedura guidata:

    1. Specifica create_first_ic_print_template come modello di stampa e tocca Seleziona. Assicurati che Usa Stampa come master per il canale web casella di controllo non selezionata.

    2. Specifica Crea_First_IC_templates cartella > Crea_Primo_IC_Modello_Web come modello web e tocca Seleziona.

    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 Canali dal riquadro a sinistra e tocca Web.

  7. Vai a Risorse e applicare 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 Sintesi dei costi area di destinazione e tocca + per aggiungere un Grafico componente.

  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. Seleziona Torta dal Tipo di grafico elenco a discesa.

    3. Seleziona la calltype della proprietà chiama tipo di oggetto modello dati nel Asse X sezione . Tocca done_icon.

    4. Seleziona Frequenza dal Funzione elenco a discesa.

    5. Seleziona la calltype della proprietà chiama tipo di oggetto modello dati nel Asse Y sezione . Tocca done_icon.

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

  11. Seleziona la Origini dati dal riquadro a sinistra e trascina chiama oggetto del modello dati Chiamate dettagliate area target. Tutte le proprietà nel chiama l'oggetto modello dati viene visualizzato come colonne di tabella nel Chiamate dettagliate area di destinazione 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 Addebiti chiamata .

    Tabella per la comunicazione interattiva

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

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

  14. In base al caso d’uso, inserisci un 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 area di destinazione e tocca + per aggiungere un Testo componente.

    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 Percorso campo .

    6. Seleziona Nuova scheda da Target elenco a discesa.

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

  15. Seleziona Stile dall’elenco a discesa accanto a Anteprima opzione .

    Modalità Seleziona stile per la comunicazione interattiva

  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. In Bordo sezione , specifica 1,5 px come Larghezza bordo, seleziona Uniforme come Stile bordo e specifica 46 px come Raggio bordo.

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

    4. In Margine campo per Dimension e posizione , tocca Modifica simultaneamente e imposta la Destra margine 450 px. I campi In alto, In basso e A sinistra sono impostati come vuoti.

    Inserire un collegamento ipertestuale nella comunicazione interattiva

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

  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 Nome campo .

    2. Tocca Carica, seleziona PayNowWeb immagine salvata nel file system locale e toccare Apri.

    3. Tocca done_icon per salvare le proprietà dell’immagine.

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

    Ripeti i passaggi 13-17 per aggiungere un Abbonati al pulsante Servizi a valore aggiunto area di destinazione e aggiungi la ValueAddedServicesWeb immagine.

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 e documenti.

  2. Tocca Crea e seleziona Comunicazione interattiva. La Creazione di comunicazioni interattive viene visualizzata la procedura guidata.

  3. Specifica create_first_ic in Titolo e Nome campo . Seleziona FDM_Create_First_IC come modello dati modulo e tocca Successivo.

  4. In Canali procedura guidata:

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

    2. Seleziona la Usa Stampa come master per il canale web casella di controllo.

    3. Specifica Crea_First_IC_templates cartella > Crea_Primo_IC_Modello_Web come modello web e tocca Seleziona.

    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 di Creare comunicazioni interattive per il canale di stampa sezione .

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

  8. Come Usa Stampa come master per il canale web la casella di controllo è 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 annullamento ereditarietà (Annulla ereditarietà) e quindi nel Annulla ereditarietà finestra di dialogo, tocca .

    Annulla ereditarietà

    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 reenableeredità.

  9. Seleziona la 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

    Struttura contenuto web

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

In questa pagina