DocumentazioneAEM 6.5Guida utente

Personalizzare l’interfaccia utente per la creazione di corrispondenza customize-create-correspondence-ui

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Si applica a:
  • Experience Manager 6.5

Creato per:

  • Amministratore
  • Utente
  • Sviluppatore

Panoramica overview

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

Puoi modificare il logo nell’interfaccia utente per la creazione di corrispondenza con il logo dell’organizzazione.

Icona personalizzata nellinterfaccia utente per la creazione di corrispondenza

Icona personalizzata nell’interfaccia utente per la creazione di corrispondenza

Modifica del logo nell’interfaccia utente per la creazione di corrispondenza changing-the-logo-in-the-create-correspondence-ui

Per impostare un'immagine del logo a scelta, effettuare le seguenti operazioni:

  1. Creare la struttura di cartelle ​ appropriata in CRX.

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

  3. Configura 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 creatingfolderstructure

Creare la struttura di cartelle, come spiegato 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.

Ramo /apps (struttura cartelle):

  • Garantisce la sicurezza dei file in caso di aggiornamento del sistema. In caso di aggiornamento, feature pack o correzione rapida, il ramo /libs viene aggiornato e le modifiche nel ramo /libs vengono sovrascritte.
  • Consente di non disturbare il sistema/ramo attuale, che è possibile risolvere per errore se si utilizzano i percorsi predefiniti per la memorizzazione dei file personalizzati.
  • Consente alle risorse di ottenere una priorità più elevata quando l’AEM cerca le risorse. L'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 qui definite).

Per creare la struttura di cartelle richiesta nel ramo /apps, attenersi alla procedura descritta di seguito.

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

  2. Nella cartella delle app, creare una cartella denominata css con un percorso/struttura simile alla cartella css (nella cartella ccrui).

    Passaggi per creare la cartella css:

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

      Sovrapponi nodo

    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 sovrapposizione: /apps/

      Corrispondenza tipi di nodo: selezionata

      Percorso nodo sovrapposto

      note note
      NOTE
      Non modificare il ramo /libs. Qualsiasi modifica apportata potrebbe andare persa, poiché questo ramo è soggetto a qualsiasi modifica ogni volta che:
      code language-none 
      * Eseguire l’aggiornamento all’istanza
* Applicare un hotfix
* Installare un feature pack

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

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

    1. Fare clic con il pulsante destro del mouse sulla cartella imgs nel percorso seguente e selezionare 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 sovrapposizione: /apps/

      Corrispondenza tipi di nodo: selezionata

    3. Fai clic su OK.

      note note
      NOTE
      Puoi anche creare manualmente la struttura di cartelle nella cartella /apps.

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

Carica il file del logo personalizzato in CRX. Il rendering del logo è disciplinato dalle regole standard di HTML. I formati di file di 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 per il browser sui formati di immagine supportati.

  • Le dimensioni predefinite dell'immagine del logo sono 48 px * 48 px. Assicurarsi che l'immagine sia simile a questa dimensione o maggiore di 48 px * 48 px.
  • Se l’altezza dell’immagine del logo è superiore a 50 px, l’interfaccia utente per la creazione di corrispondenza ridimensiona l’immagine a un’altezza massima di 50 px, in quanto si tratta dell’altezza dell’intestazione. Durante il ridimensionamento dell’immagine, l’interfaccia utente Crea corrispondenza mantiene le proporzioni dell’immagine.
  • L'interfaccia utente per la creazione di corrispondenza non consente di ridimensionare l'immagine se è piccola, quindi assicurati di utilizzare un'immagine con logo di almeno 48 px in altezza e larghezza sufficiente per una maggiore chiarezza.

Per caricare il file del logo personalizzato in CRX, procedere come segue:

  1. Vai a https://'[server]:[port]'/[contextpath]/crx/de. Se necessario, accedi come amministratore.

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

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

    Crea nuovo nodo nella cartella imgs

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

    CustomLogo.png come nuovo nodo

  4. Fare clic su Salva tutto.

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

  5. Fare clic su jcr:content nella struttura di cartelle.

    jcr:vengono visualizzate le proprietà del contenuto.

    jcrcontentproperties

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

    Viene visualizzata la finestra di dialogo Modifica jcr:data.

    Fare clic sulla cartella newlogo.png, quindi fare doppio clic su jcr:content (opzione dim) e impostare il tipo nt:resource. Se non è presente, crea una proprietà denominata jcr:content.

  7. Nella finestra di dialogo Modifica jcr:data fare clic su Sfoglia e selezionare il file di immagine da utilizzare come logo (in questo caso CustomLogo.png).

    I formati di file di 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 per il browser sui formati di immagine supportati.

    File logo personalizzato di esempio

    Esempio: CustomLogo.png da utilizzare come logo personalizzato

  8. Fare clic su Salva tutto.

Creare il CSS per il rendering del logo con l’interfaccia utente createcss

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

Utilizza i seguenti passaggi per creare il foglio di stile per il rendering del logo con l’interfaccia utente:

  1. Vai a https://'[server]:[port]'/[contextpath]/crx/de. Se necessario, accedi come amministratore.

  2. Crea un file denominato customcss.css (non è possibile utilizzare un nome file diverso) nel percorso seguente:

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

    Passaggi per creare il file custom.css:

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

    2. Nella finestra di dialogo Nuovo file, specifica il nome del file CSS come customcss.css (non puoi usare un nome 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 dell'immagine caricata nella cartella imgs in CRXDE.

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

    4. Fare clic su Salva tutto.

Aggiorna l’interfaccia utente per la creazione di corrispondenza in modo da visualizzare il logo personalizzato refreshccrui

Cancella la cache del browser, quindi apri l’istanza dell’interfaccia utente Crea corrispondenza nel browser in modo da visualizzare il logo personalizzato.

Creare uninterfaccia utente per la corrispondenza con il logo personalizzato

Icona personalizzata nell’interfaccia utente per la creazione di corrispondenza

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