[MODULE] Modification de la barre latérale

Suite à l’utilisation de HA avec plusieurs Utilisateurs, j’avais besoin de masquer des entrées de la barre latérale (sidebar) à certains utilisateurs.

Pour y arriver, j’utilise le module Villhellm/custom-sidebar.

Je l’ai installé via HACS (voir comment utiliser HACS dans cet excellent tuto HACS : Ajoutez des modules et des cartes personnalisées)

Puis, pour charger ce module, il est nécessaire d’ajouter au fichier configuration.yaml les lignes suivantes :

frontend:
  extra_module_url:
    - /hacsfiles/custom-sidebar/custom-sidebar.js

Ayant une structure par fichier « découpés » différentes (voir ma configuration sur github), j’ai ajouté ces lignes à mon fichier config/integrations/frontend.yaml qui sera chargé au démarrage de HA.

Ensuite, dans le répertoire config/www/, il faut ajouter un fichier sidebar-order.yaml qui contiendra la configuration de la barre latérale.

Voici le contenu de mon fichier sidebar-order.yaml

title: Bienvenue !
# order:
#   - item: Carte
#     hide: true
#   - item: map
#     hide: true
exceptions:
  - not_user: Admin
    base_order: true
    order:
      - item: Carte
        hide: true
      - item: map
        hide: true
      - item: Aperçu
        hide: true
      - item: overview
        hide: true
      - item: Historique
        hide: true
      - item: history
        hide: true
      - item: Journal
        hide: true
      - item: logbook
        hide: true
      - item: MDI Icon Index
        hide: true
      - item: Navigateur multimédia
        hide: true

Et les explications :

  • title permet de modifier le titre du menu latéral, dans mon cas « Bienvenue ! »
    image
  • exceptions permet de gérer des exceptions à l’affichage défini par défaut.
  • not_user me permet de filtrer l’exception pour les utilisateurs qui ne sont pas « Admin ». Ce qui doit être renseigné pour l’utilisateur est le Nom et pas le Nom d'utilisateur afficher dans Configuration > Utilisateurs.
  • order va contenir une liste d’item (les entrées du menu latéral)
  • item sera défini par le nom affiché dans le menu latéral. Pour éviter qu’un utilisateur puisse contourner le masquage des entrées, il faut aussi ajouter un item avec la traduction de l’entrée. exemple :
        - item: Carte # entrée dans le menu en FR
          hide: true
        - item: map # entrée dans le menu en EN
          hide: true
    
  • hide permet de masquer l’entrée dans le menu si ça valeur est défini à true.

D’autres options sont détaillées sur le repository de l’add-on Villhellm/custom-sidebar

2 « J'aime »

@Clemalex & @Ioull, suite à l’installation de l’add-on et avec la configuration détaillée plus bas, j’ai un beau message d’erreur :

logs d'erreur dans le Core
2020-12-28 09:12:20 WARNING (MainThread) [homeassistant.loader] You are using a custom integration for hacs which has not been tested by Home Assistant. This component might cause stability problems, be sure to disable it if you experience issues with Home Assistant.
2020-12-28 09:30:35 ERROR (MainThread) [custom_components.hacs] local variable 'backup' referenced before assignment
2020-12-28 09:30:36 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection] [3931358184] Error handling message: Unknown error
Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/components/websocket_api/decorators.py", line 18, in _handle_async_response
    await func(hass, connection, msg)
  File "/config/custom_components/hacs/api/hacs_repository_data.py", line 120, in hacs_repository_data
    await hacs.data.async_write()
  File "/config/custom_components/hacs/hacsbase/data.py", line 58, in async_write
    await async_save_to_store(self.hacs.hass, "repositories", self.content)
  File "/config/custom_components/hacs/helpers/functions/store.py", line 27, in async_save_to_store
    await get_store_for_key(hass, key).async_save(data)
  File "/usr/src/homeassistant/homeassistant/helpers/storage.py", line 151, in async_save
    await self._async_handle_write_data()
  File "/usr/src/homeassistant/homeassistant/helpers/storage.py", line 222, in _async_handle_write_data
    await self.hass.async_add_executor_job(
  File "/usr/local/lib/python3.8/concurrent/futures/thread.py", line 57, in run
    result = self.fn(*self.args, **self.kwargs)
  File "/usr/src/homeassistant/homeassistant/helpers/storage.py", line 234, in _write_data
    json_util.save_json(path, data, self._private, encoder=self._encoder)
  File "/usr/src/homeassistant/homeassistant/util/json.py", line 57, in save_json
    json_data = json.dumps(data, indent=4, cls=encoder)
  File "/usr/local/lib/python3.8/json/__init__.py", line 234, in dumps
    return cls(
  File "/usr/local/lib/python3.8/json/encoder.py", line 201, in encode
    chunks = list(chunks)
  File "/usr/local/lib/python3.8/json/encoder.py", line 431, in _iterencode
    yield from _iterencode_dict(o, _current_indent_level)
  File "/usr/local/lib/python3.8/json/encoder.py", line 405, in _iterencode_dict
    yield from chunks
  File "/usr/local/lib/python3.8/json/encoder.py", line 356, in _iterencode_dict
    for key, value in items:
RuntimeError: dictionary changed size during iteration

Ma configuration :

config/configuration.yaml
homeassistant:
  ...
  packages: !include_dir_named integrations
config/integrations/frontend.yaml
frontend:
  extra_module_url:
    - /hacsfiles/custom-sidebar/custom-sidebar.js
config/integrations/lovelace.yaml
lovelace:
  mode: yaml
  resources:
    ...
    - url: /hacsfiles/custom-sidebar/custom-sidebar.js
      type: module
    ...
config/www/sidebar-order.yaml
title: Hass
order:
  - item: map
    hide: true
  - item: logbook
    hide: true
  - item: history
    hide: true
exceptions:
  - user: admin
    base_order: true
    order:
      - item: map
        hide: false
      - item: developer tools
        hide: true

Si vous avez des idées … :thinking:

Je ne vois pas trop le rapport, la ca parle de backup et de data storage … Tu aurais pas touché quelque chose sur la sauvegarde ou le stockage des données ?

Chez moi ca marche nickel ! avec cette configuration (je te conseille d’ailleurs d’inverser la logique, à mettre l’exception pour tout ceux qui sont pas admin, ca t’evite de dupliquer les lignes, surtout si tu mets les traductions (necessaires pour que ca marche avec des utilisateurs en francais …) :

order:
exceptions:
  - not_user: admin
    base_order: true
    order:
      - item: multimédia
        hide: true
      - item: Carte
        hide: true
      - item: map
        hide: true
      - item: Aperçu
        hide: true
      - item: overview
        hide: true
      - item: Historique
        hide: true
      - item: history
        hide: true
      - item: Journal
        hide: true
      - item: logbook
        hide: true

Et moi je ne l’ai pas mis dans integration ! Seulement dans frontend ou plus exactement dans configuration.yaml car je n’ai pas (encore) découpé cette partie frontend de mon fichier de configuration !

frontend:
  extra_module_url:
    - /hacsfiles/custom-sidebar/custom-sidebar.js

D’ailleurs toi frontend a l’air d’être sous homeassistant moi c’est direct à la racine de mon yaml …

J’ai déplacé le code suivant à la « racine » le fichier configuration.yaml

frontend:
  extra_module_url:
    - /hacsfiles/custom-sidebar/custom-sidebar.js

C’est bon, je n’ai plus le message d’erreur mais la sidebar n’est pas modifié sur un autre compte lorsque je copie ton code du fichier sidebar-order.yaml

C’est bon (désolé on s’est croisé :grin:), c’était bien le déplacement du frontend qui posait problème.

J’ai juste mis ce code dans sidebar-order.yaml et ça ne cache pas la carte dans le menu

order:
exceptions:
  - not_user: admin
    base_order: true
    order:
      - item: Carte
        hide: true
      - item: map
        hide: true

Déplace le dans order: pour voir si déjà ça fonctionne ainsi…

Peux tu ajouter la notion de traduction dans le tutoriel avec un exemple comme ici.

Alors j’ai eu ce truc étrange aussi … mais j’ai pas creusé. Je me logue avec un utilisateur vinz … par contre pour que ca marche dans la config j’ai du mettre not_user: vincent … Je ne sais pas trop pourquoi, j’imagine que c’est au moment de la création de mon utilisateur …

Tu es sur que ton fichier de configuration est bien pris en compte ? Pour tester j’avais déclaré

title: HASS TEST

en début de fichier … Si c’est pas le cas, affiche la console js de ton navigateur pour voir si c’est bien chargé …

Edit : C’est bien le nom et pas le login qu’il faut mettre :
image
Dans mon cas Vincent et pas vinz

Avec ce fichier sidebar-order.yaml, je vois bien le titre changer après un F5 de la page mais l’entrée Carte est toujours visible sur les autres utilisateurs.

title: HASS
order:
exceptions:
  - not_user: Admin
    base_order: true
    order:
      - item: Carte
        hide: true
      - item: map
        hide: true

@Clemalex, j’ai déplacé dans order :

#
#
#
title: HASS
order:
  - item: Carte
    hide: true
  - item: map
    hide: true
# exceptions:
#   - not_user: Admin
#     base_order: true
#     order:
#       - item: Carte
#         hide: true
#       - item: map
#         hide: true

mais j’ai le même résultat. Peut-être une piste. Dans mon navigateur :

Le message d’erreur est clair :wink: Probleme d’indentation ligne 5 - item: map … tu as peutêtre une tabulation à la place des espaces ?

C’est chelou, sous VSCode pas de problème d’indentation et sous File Editor si …
J’ai modifié sous File Editor … Et ça marche bien, même sous HA companion sous android.
Nickel, reste plus qu’à organiser le tout pour que ça soit propre et expliquer tout ça dans le 1er post.
Merci @Clemalex & @Ioull :wave: :wave:

1 « J'aime »

Bonjour @Sylvain_G et @Ioull ,

Merci pour ces explications que j’ai essayé de suivre (je suis débutant).

J’ai bien installé HACS.

J’ai ensuite installé via HACS le module custom-sidebar

J’ai déposé une configuration de test

title: Bienvenue !
order:
  - item: map
    hide: false
  - item: carte
    hide: false
  - item: developer tools
    href: /developer-tools/state
  - item: overview
  - item: history
    bottom: true
  - item: logbook
    bottom: true
  - new_item: true
    item: Server Controls
    href: /config/server_control
    icon: "mdi:server"
    bottom: true

J’ai intégré un appel de ces fichiers dans mon fichier configuration.yaml

# UX
frontend:
#Themes
  themes: !include_dir_merge_named themes/
# Module HACS pour barre latérale
  extra_module_url:
    # - /hacsfiles/custom-sidebar/custom-sidebar.js
    - /config/www/community/custom-sidebar/custom-sidebar.js

J’ai redémarré HA.

J’obtiens alors bien le « Bienvenue ! » en titre de mon menu.

Mais aucune autre personnalisation n’apparait sur la barre !

Par exemple selon mon fichier sidebar-order.yaml mon logbook devbrait être en bas de ma sidebar.

Puis dès que je fais un clic gauche long sur le titre du menu puis « Done » le titre repasse sur « Home Assistant ».

Pouvez-vous svp m’aider ?

Salut,

il faut attendre la réponse des deux experts, mais j’ai comme l’impression que désormais cette fonction est native à HA

1 « J'aime »

@Pulpy-Luke , oui, elle est maintenant accessible via le bouton MODIFIER que tu as entouré.

@TuringFan , en cliquant sur l’icône de l’utilisateur connecté tout en bas du menu latéral (l’icône à gauche de Admin dans ma capture), tu verras la capture faite par @Pulpy-Luke . En cliquant sur le bouton MODIFIER entouré dans sa capture, tu accéderas alors à une liste des menus accessible que tu pourras réordonner à ta guise :


(tu devrais voir les titres des menus « bouger » si la modification est possible)
Tu pourras alors sélectionner un titre et le déplacer ou cliquer sur la croix à sa droite pour qu’il ne soit plus visible.
Ensuite tu cliques sur TERMINE en haut du menu pour sauvegarder.

Merci @Sylvain_G et @Pulpy-Luke,

Ca fait parfaitement le job !

En revanche il semblerait que cela soit remis à zero à chaque fois que je vide le cache de mon navigateur or je souhaiterais "imposer " cette configuration a certaines de mes users sur certains appareils : comment faire ?

Merci d’avance,

Pour information pour ajouter des menus j’ai essayé avec cela et ça fonctionne :

#Add this to your configuration.yaml
panel_custom:
  - name: server_control
    sidebar_title: Server Control
    sidebar_icon: mdi:cog-transfer
    js_url: /api/hassio/app/entrypoint.js
    url_path: "developer-tools/yaml"
    embed_iframe: true
    require_admin: true
    config:
      ingress: core_configurator

En revanche je ne sais pas vraiment à quoi correspond la js_url et comment en construire pour d’autre fenêtres. Quelqu’un peut il svp m’expliquer ?

Le seul moyen c’est d’ajouter des iframes

Mais bon, ça peut vite devenir compliqué quand on ajoute du https

C’est à dire ?

De mon côté j’accède à Home Assistant via un Reverse Proxy (entrée en https) hebergé sur un NAS du même LAN. Le iFrame est par défaut bloqué par mon NAS mais je dois pouvoir enlever cette option.