Temi in Forms adattivo

Puoi creare e applicare temi per assegnare uno stile a un modulo adattivo. Un tema contiene dettagli sullo stile dei componenti e dei pannelli. Gli stili includono proprietà quali i colori di sfondo, i colori degli stati, la trasparenza, l’allineamento e le dimensioni. Quando applichi un tema, lo stile specificato si riflette sui componenti corrispondenti. Un tema viene gestito in modo indipendente senza un riferimento a un modulo adattivo e può essere riutilizzato in più Forms adattivi.

Temi disponibili

Forms as a Cloud Service fornisce, i seguenti temi elencati per i Componenti core basati su Adaptive Forms:

• Tema Area di lavoro
• Tema WKND
• Tema EASEL

Struttura dei temi

Un tema è un pacchetto che include il file CSS, i file JavaScript e le risorse (come le icone) che definiscono lo stile del Forms adattivo. Un tema Modulo adattivo segue un’organizzazione specifica, costituita dai seguenti componenti:

• src/theme.scss: questa cartella include il file CSS che ha un ampio impatto sull’intero tema. Funge da posizione centralizzata per definire e gestire lo stile e il comportamento del tema. Apportando modifiche a questo file, puoi apportare modifiche applicate universalmente a tutto il tema, influenzando l’aspetto e le funzionalità sia delle pagine Forms adattive che delle pagine AEM Sites.

• src/site: questa cartella contiene file CSS applicati alla pagina di un intero sito AEM. Questi file sono costituiti da codice e stili che influiscono sulle funzionalità e sul layout generali della pagina del sito AEM. Tutte le modifiche apportate qui vengono applicate a tutte le pagine del sito. [Quando utilizzarlo?]

• src/components: i file CSS in questa cartella sono progettati per i singoli componenti core AEM. Ogni cartella dedicata di un componente include .scss che assegna uno stile a quel particolare componente in un modulo adattivo. Ad esempio, il file /src/components/accordion/_accordion.scss contiene informazioni sullo stile del componente Pannello a soffietto di Forms adattivo.

  

• src/resources: questa cartella contiene file statici come icone, loghi e font. Queste risorse vengono utilizzate per migliorare gli elementi visivi e la progettazione complessiva del tema.

Creare un tema

Forms as a Cloud Service fornisce, i temi elencati di seguito per i Componenti core basati su Adaptive Forms.

• Tema Area di lavoro
• Tema WKND
• Tema EASEL

È possibile personalizza uno di questi temi per creare un nuovo tema.

Personalizzare un tema

La personalizzazione di un tema si riferisce al processo di modifica e personalizzazione dell’aspetto di un tema. Quando si personalizza un tema, è possibile modificarne gli elementi di progettazione, il layout, i colori, la composizione tipografica e, a volte, il codice sottostante. Consente di creare un aspetto univoco e personalizzato per il sito web o l’applicazione, mantenendo la struttura e le funzionalità di base fornite dal tema.

Prerequisiti

• Acquisisci familiarità con configurazione di una pipeline in Cloud Manager e avere conoscenze di base su come impostare una pipeline ti aiuta a gestire e distribuire in modo efficiente le personalizzazioni dei temi.
• Scopri come configurare un utente con il ruolo collaboratore. Le informazioni su come configurare un utente con il ruolo di collaboratore consentono di concedere le autorizzazioni necessarie per la personalizzazione del tema.
• Installa la versione più recente di Apache Maven. Apache Maven è uno strumento di automazione della build comunemente utilizzato per i progetti Java™. L’installazione della versione più recente garantisce che tu disponga delle dipendenze necessarie per la personalizzazione del tema.
• Installa un editor di testo normale. Microsoft® Visual Studio Code. L'utilizzo di un editor di testo normale come Microsoft® Visual Studio Code fornisce un ambiente semplice per la modifica e la modifica dei file dei temi.

Configurare l’ambiente

• Abilita componenti core Forms adattivi per lo sviluppo locale e l'ambiente di Cloud Service.
• Configura pipeline di distribuzione front-end per l'ambiente di Cloud Service. In alternativa, puoi configurare la pipeline in un secondo momento, dando la flessibilità di assegnare la priorità ai test e perfezionando il tema prima di impostare la pipeline di distribuzione.

Dopo aver appreso i prerequisiti e configurato l’ambiente di sviluppo, sei pronto per iniziare a personalizzare il tema in base alle tue esigenze specifiche.

Personalizzare un tema

La personalizzazione di un tema è un processo in più fasi. Per personalizzare il tema, esegui i passaggi nell’ordine elencato:

1. Clonare un tema
2. Imposta il nome di un tema
3. Personalizzare un tema
4. Testare un tema
5. Distribuire un tema

Gli esempi forniti nel documento sono basati su Area di lavoro ma è importante notare che è possibile clonare qualsiasi tema e personalizzarlo utilizzando le stesse istruzioni. Queste istruzioni sono applicabili a qualsiasi tema, consentendo di modificare i temi in base alle esigenze specifiche.

1. Clonare un tema

Per clonare un tema per Forms adattivo basato su Componenti core, scegli uno dei seguenti temi:

• Tema Area di lavoro
• Tema WKND
• Tema EASEL

Per clonare un tema, attenersi alle istruzioni riportate di seguito.

1. Apri il prompt dei comandi o la finestra del terminale nell’ambiente di sviluppo locale.

2. Esegui il git clone per clonare un tema.

      git clone [Path of Git Repository of the theme]
   

   Sostituisci il [Percorso dell’archivio Git del tema] con l’URL effettivo dell’archivio Git corrispondente del tema

   Ad esempio, per clonare il tema Canvas, eseguire il comando seguente:

      git clone https://github.com/adobe/aem-forms-theme-canvas
   

   Dopo aver eseguito correttamente il comando, nel computer è disponibile una copia locale del tema aem-forms-theme-canvas cartella.

2. Impostare il nome di un tema

1. Apri la cartella dei temi in un editor di testo normale. Ad esempio, per aprire aem-forms-theme-canvas nell'editor di codice di Visual Studio.

2. Accedi a aem-forms-theme-canvas cartella.

3. Esegui il comando seguente:

         code .
   

   

   La cartella viene aperta nel codice di Visual Studio.

4. Apri package.json file per la modifica.

5. Imposta i valori per name e description attributi.

   L’attributo name viene utilizzato per identificare in modo univoco il tema, ad esempio "aem-forms-wknd-theme" e visualizzato in Stile scheda di Creazione guidata modulo. L'attributo description fornisce ulteriori dettagli sul tema, inclusi lo scopo e gli scenari per cui è progettato. È inoltre possibile specificare la versione, la descrizione e la licenza per il tema.

6. Salva e chiudi il file

3. Personalizzare un tema

È possibile personalizzare singoli componenti o apportare modifiche a livello di tema utilizzando le variabili globali di un tema. Eventuali modifiche apportate alle variabili globali influiscono su tutti i singoli componenti. Ad esempio, puoi utilizzare le variabili globali per modificare il colore del bordo di tutti i componenti di un modulo adattivo e un colore di riempimento luminoso per impostare CTA (invito all’azione) utilizzando il componente pulsante:

• Impostare gli stili del livello tema

• Impostare gli stili a livello di componente

Impostare gli stili del livello tema

Il variable.scss contiene le variabili globali del tema. Aggiornando queste variabili, puoi apportare modifiche relative allo stile a livello di tema. Per applicare gli stili a livello di tema, effettua le seguenti operazioni:

1. Apri <your-theme-sources>/src/site/_variables.scss file per la modifica.

2. Modifica il valore di qualsiasi proprietà. Ad esempio, il colore di errore predefinito è red. Per modificare il colore dell'errore da red a blue, modificare il codice esadecimale del colore $errorvariable. Esempio: $error: #196ee5.

3. Salva e chiudi il file

   

Allo stesso modo, è possibile utilizzare variable.scss file per impostare la famiglia e il tipo di carattere, i colori del tema e del font, la dimensione del font, la spaziatura del tema, l’icona di errore, gli stili dei bordi del tema e altre variabili che influiscono su più componenti del modulo adattivo.

Impostare gli stili a livello di componente

È inoltre possibile modificare il carattere, il colore, le dimensioni e altre proprietà CSS di un componente core Modulo adattivo specifico. Ad esempio pulsante, casella di controllo, contenitore, piè di pagina e altro ancora. Puoi applicare uno stile al pulsante o alla casella di controllo modificando il file CSS del componente specifico per allinearlo allo stile della tua organizzazione. Per personalizzare uno stile di un componente:

1. Apri il file <your-theme-sources>/src/components/<component>/<component.scss> per la modifica. Ad esempio, per modificare il colore del font del componente pulsante, apri il <your-theme-sources>/src/components/button/button.scss, file .

2. Modifica il valore di qualsiasi in base alle tue esigenze. Ad esempio, per modificare il colore del componente Pulsante al passaggio del mouse su green, modificare il valore di color: $white proprietà in cmp-adaptiveform-button__widget:hover da classe a codice esadecimale #12B453 o qualsiasi altra tonalità di green. Il codice finale è simile al seguente:

   .cmp-adaptiveform-button__widget:hover {
   background: $dark-gray;
   color: #12B453;
   }
   

3. Salva e chiudi il file

   

   Quando uno stile viene definito sia a livello di tema che a livello di componente, lo stile definito a livello di componente ha la priorità.

4. Testare un tema personalizzato

Per visualizzare in anteprima e testare le modifiche nell’ambiente locale e personalizzare il tema in base ai requisiti per i diversi componenti AEM, effettua le seguenti operazioni:

• 4,1 Configurare l’ambiente locale per il test
• 4,2 Testa il tema utilizzando l’ambiente locale

4.1. Configurare l’ambiente locale per il test

1. Apri la cartella dei temi in un editor di testo normale. Ad esempio, apri il aem-forms-theme-canvas nell'editor di codice di Visual Studio.

2. Rinomina il env_template file in .env nella cartella theme e aggiungi i seguenti parametri:

   * **AEM url**
   AEM_URL=https://[author-instance]
   
   * **AEM Adaptive form name**
   AEM_ADAPTIVE_FORM=Form_name
   
   * **AEM proxy port**
   AEM_PROXY_PORT=7000
   

   Ad esempio, l’URL del modulo è http://localhost:4502/editor.html/content/forms/af/contactusform.html. Quindi, i valori di:

   • URL_AEM = http://localhost:4502/
   • AEM_ADAPTIVE_FORM = contactusform

3. Salva il file.

   

4.2 Testare il tema utilizzando l’ambiente locale

1. Passa alla cartella principale della cartella dei temi. In questo caso, il nome della cartella dei temi è aem-forms-theme-canvas.

2. Apri il prompt dei comandi o il terminale.

3. Esegui npm install per installare le dipendenze.

4. Esegui npm run live per visualizzare in anteprima il modulo con il tema aggiornato nel browser locale.

   NOTA

   Se si verifica un errore durante l'esecuzione di npm run live , eseguire i seguenti comandi prima di npm run live comando:

   • npm install parcel --save-dev
   • npm i @parcel/transformer-sass

Questa è una distribuzione a caldo. Pertanto, ogni volta che apporti modifiche e salvi il _variables.scss e button.scss file, il server seleziona automaticamente le modifiche e visualizza in anteprima l’output più recente. La riga [Browsersync] File event [change] indica che il server ha riconosciuto le modifiche più recenti e le sta distribuendo nell’ambiente locale.

Seguendo gli esempi forniti sia a livello di tema che a livello di componente per le personalizzazioni dei temi, i messaggi di errore di un modulo adattivo vengono modificati in blue colore, mentre il colore dell’etichetta del componente pulsante diventa green al passaggio del mouse.

Anteprima dello stile a livello di tema

Anteprima dello stile a livello di componente

Test del tema per i moduli in hosting in un ambiente di Cloud Service

Puoi anche testare il tema per il modulo adattivo ospitato nell’istanza as a Cloud Service di AEM Forms. Per configurare e impostare l’ambiente locale per il test dei temi con Adaptive Forms ospitato sull’istanza cloud, effettua le seguenti operazioni:

1. Apri la cartella dei temi in un editor di testo normale. Ad esempio, apri il aem-forms-theme-canvas nell'editor di codice di Visual Studio.

2. Rinomina il env_template file in .env e aggiungi i seguenti parametri:

   * **AEM url**
   AEM_URL=https://[author-instance]
   
   * **AEM Adaptive form name**
   AEM_ADAPTIVE_FORM=Form_name
   
   * **AEM proxy port**
   AEM_PROXY_PORT=7000
   

   Ad esempio, l’URL del modulo nell’ambiente cloud è https://author-XXXX.adobeaemcloud.com/editor.html/content/forms/af/contactusform.html. Quindi, i valori di:

   • URL_AEM = https://author-XXXX-cmstg.adobeaemcloud.com/
   • AEM_ADAPTIVE_FORM = contactusform

3. Salva il file.

4. Crea un utente locale.

   NOTA

   Per creare un utente locale:

   • Vai a Home page AEM > Strumenti > Sicurezza > Utenti .
   • Assicurati che l'utente sia membro di forms-users gruppo.

5. Passa alla cartella principale della cartella dei temi. In questo caso, il nome della cartella dei temi è aem-forms-theme-canvas.

6. Esegui npm run live e vieni reindirizzato a un browser locale.

7. Clic SIGN IN LOCALLY (ADMIN TASKS ONLY) e accedere utilizzando le credenziali dell'utente locale.

Puoi visualizzare in anteprima il modulo adattivo con le modifiche più recenti. Una volta apportate le modifiche desiderate in una cartella dei temi, distribuisci il tema nell’ambiente AEM Cloud Service utilizzando la pipeline front-end.

5. Distribuire un tema

Per distribuire il tema nell’ambiente di Cloud Service utilizzando la pipeline front-end:

• 5,1 Creare un archivio per il tema
• 5,2 Invio delle modifiche all’archivio
• 5,3 Eseguire la pipeline front-end

5.1 Creare un archivio per il tema

Per distribuire il tema è necessario un repository. Accedi al tuo Archivio AEM Cloud Manager e aggiungi un nuovo archivio per il tema.

1. Creare un nuovo archivio per il tema facendo clic sul pulsante Archivi > Aggiungi archivio.

   

2. Specifica la Nome archivio nel Aggiungi archivio . Ad esempio, il nome fornito è custom-canvas-theme-repo.

3. Fai clic su Salva.

   

4. Clic Copia URL archivio per copiare l’URL dell’archivio.

   

   NOTA

   • È possibile utilizzare un singolo archivio per più temi.
   • Per distribuire temi diversi, devi creare pipeline front-end separate.
   • Ad esempio, puoi utilizzare lo stesso archivio, come custom-canvas-theme-repo, per tema Canvas, tema WKND e tema EASEL. Tuttavia, per distribuire i temi, è necessario creare pipeline front-end separate. Le personalizzazioni future per un tema specifico vengono distribuite utilizzando la pipeline front-end corrispondente.

5.2. Inviare le modifiche all’archivio

Ora, invia le modifiche all’archivio dei temi del Cloud Service AEM Forms.

1. Passa alla cartella principale della cartella dei temi. In questo caso, il nome della cartella dei temi è aem-forms-theme-canvas.

2. Apri il prompt dei comandi o il terminale.

3. Esegui il comando seguente nell'ordine elencato:

   git remote add [alias-name-for-repository] [URL of repository]
   git add .
   git commit
   git push [name-for-createdrepository]
   

   Ad esempio:

   git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/
   git add .
   git commit
   git push canvascloudthemerepo
   

   

5.3 Eseguire la pipeline front-end

Il tema viene distribuito utilizzando pipeline front-end.. Per distribuire il tema, effettua le seguenti operazioni:

1. Accedi all’archivio di AEM Cloud Manager.

2. Clic Aggiungi dal pulsante Pipeline sezione.

3. Seleziona Aggiungi pipeline non di produzione o Aggiungi pipeline di produzione in base all’ambiente del Cloud Service. Ad esempio, qui il Aggiungi pipeline di produzione è selezionata.

4. In Aggiungi pipeline di produzione finestra di dialogo come parte del Configurazione passaggi, specifica il nome per la pipeline. Ad esempio, il nome della pipeline è customcanvastheme.

5. Fai clic su Continua.

6. Seleziona la Distribuzione mirata > il Codice front-end opzioni, nella Codice sorgente passaggi.

7. Seleziona la Archivio e Ramo Git valori con le modifiche più recenti. Ad esempio, il nome dell’archivio selezionato è custom-canvas-theme-repo e il ramo Git è main.

8. Seleziona la Posizione codice as /, se le modifiche sono presenti nella cartella principale.

9. Fai clic su Salva.
   

   Al termine della configurazione della pipeline, la scheda di invito all’azione viene aggiornata.

10. Fate clic con il pulsante destro del mouse sulla tubazione creata.

11. Clic Esegui .

    

Una volta completata la build, il tema diventa disponibile nell’istanza di authoring per l’utilizzo. Viene visualizzato sotto Stile nella procedura guidata di creazione di moduli adattivi, durante la creazione di un modulo adattivo.

Applicare un tema a un modulo adattivo

I passaggi per applicare un tema a un modulo adattivo sono i seguenti:

1. Accedi all’istanza Autore di AEM Forms.

2. Tocca Adobe Experience Manager > Forms > Forms e documenti.

3. Clic Crea > Forms adattivo. Viene visualizzata la procedura guidata per la creazione di un modulo adattivo.

4. Seleziona il modello di componente core in Sorgente scheda.

5. Seleziona il tema in Stile scheda.

6. Fai clic su Crea.

I temi per moduli adattivi vengono utilizzati come parte di un modello di modulo adattivo per definire lo stile durante la creazione di un modulo adattivo.

Best practice

• Evitare risorse da un altro tema

  Quando modifichi un tema, puoi sfogliare e aggiungere risorse (come immagini) da altri temi. Ad esempio, stai modificando lo sfondo di una pagina. Ad esempio, quando selezioni Pagina > Sfondo > Aggiungi > Immagine, viene visualizzata una finestra di dialogo che consente di sfogliare e aggiungere immagini in un altro tema.

  Se una risorsa viene aggiunta da un altro tema e l’altro tema viene spostato o eliminato, puoi riscontrare dei problemi con il tema corrente. Si consiglia di evitare di sfogliare e aggiungere risorse da altri temi.

• Modifica della larghezza del layout del pannello contenitore

  La modifica della larghezza del layout del pannello contenitore non è consigliata. Quando si specifica la larghezza di un pannello contenitore, questo diventa statico e non si adatta a visualizzazioni diverse.

• Utilizzo dell’editor di moduli o dell’editor temi per l’utilizzo di intestazione e piè di pagina

  Utilizzare l'editor tema se si desidera applicare uno stile a intestazione e piè di pagina utilizzando opzioni di stile quali stile, sfondo e trasparenza del carattere.
  Se si desidera fornire informazioni quali un'immagine del logo, il nome della società nell'intestazione e le informazioni sul copyright nel piè di pagina, utilizzare le opzioni dell'editor di moduli.

Domande frequenti

D: Quale personalizzazione ha priorità quando si effettuano personalizzazioni in una cartella tema a livello globale e di componente?

Ans: Quando vengono effettuate personalizzazioni a livello sia globale che di componente, la personalizzazione a livello di componente ha la priorità.

Consulta anche

• Creare un modulo adattivo di AEM
• Aggiungere un modulo adattivo AEM a una pagina AEM Sites
• Applicare i temi a un modulo adattivo AEM
• Aggiungere componenti a un modulo adattivo di AEM
• Utilizzare il CAPTCHA in un modulo adattivo AEM
• Generare la versione PDF (DoR) di un modulo adattivo AEM
• Tradurre un modulo adattivo di AEM
• Abilitare Adobe Analytics per un modulo adattivo per tenere traccia dell’utilizzo dei moduli
• Collegare un modulo adattivo a Microsoft SharePoint
• Collegare un modulo adattivo a Microsoft Power Automate
• Collegare un modulo adattivo a Microsoft OneDrive
• Collegare un modulo adattivo all’archiviazione BLOB di Microsoft Azure
• Collegare un modulo adattivo a Salesforce
• Utilizzare Adobe Sign in un modulo adattivo di AEM
• Aggiungere una nuova lingua per un modulo adattivo
• Inviare dati del modulo adattivo a un database
• Inviare dati del modulo adattivo a un endpoint REST
• Inviare dati del modulo adattivo al flusso di lavoro di AEM
• Utilizzare il portale dei moduli per elencare moduli adattivi di AEM su un sito web di AEM
• Impostare il layout dei moduli per dimensioni di schermo e tipi di dispositivi diversi
• Generare un documento di record per Forms adattivo (componenti core)
• Creare un Forms adattivo con sezioni ripetibili
• Modelli di temi e modelli di dati modulo di esempio
• Abilitare i componenti core dei moduli adattivi in AEM Forms as a Cloud Service e nell’ambiente di sviluppo locale