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. Överför den nya logotypfilen i den mapp du har skapat i CRX.

  3. Konfigurera CSS på CRX för att referera till den nya logotypen.

  4. Rensa webbläsarhistoriken och uppdatera användargränssnittet för 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.

/apps-grenen (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 uppdateras grenen /libs och om du är värd för dina ändringar i grenen /libs skrivs de ö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 igenom grenen /apps först och sedan grenen /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 grenen /apps:

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

  2. I appmappen skapar du en mapp med namnet 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å mappen css 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: Markerade

      Sökväg till överläggsnod

      note note
      NOTE
      Ändra inte grenen /libs. 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 på OK. CSS-mappen skapas i den angivna sökvägen.

  3. I appmappen skapar du en mapp med namnet imgs med en sökväg/struktur som liknar mappen imgs (i ccrui-mappen).

    1. Högerklicka på mappen imgs 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: Markerade

    3. Klicka på OK.

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

Ladda upp 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.

Så här överför du den anpassade logotypfilen till CRX:

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

  2. I CRXDE högerklickar du på mappen imgs på följande sökväg och väljer Skapa > Skapa fil:

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

    Skapa ny nod i imgs-mappen

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

    CustomLogo.png som ny nod

  4. Klicka på 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å egenskapen jcr:data .

    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äljer 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 på 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å mappen css och välj Skapa > Skapa fil.

    2. I dialogrutan Ny fil anger du CSS-filens namn som customcss.css (du kan inte använda ett annat filnamn) och klickar 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 på 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 korrespondensanvändargränssnitt med anpassad logotyp

Den anpassade ikonen i gränssnittet Skapa korrespondens

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