Configurazione dell’icona per i tipi dita (topic o map) personalizzati/specializzati
Dichiarazione di problema
Con lo schema personalizzato utilizzato in AEM Guides, puoi creare tipi di argomenti o mappe personalizzati e con questo puoi notare che i tipi di argomenti/mappe personalizzati non mostrano l’icona nell’editor web o nell’interfaccia utente di Assets. Vedi la schermata seguente come riferimento
Pertanto, per assegnare un’icona ai tipi di argomento/mappa personalizzati, devi effettuare le seguenti operazioni:
- Trovare il tipo di argomento/mappa personalizzato
- Scrivi gli stili per aggiungere l’icona desiderata per il tipo personalizzato
Possiamo implementare i passaggi precedenti per mostrare l’icona nell’editor web (vista archivio) e nell’interfaccia utente di Assets. Di seguito sono riportati i passaggi per entrambi
Visualizzazione dell'icona per l'argomento o la mappa personalizzati nella visualizzazione editor Web
Passaggio 1: Determinare il tipo di dita per l'argomento/app dita personalizzato
- Apri la vista archivio in editor web > apri console sviluppatori nel browser
- Inspect lo spazio delle icone accanto all’argomento/mappa elencato
- Controlla la classe assegnata all'argomento personalizzato
- Vedi la schermata seguente per ulteriori dettagli
- Questa classe verrà utilizzata per assegnare un'icona e scrivere css per questo
Passaggio 2: Crea CSS e assegna l'icona a questo tipo di dita
- Crea una libreria client in /apps. Supponiamo che si crei una cq:ClientLibraryFolder nel percorso desiderato.
- aggiungi le categorie "apps.fmdita.xml_editor.page"
- crea una cartella "assets" sotto questa directory e aggiungi tutte le icone che desideri utilizzare per i tipi dita personalizzati
- aggiungi un file css nella cartella della libreria client, ad esempio "tree-icons.css"
- aggiungi il seguente codice
.tree-item-icon {
&.custommaptype {
background-image: url('assets/custommap.svg')
}
&.customtopictype {
background-image: url('assets/customtopic.svg')
}
}
- aggiungi css.txt nella cartella della libreria client e aggiungi il riferimento a "tree-icon.css" appena creato
- salva/implementa queste modifiche
Fai riferimento alla schermata seguente per ulteriori dettagli.
E l'output finale è mostrato nella schermata seguente
Icona visualizzata per argomento/mappa personalizzato nell’interfaccia utente di Assets
Passaggio 1: determinazione del tipo dita dell'argomento/mappa dita personalizzato
- questo è spiegato nel passaggio 1 dei metodi precedenti
Passaggio 2: Crea Javacscript per definire quali icone caricare per il tipo di dita personalizzato per i tipi di argomento/mappa personalizzati
-
Crea una libreria client in /apps. Supponiamo che si crei una cq:ClientLibraryFolder nel percorso desiderato.
-
aggiungi le seguenti proprietà:
- Valore "Categories"(stringa multivalore) come "dam.gui.admin.coral"
- valore "dependencies"(stringa multivalore) come "libs.fmdita.versioncontrol"
-
-
Crea una copia del file "/libs/fmdita/clientlibs/clientlibs/xmleditor/clientlib-dam/topic_type.js" in questa directory /apps
- modificare "topic_type.js" copiato e modificare/aggiungere customtopictype nella variabile "typeImageNameMap"
- È inoltre possibile modificare il percorso della cartella delle immagini modificando il valore della variabile "parentImagePath" in cui sono memorizzate le icone personalizzate
-
Crea un file denominato js.txt nella cartella della libreria client e aggiungi un riferimento a "topic_type.js"
-
salva/implementa queste modifiche
Fai riferimento alla schermata seguente per ulteriori dettagli.
L'output finale verrà visualizzato come mostrato nella schermata
