Temi in Forms adattivo (componenti core)

Puoi creare e applicare temi per formattare un modulo adattivo utilizzando i componenti core. 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 applicate un tema, lo stile specificato viene riflesso sui componenti corrispondenti. Il tema viene gestito in modo indipendente senza un riferimento a un modulo adattivo.

Quando creare un modulo adattivo utilizzando i Componenti core, i temi predefiniti vengono visualizzati sotto Stile scheda. Per impostazione predefinita, solo il Area di lavoro Il tema è disponibile.

Utilizzo del tema Canvas in Adaptive Forms tramite i componenti core

I passaggi per applicare il 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.

   NOTA

   Quando crei un modulo adattivo con componenti core, il tema Area di lavoro viene visualizzato nella scheda Stile. Questo è l’unico tema predefinito attualmente disponibile. Ma puoi cambiare il tema a tuo piacimento e salvarlo per un utilizzo futuro impostando una pipeline front-end.

5. Seleziona il tema dell’area di lavoro nel 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.

Personalizzare il tema

Per personalizzare un tema:

• configurare una pipeline in Cloud Manager
• Configurare un utente con ruolo collaboratore.
• Dovresti avere un conoscenza di base di Git e archivi Git di Cloud Service.

Per personalizzare un tema Area di lavoro:

1. Clonare il tema Canvas
2. Comprendere la struttura del tema
3. Modificare il nome in package.json e package_lock.json
4. Creare
5. Avvia il server proxy locale
6. Personalizzare il tema
7. Eseguire il commit delle modifiche
8. Distribuire la pipeline

1. Clonare il tema Canvas

Apri il prompt dei comandi ed esegui il comando seguente per clonare il tema dell’area di lavoro:

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

2. Comprendere la struttura del tema

Un tema per moduli adattivi è un pacchetto contenente le risorse CSS, JavaScript e statiche che definiscono lo stile del modulo e ne rispettano la struttura. Un tema Modulo adattivo presenta la seguente struttura, tipica di un progetto front-end:

• src/components: file JavaScript e CSS specifici per i componenti core AEM
• src/resources: file statici come icone, loghi e font
• src/site: file JavaScript e CSS applicabili all’intera pagina AEM Sites
• src/theme.ts: il punto di ingresso principale del tema JavaScript & CSS
• src\theme.scss: file JavaScript e CSS applicabili all’intero tema

Il src/components La cartella contiene file JavaScript e CSS specifici per tutti i componenti core AEM come pulsante, casella di controllo, contenitore, piè di pagina, ecc. Puoi assegnare uno stile al pulsante o alla casella di controllo modificando il file CSS specifico del componente AEM.

Per personalizzare il tema, puoi avviare il server proxy locale per visualizzare le personalizzazioni del tema in tempo reale in base al contenuto effettivo dell’AEM.

3. Modifica il nome in package.json e package_lock.json del tema dell’area di lavoro

Aggiornare il nome e la versione del tema Canvas nel package.json e package_lock.json file.

4. Creare il file .env in una cartella dei temi

Creare un .env nella cartella theme e aggiungi i seguenti parametri:

• URL AEM
  AEM_URL=https://[author-instance]

• Nome del sito AEM
  AEM_ADAPTIVE_FORM=Nome_modulo

• Porta proxy AEM
  AEM_PROXY_PORT=7000

5. Avviare un server proxy locale

1. Dalla riga di comando, passa alla root del tema nel computer locale.

2. Esegui npm install e npm recupera le dipendenze e installa il progetto.

3. Esegui npm run live e il server proxy viene avviato.

   

4. Tocca o fai clic su ACCESSO LOCALE (SOLO ATTIVITÀ AMMINISTRATORE) e accedere con le credenziali utente proxy fornite dall'amministratore AEM.

   

   NOTA

   • Crea un utente locale per l'accesso locale. Fornisci il ruolo di collaboratore per il designer del tema.
   • Se specifichi l’URL AEM come http://localhost:[port]/ nel .env file del tema Canvas, verrai reindirizzato direttamente al browser.

5. Una volta effettuato l’accesso, modifica l’URL nel browser in modo che indirizzi al percorso del contenuto di esempio fornito dall’amministratore AEM.

   • Ad esempio, se il percorso fornito è stato /content/formname.html?wcmmode=disabled, modifica l’URL in http://localhost:[port]/content/forms/af/formname.html?wcmmode=disabled

   

Passa a un modulo adattivo per vedere il tema Area di lavoro applicato a un modulo adattivo.

6. Personalizzare il tema

1. Nell’editor, apri il file <your-theme-sources>/src/site/_variables.scss.

   NOTA

   Puoi assegnare uno stile a tutti i componenti del modulo adattivo direttamente in un sito modificando il site/_variables.scss file.

2. Modifica la variabile per font colour a red.

   

   Personalizzare lo stile dei diversi componenti dell’AEM

   Puoi assegnare uno stile ai diversi componenti di un modulo adattivo modificandone il file CSS nell’editor. Nella cartella Tema dell’area di lavoro sono presenti diverse cartelle CSS per ogni componente core Modulo adattivo.

   

   Per specificare gli stili per un componente specifico nell’editor temi, puoi modificare il CSS in una cartella temi. Se ad esempio si desidera modificare il colore del bordo di un campo casella di testo, aprire il file CSS nell'editor e modificarne il colore.

   

3. Quando si salva il file, il server proxy riconosce la modifica tramite la riga [Browsersync] File event [change].

   

4. Tornando al browser del server proxy locale, la modifica è immediatamente visibile.

   

Il designer del tema visualizza in anteprima le modifiche nel server proxy locale e personalizza il tema in base ai requisiti per i diversi componenti AEM.

Prima di eseguire il commit delle modifiche nell’archivio Git dell’AEM, devi accedere al tuo Informazioni sull’archivio Git.

7. Eseguire il commit delle modifiche

Dopo aver apportato modifiche al tema e averlo testato con un server proxy locale, esegui il commit delle modifiche nell’archivio Git del Cloud Service AEM Forms. Rende il tema personalizzato disponibile nell’ambiente del Cloud Service Forms per l’utilizzo da parte di autori di Forms adattivi.

Prima di eseguire il commit delle modifiche nell’archivio Git del Cloud Service AEM Forms, è necessario clonare l’archivio nel computer locale. Per clonare l’archivio:

1. Creare un nuovo archivio temi facendo clic sul pulsante Archivi opzione.

   

2. Clic Aggiungi archivio e specificare Nome archivio nel Aggiungi archivio . Fai clic su Salva.

   

3. Clic Copia URL archivio per copiare l’URL dell’archivio creato.

   

4. Apri il prompt dei comandi e clona l’archivio cloud creato in precedenza.

   git clone https://git.cloudmanager.adobe.com/aemforms/Canvasthemerepo/
   

5. Sposta i file dell’archivio dei temi che stai modificando nell’archivio cloud con un comando simile a
   cp -r [source-theme-folder]/* [destination-cloud-repo]
   Ad esempio, utilizzare questo comando
   cp -r [C:/cloned-git-canvas/*] [C:/cloned-repo]

6. Nella directory dell’archivio cloud, esegui il commit dei file dei temi spostati in con i seguenti comandi.

   git add .
   git commit -a -m "Adding theme files"
   git push
   

7. Le personalizzazioni vengono inviate all’archivio Git.

   

Le personalizzazioni vengono ora memorizzate in modo sicuro nell’archivio Git.

8. Eseguire la pipeline front-end

1. Crea la pipeline front-end per distribuire il tema personalizzato. Scopri come impostare una pipeline front-line per distribuire il tema personalizzato.
2. Esegui la pipeline front-end creata per distribuire la cartella dei temi personalizzata nel Stile di una procedura guidata per la creazione di moduli adattivi.

Esempio per personalizzare il tema

1. Accedi all’istanza Autore di AEM Forms.
2. Apri un modulo adattivo creato utilizzando i componenti core.
3. Avviare il server proxy locale utilizzando il prompt dei comandi e fare clic su ACCESSO LOCALE (SOLO ATTIVITÀ AMMINISTRATORE).
4. Una volta effettuato l’accesso, vieni reindirizzato al browser e visualizzi il tema applicato.
5. Scarica il file Tema area di lavoro ed estrarre la cartella zip scaricata.
6. Apri la cartella zip estratta nell’editor preferito.
7. Creare un .env nella cartella dei temi e aggiungi i parametri: URL AEM, MODULO_ADATTIVO_AEM e PORTA_PROXY_AEM.
8. Apri il file CSS della casella di testo nella cartella del tema dell’area di lavoro e modifica il colore del bordo in "Pronuncia" red e salva le modifiche.
9. Riapri il browser e osserva che le modifiche si riflettono immediatamente in un modulo adattivo.
10. Sposta la cartella del tema dell’area di lavoro nell’archivio clonato.
11. Apporta le modifiche ed esegue la pipeline front-end.

Una volta eseguita la pipeline, il tema è disponibile nella scheda Stile.

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.

Risorse Business.Adobe.com