DocumentazioneAEM 6.5Guida utente

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

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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 nell’interfaccia 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 il struttura delle cartelle in CRX.

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

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

  4. Cancella la cronologia del browser e aggiornare l’interfaccia utente per la creazione di 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.

Il /apps ramo (struttura cartelle):

  • Garantisce la sicurezza dei file in caso di aggiornamento del sistema. In caso di aggiornamento, feature pack o correzione rapida, il /libs il ramo viene aggiornato e se le modifiche vengono memorizzate nel /libs vengono sovrascritti.
  • 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 la ricerca nel /apps prima la diramazione e quindi la /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 in, attenersi alla procedura descritta di seguito /apps ramo:

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

  2. Nella cartella delle app, crea 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 css cartella 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: Selezionato

      Percorso nodo di sovrapposizione

      note note
      NOTE
      Non modificare /libs filiale. 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. Clic OK. La cartella css viene creata nel percorso specificato.

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

    1. Fare clic con il pulsante destro del mouse img cartella 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: Selezionato

    3. Fai clic su OK.

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

  4. Clic Salva tutto per salvare le modifiche sul server.

Carica il file del logo personalizzato su 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 Assicurati che l’immagine sia simile a questa dimensione o superiore a 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, effettua le seguenti operazioni:

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

  2. In CRXDE, fai clic con il pulsante destro del mouse su img cartella 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. Clic 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. Fai doppio clic su jcr:data proprietà.

    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:dati, fai clic su Sfoglia e selezionare il file di immagine da utilizzare come logo (qui 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.

    Esempio di file del logo personalizzato

    Esempio: CustomLogo.png da utilizzare come logo personalizzato

  8. Clic 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 css cartella e seleziona Crea > Crea file.

    2. Nella finestra di dialogo Nuovo file, specifica il nome del file CSS come customcss.css(non è possibile utilizzare un nome file diverso), quindi fare 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. Clic 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 un’interfaccia utente per la corrispondenza con un logo personalizzato

Icona personalizzata nell’interfaccia utente per la creazione di corrispondenza

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