Personalizzare la creazione dell'interfaccia utente per la corrispondenza

Panoramica

Gestione della corrispondenza ti consente di ridefinire il modello di soluzione per migliorare il valore del marchio e di rispettare gli standard di branding della tua organizzazione. Il rebranding dell’interfaccia utente include la modifica del logo dell’organizzazione, visualizzato nell’angolo in alto a sinistra dell’interfaccia utente Crea corrispondenza.

Puoi modificare il logo nell’interfaccia utente Crea corrispondenza con il logo della tua organizzazione.

interfaccia utente Crea corrispondenza: l’icona personalizzata nell’interfaccia utente Crea corrispondenza

Modifica del logo nell’interfaccia utente Crea corrispondenza

Per impostare un'immagine del logo desiderato, procedi come segue:

1. Crea la struttura di cartelle appropriata in CRX.

2. Carica il nuovo file di logo nella cartella creata in CRX.

3. Imposta il CSS su CRX per fare riferimento al nuovo logo.

4. Cancella la cronologia del browser e aggiorna l'interfaccia utente Crea corrispondenza.

Creazione della struttura di cartelle richiesta

Creare la struttura delle cartelle, come illustrato di seguito, per ospitare l'immagine del logo personalizzato e il foglio di stile. La nuova struttura di cartelle con la cartella principale /apps è simile alla struttura della cartella /libs .

Per qualsiasi personalizzazione, crea una struttura di cartelle parallela, come spiegato di seguito, nel ramo /apps .

Il ramo /apps (struttura cartelle):

• Assicurati che i file siano sicuri in caso di aggiornamento del sistema. In caso di aggiornamento, feature pack o hotfix, il ramo /libs viene aggiornato e se si ospitano le modifiche nel ramo /libs, queste vengono sovrascritte.
• Ti aiuta a non disturbare il sistema/ramo attuale, che è possibile risolvere per errore se utilizzi le posizioni predefinite per la memorizzazione dei file personalizzati.
• Aiuta le tue risorse a ottenere una priorità più elevata quando AEM ricerca delle risorse. AEM è configurato per cercare prima il ramo /apps e poi il ramo /libs per trovare una risorsa. Questo meccanismo significa che il sistema utilizza la sovrapposizione (e le personalizzazioni ivi definite).

Utilizza i seguenti passaggi per creare la struttura di cartelle richiesta nel ramo /apps :

1. Vai a https://[server]:[port]/[ContextPath]/crx/de e accedi come amministratore.

2. Nella cartella delle app, crea una cartella denominata css con percorso/struttura simile alla cartella css (che si trova nella cartella ccrui).

   Passaggi per creare la cartella css:

   1. Fai clic con il pulsante destro del mouse sulla cartella css al seguente percorso e seleziona Sovrapponi nodo: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css

      

   2. Assicurati che la finestra di dialogo Sovrapponi nodo abbia i seguenti valori:

      Percorso: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css

      Posizione di sovrapposizione: /apps/

      Tipi di nodo di corrispondenza: controllati

      

      NOTA

      Non apportare modifiche al ramo /libs. Eventuali modifiche apportate potrebbero andare perse, in quanto questo ramo è soggetto a modifiche ogni volta che:

      • Aggiorna l'istanza
      • Applicare un hotfix
      • Installare un feature pack

   3. Fai clic su OK. La cartella css viene creata nel percorso specificato.

3. Nella cartella delle app, crea una cartella denominata imgs con percorso/struttura simile alla cartella imgs (che si trova nella cartella ccrui).

   1. Fai clic con il pulsante destro del mouse sulla cartella imgs al seguente percorso e seleziona Sovrapponi nodo: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs

   2. Assicurati che la finestra di dialogo Sovrapponi nodo abbia i seguenti valori:

      Percorso: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs

      Posizione di sovrapposizione: /apps/

      Tipi di nodo di corrispondenza: controllati

   3. Fai clic su OK.

      NOTA

      Puoi anche creare manualmente la struttura delle cartelle nella cartella /apps .

4. Fai clic su Salva tutto per salvare le modifiche sul server.

Carica il nuovo logo in CRX

Carica il file del logo personalizzato in CRX. Le regole HTML standard disciplinano il rendering del logo. I formati di file immagine supportati dipendono dal browser utilizzato per accedere ad AEM Forms. Tutti i browser supportano JPEG, GIF e PNG. Per ulteriori informazioni, consulta la documentazione specifica del browser sui formati immagine supportati.

• Le dimensioni predefinite dell'immagine logo sono 48 px * 48 px Assicurati che l'immagine sia simile a questa dimensione o superiore a 48 px * 48 px
• Se l’altezza dell’immagine logo è superiore a 50 px, l’interfaccia utente Crea corrispondenza ridimensiona l’immagine fino a un’altezza massima di 50 px, poiché questa è l’altezza dell’intestazione. Quando si ridimensiona l’immagine, l’interfaccia utente Crea corrispondenza mantiene le proporzioni dell’immagine.
• L’interfaccia utente Crea corrispondenza non ridimensiona l’immagine se è piccola, quindi assicurati di utilizzare un’immagine logo con altezza di almeno 48 px e larghezza sufficiente per chiarezza.

Utilizza i seguenti passaggi per caricare il file del logo personalizzato su CRX:

1. Passa a https://[server]:[port]/[contextpath]/crx/de. Se necessario, accedi come Amministratore.

2. In CRXDE, fai clic con il pulsante destro del mouse sulla cartella imgs nel seguente percorso e seleziona Crea > Crea file:

   /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs/

   

3. Nella finestra di dialogo Crea file , immetti il nome del file come CustomLogo.png (o il nome del file del logo).

   

4. Fare clic su Salva tutto.

   Sotto il nuovo file creato (qui CustomLogo.png), viene visualizzata la proprietà jcr:content.

5. Fai clic su jcr:content nella struttura delle cartelle.

   vengono visualizzate le proprietà di jcr:content.

   

6. Fai doppio clic sulla proprietà jcr:data .

   Viene visualizzata la finestra di dialogo Modifica jcr:data .

   Ora fai clic sulla cartella newlogo.png , fai doppio clic su jcr:content (opzione dim) e imposta il tipo nt:resource. Se non presente, crea una proprietà con nome jcr:content.

7. Nella finestra di dialogo Modifica jcr:data, fai clic su Sfoglia e seleziona il file di immagine da utilizzare come logo (qui CustomLogo.png).

   I formati di file immagine supportati dipendono dal browser utilizzato per accedere ad AEM Forms. Tutti i browser supportano JPEG, GIF e PNG. Per ulteriori informazioni, consulta la documentazione specifica del browser sui formati immagine supportati.

   
   Figura: Esempio - CustomLogo.png da utilizzare come logo personalizzato

8. Fare clic su Salva tutto.

Crea il CSS per integrare il logo con l’interfaccia utente

L’immagine del logo personalizzato richiede il caricamento di un foglio di stile aggiuntivo nel contesto del contenuto.

Per impostare il foglio di stile per il rendering del logo, attenersi alla procedura descritta di seguito.

1. Passa a https://[server]:[port]/[contextpath]/crx/de. Se necessario, accedi come Amministratore.

2. Crea un file denominato customcss.css (non puoi usare un nome di file diverso) nella posizione seguente:

   /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/

   Passaggi per creare il file customcss.css:

   1. Fai clic con il pulsante destro del mouse sulla cartella css e seleziona Crea > Crea file.

   2. Nella finestra di dialogo Nuovo file , specifica il nome del CSS come customcss.css(non puoi utilizzare un nome di file diverso) e fai clic su OK.

   3. Aggiungi il codice seguente al file css appena creato. In content:url nel codice, specifica il nome immagine caricato nella cartella imgs in CRXDE.

      .logo, .logo:after {
      content:url("../imgs/CustomLogo.png");
      }
      

   4. Fare clic su Salva tutto.

Aggiorna l’interfaccia utente Crea corrispondenza per visualizzare il logo personalizzato

Cancella la cache del browser e apri l’istanza dell’interfaccia utente Crea corrispondenza nel browser. Dovresti visualizzare il tuo logo personalizzato.

logo personalizzatoFigura: l'icona personalizzata nell'interfaccia utente Crea corrispondenza