Personalizzare lo stile del modulo adattivo do-not-publish-style-your-adaptive-form

Apri il modulo adattivo per la modifica.

http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

Apri proprietà di Contenitore Modulo adattivo. Nel browser delle proprietà, passa a Base > Tema modulo adattivo. La Tema modulo adattivo elenca tutti i temi predefiniti e personalizzati. Per impostazione predefinita, viene applicato il tema Area di lavoro.

Seleziona un tema dal Tema modulo adattivo campo . Ad esempio: Tema del sondaggio. Tocca per applicare il tema selezionato.

Modifica il logo e il testo esistenti dell’intestazione. Per rimuovere il logo:

1. Aprire il modulo nell’editor del modulo.

   http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

2. Tocca l’immagine del logo nel componente intestazione e tocca proprietà. Nella proprietà immagine, tocca X per rimuovere l’immagine del logo esistente.

3. Tocca o carica, seleziona il logo.png e tocca per salvare le modifiche. L'immagine è stata scaricata nel Prima di iniziare sezione .

4. Tocca il testo dell’intestazione, We.Retail, e tocca modifica. Cambia testo intestazione in we retail. Applica la formattazione in grassetto solo a wein we retail.

Rimuovere il titolo e aggiungere il testo segnaposto:

1. Tocca il campo ID cliente e tocca proprietà.
2. Copia il contenuto del Titolo al campo Testo segnaposto campo .
3. Elimina il contenuto del Titolo campo e tocco .
4. Ripetere i tre passaggi precedenti per tutte le caselle di testo, le caselle numeriche e i campi e-mail del modulo.

Accedi all'istanza di authoring AEM e passa a Adobe Experience Manager > Forms > Temi. L’URL predefinito è http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

Tocca Crea e seleziona Tema. Viene visualizzata la pagina Crea tema con i campi necessari per creare un tema. I campi Titolo e Nome sono obbligatori:

• Titolo: Specifica un titolo del tema. Ad esempio: Tema globale. Il titolo ti aiuta a identificare il tema dall’elenco dei temi.
• Nome: Specifica il nome del tema. Ad esempio: Tema globale. Nel repository viene creato un nodo con il nome specificato. Quando si inizia a digitare un titolo, il valore del campo nome viene generato automaticamente. È possibile modificare il valore suggerito. Il campo name può includere solo caratteri alfanumerici, trattini e caratteri di sottolineatura. Tutti gli input non validi vengono sostituiti con un trattino.

Tocca Crea. Viene creato un tema e viene visualizzata una finestra di dialogo per aprire il modulo per la modifica. Tocca Apri per aprire il tema appena creato in una nuova scheda. Il tema si apre nell’editor di temi. Per lo stile, l’editor di temi utilizza un modulo adattivo preconfigurato fornito con AEM Forms.

Per informazioni sull’utilizzo dell’interfaccia utente dell’editor di temi, consulta Informazioni sull’editor di temi.

Tocca Opzioni tema > Configura. In Anteprima modulo selezionare il campo modulo di aggiornamento-indirizzo-spedizione modulo adattivo, tocca , tocca Salva. Ora, l’editor di temi è configurato per utilizzare il proprio modulo adattivo invece del modulo adattivo predefinito. Tocca Annulla per tornare all’editor di temi.

Figura: Editor di temi con modulo adattivo per indirizzo di spedizione-add-update-form

Figura: Modulo adattivo con il modulo predefinito

Passa alla Intestazione > Testo nel pannello Selettori. Il pannello Selettori si trova a sinistra dell’editor di temi. Se il pannello non è visibile, tocca Attiva/Disattiva pannello laterale.

Imposta le seguenti proprietà in Testo a soffietto .

Tocca il widget di intestazione e tocca Intestazione. Le opzioni di stile del widget Intestazione vengono visualizzate a sinistra. Espandi la Dimension e posizione a soffietto, impostare Altezza a 120px, e tocca .

Espandi il pannello a soffietto Sfondo del widget di intestazione, imposta il Colore di sfondo a F6921E.

Passa il cursore Immagine e sfumatura > + Aggiungi, tocca Immagine. Imposta le seguenti proprietà e tocca .

Nell’editor di temi, tocca il logo nell’intestazione e tocca Logo intestazione. Espandi il pannello a soffietto Dimension e posizione, imposta le seguenti proprietà e tocca .

Tocca l’area vuota sopra il campo ID cliente e tocca Contenitore pannello reattivo. Imposta la Sfondo > Colore di sfondo a F1F2F2. Tocca .

Applicare il tema personalizzato, Tema globale, nel modulo adattivo. Se lo stile non si riflette sul modulo adattivo, svuota la cache del browser e riprova.

Apri il modulo adattivo per la modifica. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

Nella barra superiore, seleziona la Stile opzione .

Tocca Allega e tocca icona. Imposta le seguenti proprietà in Dimension e posizione fisarmonica:

Tocca Documento d'indirizzo approvato dal governo e tocca icona. Imposta le seguenti proprietà:

Crea un Adobe Typekit creare un kit, aggiungere il font Myriad Pro al kit, pubblicare il kit e ottenere l'ID kit. È necessario utilizzare i font Adobe Typekit (font Web) in un modulo adattivo.

Nel server AEM Forms, passa a Adobe Experience Manager > Strumenti > Distribuzione > Cloud Services. Nella pagina Cloud Services , passa a Servizi di terzi > Typekit e fai clic su Configura Ora sotto Typekit. Se una configurazione è già disponibile, fai clic sul pulsante + per creare una nuova istanza.

Nella finestra di dialogo Crea configurazione , specifica un Titolo per la configurazione e fai clic su Crea. Verrai reindirizzato alla pagina di configurazione. Nella finestra di dialogo Modifica componente visualizzata, fornisci ID kit e fai clic su OK.

Configura il tema per utilizzare la configurazione TypeKit. Nell’istanza dell’autore, apri Tema globale nell’editor tematico. Nell’editor dei temi, passa a Opzioni tema > Configura. In Configurazione di Typekit selezionare il kit e fare clic su Salva.

I font aggiunti al Typekit sono disponibili per la selezione nella Testo tutti i componenti.