Ajouter un favicon personnalisé à vos Smartforms

Les K2 Smartforms offrent de nombreuses possibilités de personnalisation des interfaces utilisateurs grâce aux connecteurs, aux thèmes standards et personnalisés (je vous prépare d’ailleurs un article à ce sujet ), aux custom controls… Mais pour certaines personnalisations, il faut recourir à des techniques qui relèvent plus du hack. Nous avions notamment vu grâce à Pierre comment positionner des vues au dessus ou en dessous des onglets en jQuery.

Aujourd’hui aussi, nous allons parler jQuery, mais cette fois pour modifier les favicons de nos Smartforms (vous savez, les petites images que l’on retrouve à côté des titres des onglets ou des favoris de son navigateur) !

Entourés en rouge, les fameux favicons

Avoir un favicon personnalisé est un besoin courant lorsque l’on développe une application sur mesure et malheureusement il n’y a pas de propriété “Favicon” parmi celles d’un formulaire K2.

Pas de trace d’un champ “Favicon” dans les propriétés des formulaires

Pour beaucoup de modifications d’aspect de nos formulaires, faire appel à un thème CSS personnalisé suffit, mais pas dans le cas d’un favicon, qui n’est pas modifiable via une feuille de style. Il faut ici modifier directement la structure HTML de notre page web, et plus exactement le contenu de l’entête <head></head> de cette dernière pour y ajouter une balise <link /> référençant notre favicon. Pour ce faire, pas 36 solutions : il nous faut injecter du javascript dans notre formulaire, qui se chargera de cet ajout à l’entête de la page.

Voilà le script à utiliser :

<script>
    $('<link id="favicon" type="image/x-icon" rel="shortcut icon" href="[Lien vers votre fichier .ico]" />').appendTo('head');
</script>

Il faut évidemment remplacer dans le script ci-dessus l’attribut href par le lien vers votre fichier .ico. Deux points d’attention s’imposent ici :

  • Pour que le favicon s’affiche correctement sous tous les navigateurs, et particulièrement Internet Explorer, il faut que votre icône soit un vrai fichier .ico, et non pas un autre format d’image (jpeg, png, bmp…) dont l’extension de fichier aurait été changée en .ico sans conversion aucune.
  • Pour être certain que le fichier image soit visible pour votre smartform, le plus simple est encore de l’héberger sur votre Runtime Smartforms, dans le répertoire [Répertoire d'installation de votre K2]\K2 smartforms Runtime\Runtime\ ou dans un sous-répertoire existant ou que vous pouvez créer à cet effet.
Je dépose mon fichier .ico dans le Runtime de mon serveur K2 Smartforms

Une fois le fichier .ico déposé à l’emplacement souhaité, il suffit d’adapter le script jQuery fourni plus haut en fonction de la localisation et du nom du fichier. Dans mon cas, j’obtiens le script suivant :

<script>
    $('<link id="favicon" type="image/x-icon" rel="shortcut icon" href="/Runtime/Runtime/enk2besoinfavicon.ico" />').appendTo('head');
</script>

Je n’ai plus qu’à l’injecter dans un label ou data label avec l’option Literal cochée, présent directement sur mon formulaire ou dans une vue embarquée par mon formulaire (ma bannière par exemple).

Injection du script jQuery sur le formulaire

Et voilà le résultat :

Tada !

C’est tout pour cette fois, à la semaine prochaine !

Thomas

Chez K2 France depuis 2013, je ne suis pas magicien mais j'ai tout de même quelques tours dans mon sac en matière d'applications K2, dont je veux bien vous révéler les secrets ;-)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.