Anpassa gränssnitt för att skapa korrespondens customize-create-correspondence-ui

Ökning overview

Med Correspondence Management kan ni ommärka sin lösningsmall för att få ett bättre varumärkesvärde och följa företagets varumärkesstandarder. När du ändrar användargränssnittet innebär det att du ändrar organisationslogotypen, som visas i det övre vänstra hörnet av användargränssnittet Create Correspondence.

Du kan ändra logotypen i användargränssnittet Create Correspondence med din organisations logotyp.

Den anpassade ikonen i gränssnittet Skapa korrespondens

Den anpassade ikonen i gränssnittet Skapa korrespondens

Ändra logotypen i användargränssnittet för Create Correspondence changing-the-logo-in-the-create-correspondence-ui

Så här ställer du in en logotypbild:

  1. Skapa lämplig mappstruktur i CRX.

  2. Ladda upp den nya logotypfilen i mappen som du har skapat i CRX.

  3. Konfigurera CSS på CRX för att hänvisa till den nya logotypen.

  4. Rensa webbläsarhistoriken och uppdatera gränssnittet Skapa korrespondens.

Skapar den mappstruktur som krävs creatingfolderstructure

Skapa mappstrukturen som beskrivs nedan för värdtjänster för den anpassade logotypbilden och formatmallen. Den nya mappstrukturen med rotmappen /apps liknar strukturen i mappen /libs.

Om du vill anpassa något skapar du en parallell mappstruktur, enligt beskrivningen nedan, i grenen /apps.

The /apps gren (mappstruktur):

  • Säkerställer att dina filer är säkra om det finns en uppdatering av systemet. Om det finns en uppgradering, ett funktionspaket eller en snabbkorrigering /libs grenen uppdateras och om du är värd för dina ändringar i /libs de skrivs över.
  • Gör att det inte stör det aktuella systemet/den aktuella grenen, som du kan ta bort av misstag om du använder standardplatserna för lagring av anpassade filer.
  • Hjälper dina resurser att få högre prioritet när AEM söker efter resurser. AEM har konfigurerats för att söka i /apps förgrena först och sedan /libs för att hitta en resurs. Den här mekanismen innebär att systemet använder övertäckningen (och de anpassningar som definieras där).

Följ de här stegen för att skapa den nödvändiga mappstrukturen i /apps gren:

  1. Gå till https://'[server]:[port]'/[ContextPath]/crx/de och logga in som administratör.

  2. Skapa en mapp med namnet i appmappen css med en sökväg/struktur som liknar css-mappen (i ccrui-mappen).

    Steg för att skapa css-mappen:

    1. Högerklicka på css mapp på följande sökväg och välj Överläggsnod: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css

      Överläggsnod

    2. Kontrollera att dialogrutan Overlay Node har följande värden:

      Sökväg: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css

      Plats för övertäckning: /apps/

      Matcha nodtyper: Markerad

      Sökväg till överläggsnod

      note note
      NOTE
      Ändra inte /libs gren. Alla ändringar du gör kan gå förlorade eftersom den här grenen kan ändras när du:
      code language-none
      * Uppgradera till din instans
      * Använd en snabbkorrigering
      * Installera ett funktionspaket
      
    3. Klicka OK. CSS-mappen skapas i den angivna sökvägen.

  3. Skapa en mapp med namnet i appmappen imgs med en bana/struktur som liknar imgs i crui-mappen.

    1. Högerklicka på imgs mapp på följande sökväg och välj Överläggsnod: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs

    2. Kontrollera att dialogrutan Overlay Node har följande värden:

      Sökväg: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs

      Plats för övertäckning: /apps/

      Matcha nodtyper: Markerad

    3. Klicka OK.

      note note
      NOTE
      Du kan också skapa mappstrukturen i mappen /apps manuellt.
  4. Klicka Spara alla för att spara ändringarna på servern.

Överför din anpassade logotypfil till CRX. Standardreglerna för HTML styr återgivningen av logotypen. De bildfilsformat som stöds är beroende på vilken webbläsare du använder för att få åtkomst till AEM Forms. Alla webbläsare har stöd för JPEG, GIF och PNG. Mer information finns i den webbläsarspecifika dokumentationen om de bildformat som stöds.

  • Standardmåtten för logotypbilden är 48 px * 48 px. Se till att bilden liknar den här storleken eller är större än 48 px * 48 px.
  • Om höjden på logotypbilden är större än 50 px skalas bilden ned i användargränssnittet Create Correspondence till en maximal höjd på 50 px eftersom det är höjden på sidhuvudet. När du skalar ned bilden behåller användargränssnittet Skapa korrespondens bildens proportioner.
  • Gränssnittet Skapa korrespondens skalar inte upp bilden om den är liten, så se till att du använder en logotypbild som är minst 48 px hög och tillräckligt bred för att bilden ska bli tydlig.

Följ de här stegen för att överföra den anpassade logotypfilen till CRX:

  1. Gå till https://'[server]:[port]'/[contextpath]/crx/de. Logga in som administratör om det behövs.

  2. Högerklicka på imgs mapp på följande sökväg och välj Skapa > Skapa fil:

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

    Skapa ny nod i mappen imgs

  3. I dialogrutan Skapa fil anger du namnet på filen som CustomLogo.png (eller namnet på logotypfilen).

    CustomLogo.png som ny nod

  4. Klicka Spara alla.

    Under den nya filen som du har skapat (här CustomLogo.png) visas egenskapen jcr:content.

  5. Klicka på jcr:innehåll i mappstrukturen.

    jcr:innehållets egenskaper visas.

    jcrcontentproperties

  6. Dubbelklicka på jcr:data -egenskap.

    Dialogrutan Redigera jcr:data visas.

    Klicka nu på mappen newlogo.png, dubbelklicka på jcr:content (dim option) och ange typen nt:resource. Om den inte finns skapar du en egenskap med namnet jcr:content.

  7. I dialogrutan Redigera jcr:data klickar du på Bläddra och välj den bildfil som du vill använda som logotyp (här CustomLogo.png).

    De bildfilsformat som stöds är beroende på vilken webbläsare du använder för att få åtkomst till AEM Forms. Alla webbläsare har stöd för JPEG, GIF och PNG. Mer information finns i den webbläsarspecifika dokumentationen om de bildformat som stöds.

    Exempel på anpassad logotypfil

    Exempel: CustomLogo.png som ska användas som anpassad logotyp

  8. Klicka Spara alla.

Skapa CSS för återgivning av logotypen med användargränssnittet createcss

Den anpassade logotypbilden kräver en extra formatmall för att kunna läsas in i innehållskontexten.

Följ de här stegen för att skapa formatmallen för återgivning av logotypen med användargränssnittet:

  1. Gå till https://'[server]:[port]'/[contextpath]/crx/de. Logga in som administratör om det behövs.

  2. Skapa en fil med namnet customcss.css (du kan inte använda ett annat filnamn) på följande plats:

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

    Steg för att skapa filen customcss.css:

    1. Högerklicka på css mapp och markera Skapa > Skapa fil.

    2. I dialogrutan Ny fil anger du CSS-namnet som customcss.css(du kan inte använda ett annat filnamn) och klicka på OK.

    3. Lägg till följande kod i den nyligen skapade CSS-filen. I content:url i koden anger du bildnamnet som du har överfört till imgs-mappen i CRXDE.

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

Uppdatera användargränssnittet Create Correspondence så att du kan se den anpassade logotypen refreshccrui

Rensa webbläsarcachen och öppna sedan instansen Create Correspondence UI i webbläsaren så att du kan se din anpassade logotyp.

Skapa korrespondensgränssnitt med egen logotyp

Den anpassade ikonen i gränssnittet Skapa korrespondens

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