Konfigurera ikon för anpassade/specialiserade datatyper (ämne eller karta)
Problemöversikt
Om du använder ett anpassat schema i AEM Guides kan du skapa anpassade avsnitt eller schematyper och därmed lägga märke till att de anpassade avsnitten/mappningstyperna inte visar ikonen i webbredigeraren eller Assets-gränssnittet. Se skärmbilden nedan för referens
Så om du vill tilldela en ikon till de anpassade avsnitten/mappningstyperna måste du göra följande:
- Söka efter en anpassad ämne/karttyp
- Skriv format för att lägga till önskad ikon för den anpassade typen
Vi kan implementera ovanstående steg för att visa ikonen i webbredigeraren (databasvyn) samt i Assets-gränssnittet. Nedan beskrivs stegen för båda
Visa ikon för anpassade ämnen/kartor i webbredigeringsvyn
Steg 1: Bestäm datatypen för det anpassade datatecknet/den anpassade datatypsnittet
- Öppna databasvyn i webbredigeraren > öppna utvecklarkonsolen i webbläsaren
- Inspect ikonutrymmet bredvid det listade ämnet/kartan
- Kontrollera klassen som har tilldelats det anpassade ämnet
- Se skärmbilden nedan för mer information
- Vi använder den här klassen för att tilldela ikoner och skriva css för den
Steg 2: Skapa CSS och tilldela ikoner till den här datatypen
- Skapa ett klientbibliotek under /apps, låt säga att du skapar en cq:ClientLibraryFolder under önskad sökväg
- lägg till kategorierna"apps.fmdita.xml_editor.page" i den
- skapa en mapp "assets" i den här katalogen och lägga till alla ikoner som du vill använda för anpassade datatyper
- lägg till en css-fil i klientbiblioteksmappen, säg "tree-icons.css"
- lägg till följande kod
.tree-item-icon {
&.custommaptype {
background-image: url('assets/custommap.svg')
}
&.customtopictype {
background-image: url('assets/customtopic.svg')
}
}
- lägg till css.txt under klientbiblioteksmappen och lägg till referens till"tree-icon.css" som just skapats
- spara/distribuera dessa ändringar
Se skärmbilden nedan för mer information.
Slutresultatet visas i skärmbilden nedan
Visar ikon för anpassade ämnen/kartor i Assets-gränssnittet
Steg 1: som fastställer datatypen för det anpassade datatecknet/den anpassade datamappningen
- detta förklaras i föregående metods steg 1
Steg 2: Skapa JavaScript-skript för att definiera vilka ikoner som ska läsas in för den anpassade datatypen för anpassade ämne-/mappningstyper
-
Skapa ett klientbibliotek under /apps, låt säga att du skapar en cq:ClientLibraryFolder under önskad sökväg
-
lägga till följande egenskaper i den:
- "categories"(multivalue string) value as "dam.gui.admin.coral"
- "beroenden"(multivärdesträng) som "libs.fmdita.versioncontrol"
-
-
Skapa en kopia av filen"/libs/fmdita/clientlibs/clientlibs/xmleditor/clientlib-dam/topic_type.js" till den här /apps-katalogen
- redigera det kopierade"topic_type.js" och ändra/lägg till anpassadType under variabeln "typeImageNameMap"
- Du kan också ändra sökvägen till bildmappen genom att ändra värdet för variabeln "parentImagePath" till den plats där anpassade ikoner sparas
-
Skapa en fil med namnet js.txt i klientbiblioteksmappen och lägg till referens till topic_type.js
-
spara/distribuera dessa ändringar
Se skärmbilden nedan för mer information.
Slutresultatet visas som på skärmbilden
