DocumentazioneAEM 6.5Guida utente

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

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Scopri come creare un tema personalizzato, assegnare uno stile ai singoli componenti e utilizzare i Web Fonts in un tema.

immagine protagonista

Questo tutorial è un passaggio del Creare il primo modulo adattivo serie. L’Adobe consiglia di seguire la serie in sequenza cronologica per comprendere, eseguire e dimostrare il caso di utilizzo completo dell’esercitazione.

Informazioni sull’esercitazione about-the-tutorial

Puoi utilizzare i temi per fornire un aspetto e uno stile unici a un modulo adattivo. Puoi applicare i temi predefiniti forniti con l’editor di moduli adattivi o creare temi personalizzati. AEM Forms fornisci un editor temi per creare temi personalizzati. Un singolo tema può fornire un aspetto diverso allo stesso modulo adattivo aperto su dispositivi mobili, tablet o desktop. Qualsiasi conoscenza precedente di CSS o LESS non è necessaria per utilizzare l’editor di temi, ma è preferibile.

Al termine dell’esercitazione, dovresti essere in grado di effettuare le seguenti operazioni:

  • Applicare un tema preconfigurato a un modulo adattivo
  • Creare un tema per il modulo adattivo tramite l’editor tema
  • Personalizzare lo stile dei singoli componenti
  • Sezione bonus: Utilizzare i Web Fonts in un tema personalizzato

Dopo aver completato l’esercitazione, il modulo dovrebbe avere un aspetto simile al seguente:

Modulo con un tema personalizzato

Prima di iniziare before-you-start

Scarica sul computer locale le immagini con lo stile dell’intestazione e il logo forniti di seguito. L’intestazione del shipping-address-add-update-form il modulo adattivo utilizza le immagini con stile di intestazione e logo. L'immagine in stile intestazione viene visualizzata sul lato destro dell'intestazione.

Ottieni file

Ottieni file

Passaggio 1: applicare un tema al modulo adattivo step-apply-a-theme-to-your-adaptive-form

L’editor di moduli adattivi fornisce più temi predefiniti. Se prevedi di non utilizzare uno stile personalizzato per il modulo adattivo, puoi pubblicare i moduli adattivi anche con un tema predefinito. I temi sono indipendenti dai moduli adattivi. Puoi applicare lo stesso tema a più moduli adattivi.

Per applicare un tema al modulo adattivo:

  1. Apri il modulo adattivo per la modifica.

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

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

  3. Seleziona un tema da Tema modulo adattivo campo. Ad esempio: Tema del sondaggio. Seleziona aem_6_3_forms_save quindi puoi applicare il tema selezionato.

    Modulo adattivo con tema predefinito

    Figura: Modulo adattivo con tema predefinito

    Modulo adattivo con tema sondaggio

    Figura: Modulo adattivo con tema sondaggio

Passaggio 2: aggiornare il modulo adattivo step-update-your-adaptive-form

La progettazione mostrata sopra richiede modifiche nel testo segnaposto e nel logo del modulo adattivo esistente.

Per aggiornare il modulo adattivo:

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

    1. Apri il modulo nell’editor moduli.

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

    2. Selezionare l'immagine del logo nella intestazione componente e seleziona cmppr proprietà. In immagine , selezionare X per rimuovere l'immagine del logo esistente.

    3. Seleziona caricare, selezionare logo.png e quindi fare clic su aem_6_3_forms_save per salvare le modifiche. L'immagine è stata scaricata in Prima di iniziare sezione.

    4. Seleziona il testo dell’intestazione, We.Retail, e seleziona aem_6_3_edit modifica. Cambia il testo dell'intestazione in we retail. Applica il formato grassetto solo a wein we retail.

      we-retail-logo-text

  2. Rimuovi titolo e aggiungi testo segnaposto:

    1. Seleziona il campo ID cliente e seleziona cmppr proprietà.

    2. Copia il contenuto del Titolo campo al Testo segnaposto campo.

    3. Elimina il contenuto del Titolo e seleziona aem_6_3_forms_save .

    4. Ripetere i tre passaggi precedenti per tutte le caselle di testo, la casella numerica e il campo e-mail del modulo.

      update-adaptive-form

Passaggio 3: creare un tema personalizzato per il modulo adattivo step-create-a-custom-theme-for-your-adaptive-form

È possibile utilizzare editor temi per creare temi personalizzati. L’editor del tema è un potente editor WYSIWYG. È un metodo visivo per applicare CSS a vari componenti di un modulo adattivo. Fornisce controlli più precisi per formattare i componenti e i pannelli di un modulo adattivo.

Un tema è un’entità separata come i moduli adattivi. Contiene stili (CSS) per i componenti e i pannelli di un modulo adattivo. Gli stili includono proprietà CSS come i colori di sfondo, i colori degli stati, la trasparenza, l’allineamento e le dimensioni. Quando si applica un tema, lo stile specificato viene applicato ai componenti corrispondenti di un modulo adattivo.

In questo tutorial potrai applicare stili a intestazione e piè di pagina, componenti di testo e numerici, componenti di allegati e pulsanti. Iniziamo con la creazione di un tema:

Creare un tema create-a-theme

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

  2. Seleziona Crea e seleziona Tema. Il Crea tema viene visualizzata una pagina con i campi necessari per creare un tema. Il Titolo e Nome I campi sono obbligatori:

    • Titolo: Specifica un titolo per il tema. Ad esempio: Tema globale. Il titolo consente di identificare il tema dall’elenco dei temi.
    • Nome: Specifica il nome del tema. Ad esempio: Tema globale. Nell'archivio viene creato un nodo con il nome specificato. Quando si inizia a digitare un titolo, il valore del campo del nome viene generato automaticamente. Puoi modificare il valore suggerito. Il campo nome può contenere solo caratteri alfanumerici, trattini e caratteri di sottolineatura. Tutti gli input non validi vengono sostituiti da un trattino.

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

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

  4. Seleziona Opzioni tema theme-options > Configura. In Anteprima modulo , selezionare il campo shipping-address-add-update-form modulo adattivo, seleziona aem_6_3_forms_save , seleziona Salva. Ora l’editor temi è configurato per utilizzare un modulo adattivo personalizzato invece del modulo adattivo predefinito. Seleziona Annulla per tornare all’editor temi.

    custom-theme

    Figura: Editor temi con il modulo adattivo shipping-address-add-update-form

    create-a-theme

    Figura: Modulo adattivo con modulo predefinito

Intestazione e piè di pagina forniscono un aspetto coerente e distintivo a un modulo adattivo. In genere, l’intestazione contiene il logo e il nome dell’organizzazione, il piè di pagina contiene informazioni sul copyright, che rimangono identiche in più forme di un’organizzazione. Per assegnare uno stile all’intestazione e al piè di pagina del modulo adattivo shipping-address-add-update-form:

  1. Navigare nel Intestazione > Testo selettori. Il pannello Selettori si trova a sinistra dell’editor temi. Se il pannello non è visibile, seleziona interruttore-pannello laterale Attiva/Disattiva pannello laterale.

  2. Imposta le seguenti proprietà in Testo Pannello a soffietto e selezione aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Proprietà Valore
    Famiglia di caratteri Arial®
    Colore carattere FFFFFF
    Dimensione font 54 px

  3. Seleziona la intestazione widget e seleziona Intestazione. Le opzioni per assegnare uno stile al widget Intestazione vengono visualizzate a sinistra. Espandi Dimension e posizione Pannello a soffietto, imposta Altezza a 120px, e seleziona aem_6_3_forms_save .

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

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

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Proprietà Valore
    immagine Carica l’header-style.png. L'immagine è stata scaricata in Prima di iniziare sezione.
    Posizione A destra in basso
    Divisione in porzioni Nessuna ripetizione

  5. Nell’editor del tema, seleziona il logo nell’intestazione e fai clic su Logo intestazione. Espandi il pannello a soffietto Dimension e posizione, imposta le seguenti proprietà e seleziona aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 html-authored no-header
    Margine Valore
    Margine
    • Superiore: 1,5 rem
    • Inferiore: -35 px
    • Sinistra: 1rem

    Suggerimento Seleziona la icona di collegamento per fornire un valore diverso a ciascun campo.

    Altezza 4,75 rem

  6. Selezionate il widget piè di pagina e selezionate Piè di pagina. Espandi Sfondo Pannello a soffietto, imposta Colore di sfondo a F6921E, e seleziona aem_6_3_forms_save .

Personalizzare lo stile del componente di acquisizione dati e applicare uno sfondo al modulo adattivo style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form

Per acquisire i dati, in un modulo adattivo puoi utilizzare più componenti. Casella di testo e casella numerica. Puoi fornire uno stile identico a tutti i componenti di acquisizione dati o uno stile separato per ciascun componente. In questa esercitazione, viene applicato uno stile identico alle caselle numeriche (ID cliente, CAP) e alle caselle di testo (ID cliente, Nome, Indirizzo di spedizione, Stato, E-mail). Per assegnare uno stile ai componenti di acquisizione dati:

  1. Seleziona la ID cliente e selezionare il Widget campo opzione. Imposta le seguenti proprietà e seleziona aem_6_3_forms_save .

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 html-authored no-header
    Pannello a soffietto Proprietà Valore
    Bordo Colore bordo A7A9AC
    Bordo Raggio bordo
    • Superiore: 7 px
    • Destra: 7 px
    • Inferiore: 7 px
    • Sinistra: 7 px
    Testo Famiglia di caratteri Arial®
    Testo Colore carattere 939598
    Testo Dimensione font 18 px
    Dimension e posizione Larghezza 60%
    Dimension e posizione Margine
    • Sinistra: 10 rem

  2. Seleziona l’area vuota sopra il ID cliente e seleziona Contenitore pannello responsivo. Imposta il Sfondo > Colore di sfondo F1F2F2. Seleziona aem_6_3_forms_save .

    Contenitore di pannelli reattivi

Personalizzare lo stile dei pulsanti style-the-buttons

È possibile utilizzare un tema personalizzato per applicare uno stile identico a tutti i pulsanti del modulo adattivo e stile in linea per applicare uno stile a un pulsante specifico. Per assegnare uno stile ai pulsanti:

  1. Seleziona la Invia e selezionare il pulsante Pulsante opzione. Imposta le seguenti proprietà e seleziona aem_6_3_forms_save .

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 html-authored no-header
    Pannello a soffietto Proprietà Valore
    Informazioni di base Colore di sfondo F6921E
    Bordo Colore bordo F6921E
    Bordo Raggio bordo
    • Superiore: 7 px
    • Destra: 7 px
    • Inferiore: 7 px
    • Sinistra: 7 px
    Testo Famiglia di caratteri Arial®
    Testo Colore carattere FFFFFF
    Testo Dimensione font 18 px

  2. Applicare il tema personalizzato, tema globale, al tuo modulo adattivo. Se lo stile non riflette il modulo adattivo, pulisci la cache del browser e riprova.

    style-data-capture-components

Passaggio 4: Personalizzare lo stile dei singoli componenti step-style-individual-components

Alcuni stili sono applicabili solo a un componente specifico. Tali componenti sono formattati nell’editor di moduli adattivi.

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

  2. Nella barra superiore, seleziona la Stile opzione.

    style-option

  3. Seleziona la Allega e selezionare il pulsante aem_6_3_edit icona. Imposta le seguenti proprietà in Dimension e posizione Pannello a soffietto:

    table 0-row-2 1-row-2 2-row-2
    Proprietà Valore
    Mobile Sinistra
    Larghezza 10%

  4. Seleziona la Bozza indirizzo approvato dal governo e selezionare il aem_6_3_edit icona. Imposta le seguenti proprietà:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 html-authored no-header
    Pannello a soffietto Proprietà Valore
    Dimensioni e posizione Mobile Sinistra
    Dimensioni e posizione Larghezza 73%
    Dimensioni e posizione Riempimento
    • Sinistra: 10 px
    Dimensioni e posizione Altezza 40 px
    Dimension e posizione Margine
    • Destra: 2 rem
    • Sinistra: 10 rem
    Informazioni di base Colore di sfondo FFFFFF
    Bordo Spessore bordo 1 px
    Bordo Stile bordo Uniforme
    Bordo Colore bordo A7A9AC
    Bordo Raggio bordo 7 px
    Testo Famiglia di caratteri Arial®
    Testo Colore carattere BCBEC0
    Testo Dimensione font 18 px
    Testo Altezza riga 2

  5. Seleziona la Invia e selezionare il pulsante aem_6_3_edit icona. Imposta le seguenti proprietà:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header
    Pannello a soffietto Proprietà Valore
    Dimension e posizione Mobile Destra
    Dimension e posizione Margine
    • Superiore: 5 rem
    • A destra: 14 rem
    • Inferiore: 20 px
    • Sinistra: 20 px
    Informazioni di base Colore di sfondo F6921E
    Bordo Colore bordo F6921E

    formattato-adaptive-form-1

Passaggio 5: sezione bonus: utilizzo di Web Fonts in un tema personalizzato step-bonus-section-using-web-fonts-in-a-custom-theme

Puoi utilizzare vari font per progettare un modulo adattivo. È possibile che in tutti i dispositivi su cui viene visualizzato il modulo adattivo non siano presenti i font utilizzati per progettarlo. È possibile utilizzare un servizio di caratteri Web per fornire i caratteri richiesti al dispositivo di destinazione.

Adobe Fonts è un servizio di Web Fonts. Puoi configurare e utilizzare il servizio con i moduli adattivi. Da utilizzare Adobe Fonts in un modulo adattivo:

  1. Sfoglia libreria di font di Adobe e scegliere il tipo di carattere con cui applicare lo stile al modulo.
NOTE
È possibile aggiungere tag o filtri per perfezionare l'elenco dei caratteri.

  1. Fai clic sul pulsante </> per aggiungere la famiglia a un progetto web, nel caso in cui trovi un font che ti piace.

    select-font-from-font-libary

    Viene visualizzata la finestra di dialogo Aggiungi font a un progetto web.

    note note
    NOTE
    È possibile aggiungere caratteri al progetto Web solo se il pulsante </> è disponibile.

  2. Assegna un nome al progetto web.

  3. Selezionare le caselle di controllo per selezionare i pesi e gli stili dei caratteri che si desidera includere.

    aggiungere una libreria di tipi di carattere

  4. Seleziona Clic per creare il progetto.

  5. Copia il codice da incorporare e l’URL dalla schermata.
    codice di incorporamento e URL

  6. Clic Fine per chiudere la finestra del progetto web.

  7. Accedi all’istanza AEM e vai all’URL http://server:port/crx/de/index.jsp#

  8. Creare una struttura di cartelle in CRXDE, ad esempio /apps/[fontslibrary]/[customlibrary(clientlibrary)].

  9. Passa alla nuova clientlibs cartella e aggiungi allowProxy e categories proprietà.

  10. Accedi a /apps/[fontslibrary]/[customlibrary(clientlibrary)] e crea una cartella css.

  11. Vai alla cartella CSS creata e crea un file. Ad esempio, crea un file come fonts.css e incolla il codice da incorporare insieme all’URL.
    Struttura delle cartelle

  12. Salva le modifiche.

NOTE
Per utilizzare i font personalizzati aggiunti in un modulo adattivo, accertati che il nome della libreria client nel Categoria libreria client viene allineato con il nome specificato nell’opzione categorie della cartella clientlib.

I font inclusi sono ora accessibili al modulo adattivo tramite la seguente libreria client font personalizzata.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2