Comment ajouter des éléments dans la barre de menu du haut  ?

Usage du fichier de ressource custom/menu/customblock.html

La barre de menu du haut offre un large espace vide après le bouton Nouvelle fiche. Cet espace vide peut être personnalisé de la façon suivante :

via l’interface Gestion des ressources disponibles dans l’administration, ouvrir le fichier custom/menu/customblock.html
ce fichier est vide, son contenu est inséré dans un bloc <div class="menu-CustomBlock" id="menu_custom"></div> en étant traité comme un gabarit JsRender (avec notamment la possibilité d’indiquer une clé de traduction) ; tout ajout de ce fichier apparaitra donc dans l’espace vide
il est suggéré de structurer ce fichier avec deux <div></div> qui seront placés l’un au dessus de l’autre comme les autres éléments de la barre de menu
l’identifiant "menu_custom" et la classe "menu-CustomBlock" n’ont aucun style CSS par défaut ; elles permettent de « styler » facilement cet élément et son contenu

L’exemple ci-dessous introduit deux nouveaux élements dans la barre de menu : un champ de recherche qui déclenche une recherche dans le contenu de toutes les fiches et un lien vers un tableau de bord (sous la forme d’une mini-application).

Exemple de personnalisation

​x
 
<div>
  <form action="selection" method="GET" target="List">
        <input type="hidden" name="cmd" value="SelectionChange">
        <input type="hidden" name="page" value="main:fiches">
        <input type="hidden" name="sorttype" value="titre">
        <input type="hidden" name="corpus_all" value="1">
        <input type="hidden" name="fieldcondition_scope" value="fiche">
        <input type="hidden" name="redacteurs_all" value="1">
        <input type="text" value="" class="selectform-Input" name="fieldcondition" placeholder="Recherche directe">
      <button class="global-button-Standard action-Selection" type="submit"><span class="global-button-Icon"></span></button>
  </form>
</div>
​
<div>
    <a href="app-tableaudebord" class="global-button-Link action-TableExports" target="_blank">
        <span class="global-button-Icon"></span><span class="global-button-Text">Tableau de bord</span>
    </a>
</div>

L’exemple précédent est constitué de HTML pur mais rappelons qu’il s’agit d’un gabarit traité par JsRender. L’objet passé à ce gabarit contient notamment les informations sur l’utilisateur.

Extrait de l’objet passé au gabarit

xxxxxxxxxx
 
{
bdfUser: {
      sphere: "",
      login: "",
      name: "",
      lang: "",
      locale: "",
      admin: false
    }
}

Dans l’exemple suivant, la langue du lien est déduite de {{: bdfUser.lang}}. À noter également l’utilisation de l’attribut @style dans <span class="global-button-Icon"> pour indiquer l’icone à utiliser pour le bouton.

xxxxxxxxxx
 
<div>
    <a href="https://desmodo.citego.org/atlascomplet_{{: bdfUser.lang}}" class="global-button-Link" target="_blank">
        <span class="global-button-Icon" style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH0ggFEQYfUjrPQwAAAQVJREFUeJylks2NgzAQhT8iCqCEdGCXklLSAd4KNh1ACenAdMB0kBz3Fjp4ezAQBxmk1T6LA/bMvB8N/BOVJP2to4KspQbw3u/WDzZw47b+BwAD7vOFJDnnVIJzTq1aRcX3ZWpJGKU6Z8uVmNnMGOjpy/JstrBt2mJi2rW4DjjKoaHBMDxZzcKVe27VFrMYNapT95lBlzI4LQNDyrco98y5bMPDKW+6cOHKlUDgyfPDQkPzHpLPWqQ/9FglR0V9zycq6jWfTl2y0El6pdpKkgJhtZDDMAYGet/vBrwqOMLRotVU1cz9tc/iXMqssGg1EmZwsAbrY2nR6vRQHmCWvi37guln4hdZ9is3n/dOmQAAAABJRU5ErkJggg==')"></span>
        <span class="global-button-Text">Saisie dans l'atlas</span>
    </a>
</div>