nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

Ajouter un logo sur la page de login Alfresco

drisschelouati

Bonjour,

ma demande est simple, je souhaiterais ajouter un logo en bas à droite de la page de login d'Alfresco. Est-ce possible? Si oui, comment devrais-je m'y prendre?

Merci de m'indiquer la marche à suivre, sachant que j'ai des connaissances techniques limitées.

Merci d'avance!

Find more posts tagged with

Comments

ycoulon

Bonjour,

As-tu jeter un oeil à la documentation suivante : http://docs.alfresco.com/5.0/tasks/dev-extensions-share-tutorials-override-login-page.html ?

En regardant le webscript share login.get.html.ftl, j'ai trouvé un markup nommé footer. Tu vas pouvoir à l'aide d'une extension share venir rajouter des éléments après ce markup.
Pour plus d'informations sur les share extension, il y a cette page : http://docs.alfresco.com/5.0/concepts/dev-extensions-share-template-markup.html

Yann

drisschelouati

Bonsoir,

merci beaucoup pour ta réponse. Oui j'ai déja vu ton premier lien, et j'ai bien compris qu'il permet d'override la page de login de base d'Alfresco. Toutefois, comment est ce que je dois build le projet? avec Maven en utilisant quel archetype, repo, share ou les deux?

Une fois la nouvelle page créée et implémentée, comment effectuer les modifications souhaitées? faut-il agir sur le code source html (plus simple mais peut etre moins propre) ou directement sur le css?

Quant au webscript login.get.ftl, quel est sa fonction exacte? j'ai bien repéré le @markup footer, mais je ne sois pas comment agir dessus, très probablement par manque de connaissances… Pourrais tu me conseiller des lectures à ce sujet?

Merci!

ycoulon

Bonjour,
Pour agir sur les markups tu vas devoir créer un projet AMP (par exemple avec l'archetype AMP de Maven).

Pour agir sur le markup, tu peux te référer à cette page : http://docs.alfresco.com/5.0/tasks/dev-extensions-share-tutorials-customizing-widget-instantiation.html en zappant la partie relaative au Javascript.

Pour résumer :
* Crée un projet maven avec l'archetype AMP
* Configure le projet pour cible l'application Share (réglage des propriétés du projet via le pom.xml)
* Créer un fichier monnomdemodule-share-extension.xml dans le dossier src/main/amp/config/alfresco/module/${artifactId}/site-data/extensions (certains dossier ne sont pas créer nativement il faudra les créer avant)
* Renseigne le fichier comme ceci :

<module>
   <id>Login page</id>
   <description>Customize login page</description>
   <customizations>
      <customization>
         <targetPackageRoot>org.alfresco.components.guest
         </targetPackageRoot>
         <sourcePackageRoot>tutorials.customization.guest</sourcePackageRoot>
      </customization>
   </customizations>
</module>‍‍‍‍‍‍‍‍‍‍‍

* Crée un fichier login.get.html.ftl dans le dossier src/main/amp/config/alfresco/module/${artifactId}/site-webscripts/tutorials.customization.guest (crée les dossier non présent)
* Renseigne le fichier comme suit :

<@markup id="custom-login-footer" target="footer" action="after">
 Mets ICI le code HTML que tu souhaites rajouter.
</@markup>
‍‍‍‍‍

Tu peux maintenant compiler et dééployer ton amp sur ton war Share.
Vérifie que l'extension est bien déployé à l'aide de l'adresse : http://localhost:8080/share/page/modules/deploy

PS : Cet example est basé sur la page cité au début du post et n'a pas été tester, il y a peut être quelque coquille.

Yann

drisschelouati

Salut Yann,

je pense a peu près avoir compris la démarche, que j'essaierai de mettre en oeuvre ce soir en rentrant chez moi. Je te tiendrai au courant pour te faire savoir si j'ai réussi. Seulement, avant de commencer, une dernière question persiste, est ce que le code d'override de la page (CF:http://docs.alfresco.com/5.0/tasks/dev-extensions-share-tutorials-override-login-page.html) doit faire partie du même AMP que la démarche projet d'extension de share que tu m'as présenté ensuite? ou alors les fichiers d'override doivent-ils être "dropés" dans les bons dossiers et redémarrer tomcat pour que les changements soient pris en compte?

En tout cas, merci de ton investissement sur cette question, je suis toujours gêné d'ennuyer des utilisateurs avancés car je ne suis pas toujours au niveau.

Bien à toi

Driss

ycoulon

Salut,

Pour ma part je placerais le tout dans un même AMP. Techniquement je pense que la seule contrainte est que les fichiers soit au bon endroit :
* Dans un dossier site-data/extension pour la déclaration du module d'extension share (cela peut être directement dans le dossier classes/alfresco/extension/site-data/extension ou dans des paths relatif à un AMP cf mon post précédent).
* Pour le fichier login.get.html.ftl, le nom de package indiqué dans la share extension est important. En gros ton fichier login.get.html.ftl doit se trouver dans des dossiers nommé tutorials.customization.guest (dans le cadre de mon dernier post). A nouveau la position de cette arborescence peut être lié à un AMP (cf post ci-dessus) ou non classes/alfresco/extension/site-webscripts

Yann

drisschelouati

Ok, c'est parfait, ton post à le mérite d'être très clair, tout insérer dans un Maven archetype Share (Target Amp to war) et compiler le projet après avoir inséré les customisations.

Je t'embête une dernière fois, j'aime bien aussi consulter toute la config de base avant de me lancer dans une customisation, comme je l'avais fait pour les modèles de données et les workflows(models-spring beans-share form config-process definitions etc…). Du coup, pourrais tu me donner les noms des fichiers qui contrôlent la page de login native de share, histoire que je puisse m'en inspirer et en assimiler complètement la logique?

ycoulon

Bonjour

Regarde dans le dossier WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\guest de ton war Share.

Yann

unknown-user

MR drisschelouati , s'il vous plait , vous pouvez nous dire si ca a marché pour vous ? J'ai suivi les memes demarches decrites dans le tutoriel mais rien ne change pour ma part !

drisschelouati

Vraiment, je ne m'en sors pas, après avoir suivi le tutoriel et avoir build l'amp, je me retrouve avec une page contenant simplement les deux champs du login et rien d'autre ( aucun style, cadre, logo etc…). De plus, le login ne fonctionne pas et réinitialise la page. Je suppose qu'il faut ajouter des fichiers dans le projet tels que login.get.html.ftl (d'autres en plus?), mais à quel endroit (dans quel sous-dossier). Je souhaiterais également ajouter une image background : est ce que je dois déclarer un div dans login.get.html.ftl ou dans tutorials-login.ftl? comment appeler la bonne image de bg et dans quel dossier la placer…

Malgré ton aide très utile Yann, je reste perdu…. pourquoi est-ce devenu si compliqué dans la version 5?

ycoulon

Bonjour,

Mon exemple se base principalement sur les version 4.2 que j'utilise le plus souvent jusque maintenant. J'essai de te faire un retour sur tes questions le plus rapidement possible.

drisschelouati

Bonjour,

merci de ta réponse Yann.

Je pense qu'il serait intéressant de développer une approche qui soit rigoureuse sur le plan méthodologique, afin qu'elle puisse être utile à d'autres personnes qui rencontreraient le même problème.

Selon moi, il faudrait dans un premier temps que je puisse "cloner" (c.a.d reproduire à l'identique) le code de la page de login par défaut de share. Il serait alors beaucoup plus simple, une fois la structure de base assimilée, d'y apporter des modifications, puisque l'on connaît le rôle de chaque fichier et de chaque élément de configuration.

Il me semble que les fichiers suivants sont liés à la page native de login:

alfresco/tomcat/webapps/share/WEB-INF/classes/alfresco/site-data/page-types/login.xml

alfresco/tomcat/webapps/share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/guest/login.get.desc.xml

/opt/alfresco/tomcat/webapps/share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/guest/login.get.html.ftl

alfresco/tomcat/webapps/share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/guest/login.get.js

alfresco/tomcat/webapps/share/components/guest/login.js

alfresco/tomcat/webapps/share/components/guest/login.css

Le tutoriel de création de page de login (http://docs.alfresco.com/5.0/tasks/dev-extensions-share-tutorials-override-login-page.html)
propose de créer les fichiers suivantz:

share-config-custom.xml

tutorials-login.xml

tutorials-login.xml (bis)

tutorials-login.ftl

En partant du projet créé à partir de ce tutoriel, il faudrait pouvoir reproduire la page initiale en incluant le code des fichiers natifs (login.get.html.ftl, le js, le css etc..), et en les plaçant au bon endroit dans l'archetype Share. A ce moment là, il deviendrait facile de customizer à volonté la page de login de share puisque nous disposerions d'un template identique à l'original.

ycoulon

Salut,

Il y a deux façon d'agir sur la page de login. L'utilisation des markups freemarker, il s'agit de la méthode décrite dans mon post précédent et il y'a également la méthode qui consiste à créer une nouvelle page de login (le tutoriel présent sur le site docs.alfresco.com)

Concernant la méthode que je t'ai exposé dans précédent, tu trouveras ici : https://github.com/yann361/login-customization un exemple de projet qui reprend ces modifications. L'emplacement de certains fichiers diffère par rapport à ce que j'ai écrit dans mon autre post.
Le fichier login.get.html.ftl situé dans le dossier src/main/amp/config/web-extension/site-webscripts/tutorials/customization/guest te permettra de récupérer le code de la page native et le modifier à ta guise en prenant soin de modifier la déclaration des markup pour remplacer ceux d'origine. Tu disposes d'un exemple dans le fichier présent sur github appliqué au markup footer.

Concernant le tutorial indiqué sur la documentation alfresco, la reprise du contenu du fichier login.get.html.ftl natif (alfresco/site-webscripts/org/alfresco/components/guest) ne fonctionnera pas tel quel. Ce tutoriel permet de réécrire entièrement la page, il te faut donc prend en compte les fichiers CSS nécessaire au rendu ainsi que le javascript nécessaire à la page de login. Si tu suis cette méthode, il te faudra également faire attention à l'adresse à laquelle ton formulaire envoie les informations de connection.

Yann

drisschelouati

Super, je m'y mets de suite!