Show Menu
SUJETS×

Personnaliser l'interface de création de correspondance

Présentation

Correspondence Management vous permet d’adapter le modèle de solution à l’identité graphique de votre société afin de conserver la valorisation de votre marque. Le changement d'identité graphique de l'interface utilisateur comprend la modification du logo de la société, qui est affiché dans le coin supérieur gauche de l'interface utilisateur de création de correspondance.
Vous pouvez changer le logo dans l'interface utilisateur de création de correspondance pour le remplacer par le logo de votre entreprise.
Icône personnalisée dans la Figure Interface utilisateur de création de correspondance : L’icône personnalisée dans l’interface utilisateur de création de correspondance

Modification du logo dans l'interface utilisateur de création de correspondance

Pour configurer une image de logo de votre choix, procédez comme suit :
  1. Create the appropriate folder structure in CRX .
  2. Téléchargez le nouveau fichier de logo dans le dossier que vous avez créé dans CRX.
  3. Configurez le fichier CSS sur CRX pour faire référence au nouveau logo.
  4. Clear the browser history and refresh the Create Correspondence UI .

Création de la structure de dossiers requise

Créez la structure de dossiers, comme expliqué ci-après, pour héberger l'image de logo et la feuille de style personnalisées. La nouvelle structure de dossiers avec le dossier racine /apps est similaire à la structure de dossier /libs.
Pour une personnalisation, créez une structure de dossiers parallèle, comme expliqué ci-après, dans la branche /apps.
La branche /apps (structure de dossiers) :
  • Garantit que vos fichiers sont sûrs en cas de mise à jour du système. En cas de mise à niveau, de feature pack ou de correctif, la branche /libs est mise à jour et si vous hébergez vos modifications dans la branche /libs, elles sont remplacées.
  • Vous aide à ne pas toucher au système/à la branche actuels, que vous pouvez ébranler par erreur si vous utilisez les emplacements par défaut pour enregistrer les fichiers personnalisés.
  • Aide vos ressources pour obtenir une priorité plus élevée si AEM recherche des ressources. AEM est configuré pour rechercher d’abord la branche /apps, puis la branche /libs pour trouver une ressource. Ce mécanisme signifie que le système utilise votre recouvrement (et les personnalisations qui y sont définies).
Suivez les étapes ci-dessous pour créer la structure de dossiers requise dans la branche /apps :
  1. Go to https://[server]:[port]/[ContextPath]/crx/de and login as Administrator.
  2. Dans le dossier des applications, créez un dossier nommé css dont le chemin d'accès/la structure est similaire au dossier css (situé dans le dossier ccrui).
    Procédure de création du dossier css :
    1. Right-click the css folder at the following path and select Overlay Node : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
    2. Assurez-vous que la boîte de dialogue du nœud de recouvrement possède les valeurs suivantes :
      ​Chemin : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
      ​Emplacement de l’incrustation : /apps/
      ​Faire correspondre les types de noeud : Coché
      N'apportez pas de modifications dans la branche /libs. Toutes les modifications que vous apportez risquent d’être perdues, car cette branche est exposée aux modifications chaque fois que vous :
      • Effectuez une mise à niveau sur votre instance
      • Appliquez un correctif
      • Configurez un feature pack
    3. Cliquez sur OK . Le dossier CSS est créé au niveau du chemin d'accès indiqué.
  3. In the apps folder, create a folder named imgs with path/structure similar to the imgs folder (located in ccrui folder).
    1. Right-click the imgs folder at the following path and select Overlay Node : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
    2. Assurez-vous que la boîte de dialogue du nœud de recouvrement possède les valeurs suivantes :
      ​Chemin : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
      ​Emplacement de l’incrustation : /apps/
      ​Faire correspondre les types de noeud : Coché
    3. Cliquez sur OK .
      Vous pouvez également créer la structure de dossiers dans le dossier /apps manuellement.
  4. Cliquez sur Enregistrer tout pour enregistrer les modifications sur le serveur.

Créer le CSS pour intégrer le logo à l'interface utilisateur

L'image de logo nécessite une feuille de style supplémentaire à charger dans le contexte du contenu.
Effectuez les étapes suivantes pour définir la feuille de style pour le rendu du logo :
  1. Aller à https://[server]:[port]/[contextpath]/crx/de . Le cas échéant, connectez-vous en tant qu’administrateur.
  2. Créez un fichier nommé customcss.css (vous ne pouvez pas utiliser un autre nom de fichier) à l’emplacement suivant :
    /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/
    Procédure à suivre pour créer le fichier customcss.css :
    1. Faites un clic droit sur le dossier css et sélectionnez Créer > Créer un fichier .
    2. In the New File dialog, specify the name of the CSS as customcss.css (you cannot use a different filename), and click OK .
    3. Ajoutez le code suivant dans le fichier CSS que vous venez de créer. Dans la partie content:url du code, indiquez le nom de l'image que vous avez téléchargée dans le dossier imgs dans CRXDE.
      .logo, .logo:after {
      content:url("../imgs/CustomLogo.png");
      }
      
      
    4. Cliquez sur Enregistrer tout .

Actualiser l'interface utilisateur de création de correspondance pour voir le logo personnalisé

Effacez la mémoire cache du navigateur, puis ouvrez l'instance de l'interface utilisateur de création de correspondance dans votre navigateur. Vous devez voir votre logo personnalisé.
Créer une interface utilisateur de correspondance avec un logo ​personnalisé Figure : L’icône personnalisée dans l’interface utilisateur de création de correspondance