Het vormen pictogram voor douane/gespecialiseerde dita (onderwerp of kaart) types

Probleemverklaring

Met douaneschema in AEMGidsen wordt gebruikt, kunt u douaneonderwerp of kaarttypes tot stand brengen en waarmee u de types van douaneonderwerp/kaart kunt opmerken tonen geen pictogram in Web-redacteur of Activa UI die. Zie onderstaande schermafbeelding ter referentie

screenshot ter referentie

Zo om een pictogram aan de types van douaneonderwerp/kaart toe te wijzen, moet u het volgende doen:

  • Het aangepaste onderwerp-/kaarttype zoeken
  • Stijlen schrijven om het gewenste pictogram voor het aangepaste type toe te voegen

We kunnen de bovenstaande stappen implementeren om het pictogram weer te geven in de webeditor (de weergave in de repository) en in de interface Middelen. Hieronder staan de stappen voor beide

Pictogram weergeven voor aangepast onderwerp/aangepaste kaart in webeditorweergave

Stap 1: Bepaal het ditatype voor het aangepaste dita topic/ap

  • Open de dataweergave in de webeditor > open ontwikkelingsconsole in de browser
  • De pictogramruimte naast het vermelde onderwerp/de lijst Inspect
  • Controleer de klasse die aan het douaneonderwerp wordt toegewezen
  • Zie de onderstaande schermafbeelding voor meer informatie Zie de schermafbeelding
  • Deze klasse wordt gebruikt om pictogrammen toe te wijzen en css voor dit te schrijven

Stap 2: CSS maken en pictogram toewijzen aan dit gegevenstype

  • Maak een clientbibliotheek onder /apps en laat u een cq:ClientLibraryFolder onder het gewenste pad maken
    • er categorieën "apps.fmdita.xml_editor.page" aan toevoegen
  • Maak een map "assets" onder deze map en voeg alle pictogrammen toe die u voor aangepaste gegevenstypen wilt gebruiken
  • een CSS-bestand toevoegen onder de map van de clientbibliotheek, bijvoorbeeld "tree-icons.css"
    • volgende code toevoegen
            .tree-item-icon {
                &.custommaptype {
                    background-image: url('assets/custommap.svg')
                }
                &.customtopictype {
                    background-image: url('assets/customtopic.svg')
                }
            }
  • css.txt toevoegen onder de map met clientbibliotheken en verwijzing toevoegen naar "tree-icon.css" (zojuist gemaakt)
  • deze wijzigingen opslaan/implementeren

Zie onder de schermafbeelding voor meer informatie.
Screenshot vernieuwen

En de uiteindelijke uitvoer wordt weergegeven onder de schermafbeelding
weergegeven in schermafbeelding

Pictogram weergeven voor aangepast onderwerp/kaart in interface Middelen

Stap 1: het bepalen van het ditatype van het aangepaste dita onderwerp/de kaart

  • dit wordt uitgelegd in stap 1 van de voorgaande methoden

Stap 2: Creeer JavaScript om te bepalen welke pictogrammen voor het douanetype dita voor de types van douaneonderwerp/kaart te laden

  • Maak een clientbibliotheek onder /apps en laat u een cq:ClientLibraryFolder onder het gewenste pad maken

    • Voeg de volgende eigenschappen toe:

      • "Categorieën" (multivalue string) als "dam.gui.admin.coral"
      • Waarde voor 'afhankelijkheden' (multivalue string) als 'libs.fmdita.versioncontrol'
  • Een kopie van het bestand "/libs/fmdita/clientlibs/clientlibs/xmleditor/clientlib-dam/topic_type.js" maken naar deze map /apps

    • bewerk het gekopieerde "topic_type.js"en verander/voeg customtopictype onder veranderlijke "typeImageNameMap" toe
    • U kunt het pad van de afbeeldingenmap ook wijzigen door de waarde van de variabele "parentImagePath" te wijzigen in de locatie waar aangepaste pictogrammen worden opgeslagen
  • Creeer een dossier genoemd js.txt onder de omslag van de cliëntbibliotheek en voeg verwijzing naar "topic_type.js toe

  • Sla deze wijzigingen op/implementeer deze onder de schermafbeelding voor meer informatie.
    Screenshot vernieuwen

En de definitieve output zal verschijnen zoals aangetoond in het schermschot weergegeven in schermafbeelding

recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178