DocumentazioneAEM 6.5Guida utente

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

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Amministratore
  • Utente
  • Sviluppatore

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 della serie Creare il primo modulo adattivo. 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 fornisce 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 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 modulo adattivo shipping-address-add-update-form utilizza le immagini stile 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 le proprietà del contenitore modulo adattivo. Nel browser delle proprietà, passa a Base > Tema modulo adattivo. Nel campo Tema modulo adattivo sono elencati tutti i temi predefiniti e personalizzati. Per impostazione predefinita, viene applicato il tema Area di lavoro.

  3. Seleziona un tema dal campo Tema modulo adattivo. Ad esempio, Tema sondaggio. Seleziona aem_6_3_forms_save per 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. Seleziona l'immagine del logo nel componente header e seleziona cmppr properties. Nella proprietà image, seleziona X per rimuovere l'immagine logo esistente.

    3. Seleziona carica, fai clic su logo.png, quindi seleziona aem_6_3_forms_save per salvare le modifiche. L'immagine è stata scaricata nella sezione Prima dell'avvio.

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

      we-retail-logo-text

  2. Rimuovi titolo e aggiungi testo segnaposto:

    1. Selezionare il campo ID cliente e selezionare le proprietà cmppr .

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

    3. Elimina il contenuto del campo 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.

      modulo-adattivo-aggiornato

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

Puoi utilizzare l'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 creazione dell'AEM e passa a Adobe Experience Manager > Forms > Temi. URL predefinito: http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

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

    • Titolo: Specificare un titolo per il tema. Ad esempio, Tema globale. Il titolo consente di identificare il tema dall'elenco dei temi.
    • Nome: Specificare 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 AEM Forms.

    Per informazioni sull'utilizzo dell'interfaccia utente dell'editor temi, vedere Informazioni sull'editor temi.

  4. Seleziona Opzioni tema Opzioni tema > Configura. Nel campo Anteprima modulo, seleziona il modulo adattivo shipping-address-add-update-form, 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

    crea-un-tema

    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. Passa all'opzione Intestazione > Testo nel pannello Selettori. Il pannello Selettori si trova a sinistra dell’editor temi. Se il pannello non è visibile, selezionare attiva/disattiva pannello laterale .

  2. Imposta le seguenti proprietà nel pannello a soffietto Testo e seleziona 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 il widget header e seleziona Header. Le opzioni per assegnare uno stile al widget Intestazione vengono visualizzate a sinistra. Espandi il pannello a soffietto Dimension e posizione, imposta Altezza su 120px e seleziona aem_6_3_forms_save .

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

    Passa il puntatore del mouse su 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 nella sezione Prima dell'avvio.
    Posizione A destra in basso
    Divisione in porzioni Nessuna ripetizione

  5. Nell'editor temi, selezionare il logo nell'intestazione e selezionare 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 l'icona del collegamento per fornire un valore diverso a ciascun campo.

    Altezza 4,75 rem

  6. Selezionare il widget piè di pagina e selezionare Piè di pagina. Espandere il pannello a soffietto Sfondo, impostare Colore sfondo su F6921E e selezionare 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. Selezionare il campo ID cliente e l'opzione Widget campo. 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 campo ID cliente e seleziona Contenitore pannello responsivo. Impostare Colore sfondo > Colore sfondo su F1F2F2. Seleziona aem_6_3_forms_save .

    Contenitore pannello reattivo

Personalizzare lo stile dei pulsanti style-the-buttons

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

  1. Selezionare il pulsante Invia e l'opzione Pulsante. 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. Applica il tema personalizzato, tema globale, al 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 l'opzione Stile.

    style-option

  3. Seleziona il pulsante Allega e fai clic sull'icona aem_6_3_edit . Imposta le seguenti proprietà nel Pannello a soffietto Dimension e Posizione:

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

  4. Seleziona l'opzione Bozza indirizzo approvata dal governo e l'icona aem_6_3_edit . 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 il pulsante Invia e fai clic sull'icona aem_6_3_edit . 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

    modulo-adattivo-formattato-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. Per utilizzare Adobe Fonts in un modulo adattivo:

  1. Sfoglia la raccolta di tipi di carattere di Adobe e scegli 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.

    aggiungi una libreria di tipi di carattere

  4. Seleziona Fai clic per creare il progetto.

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

  6. Fai clic su 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. Passare alla cartella clientlibs appena creata e aggiungere le proprietà allowProxy e categories.

  10. Passare a /apps/[fontslibrary]/[customlibrary(clientlibrary)] e creare 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 di incorporamento insieme all'URL.
    Struttura cartella

  12. Salva le modifiche.

NOTE
Per utilizzare i font personalizzati aggiunti in un modulo adattivo, accertati che il nome della libreria client nella Categoria libreria client sia allineato al 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