How to reuse yaml code in frontend configuration?

[maisun]

Dear all:

I have a huge yaml file over 8000 lines of code for front end (it’s floor plan with control of basically everything I have in HA). I’d like to reduce the maintenance pain in the future and would like to ask if there is an easy way to reuse as much code in frontend yaml as possible. For example I have below code for a thermostat on picture element card, basically I repeat almost the same code for my other 12 thermostats, the only difference is the position (top, left, entity and title). I read for card-mod it is possible to use class, but here it’s just plain yaml code, is there a way to “template” it and apply with small changes to all of the same state-labels for thermostats?

  - type: state-label
    entity: climate.bathroom_thermostat
    title: Bathroom Thermostat
    attribute: current_temperature
    suffix: °C
    style:
      top: 27%
      left: 32.5%
      border-radius: 20px
      text-align: center
      background-color: rgba(255, 255, 255, 0.1)
      backdrop-filter: blur(1px)
      opacity: 100%
      font-weight: bold
      font-size: 13px
    card_mod:
      style: |
        :host {
          color:
            {% if state_attr(config.entity, 'hvac_action') == 'heating' %}
              #ffc108;
            {% else %}
              #45729e;
            {% endif %}
        }
    tap_action:
      action: more-info
    double_tap_action:
      action: none
    hold_action:
      action: more-info

[maisun]

Ok I managed to find a way to do it with anchors:

anchors:
  label_style: &label_style
    border-radius: 20px
    text-align: center
    background-color: rgba(255, 255, 255, 0.1)
    backdrop-filter: blur(1px)
    opacity: 100%
    font-weight: bold
    font-size: 13px
  thermostat_label: &thermostat_label
    type: state-label
    attribute: current_temperature
    suffix: °C
    style: *label_style
    card_mod:
      style: |
        :host {
          color:
            {% if state_attr(config.entity, 'hvac_action') == 'heating' %}
              #ffc108;
            {% else %}
              #45729e;
            {% endif %}
        }
    tap_action:
      action: more-info
    double_tap_action:
      action: none
    hold_action:
      action: more-info

Now I have challenge with conditional element like below:

  - type: conditional
    conditions:
      - condition: state
        entity: binary_sensor.office_window
        state: "on"
    elements:
      - type: state-icon
        entity: binary_sensor.office_window
        title: Office Window
        style:
          top: 58.37%
          left: 14.73%
          border-radius: 50%
          text-align: center
          background-color: rgba(255, 255, 255, 0.1)
          backdrop-filter: blur(1px)
          opacity: 100%
        tap_action:
          action: more-info
        double_tap_action:
          action: none
        hold_action:
          action: more-info

Any suggestion?

[Ildar_Gabdullin]

As for reusing card-mod:
Main card mod thread - 1st post - link at the bottom - others - reusing a code

Now - some variants described there can be used for other places in frontend. So, that tutorial can give you a common idea which you may adapt for your needs.

[SJ20035]

Have a look at Lovelace: Decluttering Card - Share your Projects! / Dashboards & Frontend - Home Assistant Community

[WallyR (Wally)]

Lovelace_gen is the best way to do reuse code in this setup.

I have the same situation, al though only with 5 thermostats.
I have made a single template for a thermostat and then I have a lovelace file that looks like this to add 5 thermostats.

# lovelace_gen
title: Heating
path: heating
icon: mdi:radiator
layout:
  grid-template-columns: 25% 25% 25% 25%
badges: []
cards:
  - !include
    - template-heating.yaml
    - room: "Bedroom"
      sensors: ["w", "w", "w", "w"]
  - !include
    - template-heating.yaml
    - room: "Guest Room"
      sensors: ["w"]
  - !include
    - template-heating.yaml
    - room: "Kitchen"
      sensors: ["w"]
  - !include
    - template-heating.yaml
    - room: "Living Room"
      sensors: ["d", "w", "w"]
  - !include
    - template-heating.yaml
    - room: "Office"
      sensors: ["w"]

[maisun]

I just realised that once the anchors and alias saved by frontend it’s revert to the full content (I’m stupid not to take a backup of the files), that’s sad as I now lost 3 hours work on this
WTH the YAML is not preserved when it’s saved

[Ildar_Gabdullin]

Because this is not a yaml file, it is just a yaml presentation of json. Use a normal yaml config.

[maisun]

Hi thanks! I just didn’t realised that when I was working on it and I’m stupid not to save the working file with the anchors and alias - so all need to be done again.
I’m now thinking to switch to YAML mode but a bit concerned as UI editing is not possible, I have some simple views that make sense to edit in UI.
Does anybody know a good way to combine YAMLs with complex code and simple panels with UI (all in the same dashboard)?
Many thanks!

[maisun]

I read !include only works under yaml mode, I’m not sure if it’s a good idea for me to switch to yaml mode because for my rather complex dashboard there are certain things easier to manage with UI. Especially when I need to create new views for quick exploration UI mode comes handy. What’s your workflow?

[WallyR (Wally)]

It is YAML only.
I do not find it that hard to make a change and reload the dashboard.
Sometimes it fails to load and then I have to revert the changes or find the error to make it show again, but it is not that bad, I think.

There is no GUI though!

[maisun]

@WallyR

o not find it that hard to make a change and reload the dashboard.
Sometimes it fails to load and then I have to revert the changes or find the error to make it show again, but it is not that bad, I think.

There is no GUI though!

Thanks! I’m sort of running out of ideas:
I do like the YAML mode where everything in config folder is versioned with GIT, and it supports !includes and anchors. However I have some concerns:

1. Every time when YAML is changed I need to reload manually (it’s not like in storage mode just save and you see result instantly)
2. There is no migration path if HA ditches YAML mode in the future (just saying), all files organised with include and anchors need to be resolved before pasting into HA UI (not sure how to do that). I wish there is an easy way to quickly switch between storage and YAML modes.
3. I do appreciate UI mode for build simple stuff like tile cards bubble card etc, but I must admit I applied many card-mod styling after so when the structure is there I find myself working with YAML more and more

With storage mode it also gets tricky, today I have a manual workflow to copy yaml from UI editor to yaml file for version control, but just learned that anchors will all be lost during the translation…

[WallyR (Wally)]

1. that is not that hard.
   All the dashboards have a 3-dot menu in the upper right corner.
   

   
   
   The refresh option will reload it.

2. it is impossible to ditch YAML mode.
   It would severely limit the options for users, because every single combination of YAML will have to be made in GUI and that is pretty much impossible and just trying to get there will require a huge workforce, which is not likely to happen in the near or distant future.
   Of course there is the option to simply say to the user base that only the configuration the devs like are the ones that can be used, but then home assistant will be dead and a new HA will be forked from the GitHub repository. This is also highly unlikely. The devs like options and the GUI is more a necessity for the user base, than it is a wish from the devs.

3. I require a little change in the workflow, yes.
   It is however the only way to truly reuse code, because all the other solutions have the limitation that the keys can not really be templated, only the values.
   Lovelace_gen makes it possible to template the keys too.
   The first obstacles is to wrap your head around the two times YAML parsing.
   The first parsing will not know any values from the state machine. The second parsing, which is the normal one, will know it, so you need to keep that in mind at first.
   Once you get the concept, then it is no problem.

[maisun]

Thanks for your help! I’m now convinced to move to YAML mode for the main dashboard.
What I plan to do (please let me know if it makes sense):

1. Keep the main dashboard in YAML and use !include to separate pop-up views (those are based on bubble card pop-ups)
2. Those separated views can be used to paste into HA for testing purpose, so it doesn’t use !include, but may contain anchors
3. Create a test dashboard in storage mode.
4. Add everything in. config folder in my git repository
   So I’m trying to get the best from both world as much as possible.

Now the problem: I have just switched the main dashboard to YAML and copy paste my working dashboard to ui-lovelace.yaml. However it doesn’t load, only shows me a blank page. I then switch back to my old dashboard in storage mode, to my surprise all resources are gone! I tried to reinstall card-mod, button-card etc from HACS but doesn’t seem to get them back.
So now I have 2 broken dashboards which I have no idea how to fix…

[Ildar_Gabdullin]

I would suggest not to mix several questions in one thread. Or change the thread’s title))))

[maisun]

Hi @Ildar_Gabdullin :

Thanks I will repost another question about converting to YAML. Would appreciate if you can share your thoughts on the approach:

1. Keep the main dashboard in YAML and use !include to separate pop-up views (those are based on bubble card pop-ups)
2. Those separated views can be used to paste into HA for testing purpose, so it doesn’t use !include, but may contain anchors
3. Create a test dashboard in storage mode.
4. Add everything in. config folder in my git repository
   Many thanks!

[Ildar_Gabdullin]

Here you can find info about maintaining dashboard in yaml:

Lovelace: Decluttering Card

Assume this is your “dashboards” file: dashboards: lovelace-main: mode: yaml title: System icon: mdi:xxxxxxxxxxxx show_in_sidebar: true require_admin: false filename: lovelace/lovelace-system.yaml lovelace-climate: mode: yaml title: Climate icon: mdi:xxxxxxxxxxx show_in_sidebar: true require_admin: false filename: lovelace/lovelace-climate.yaml And these are your files for each dashboard: ### lovelace/lovelace-system.yaml views: - !incl…

Probably it will help you.
Inside any yaml file you can use everything method which was proposed earlier - secrets, include, anchors etc, and most advanced - Lovelace_gen (not to mention decluttering card which can be used to encapsulate a card).

[WallyR (Wally)]

AFAIK You can not mix storage mode and YAML only.
It is all or nothing,

[Ildar_Gabdullin]

What do you mean?
I have a few yaml dashboards and a few in storage mode.

[WallyR (Wally)]

Lovelace_gen require these three lines somewhere in your configuration.yaml.

lovelace_gen:
lovelace:
  mode: yaml

The mode key disables storage mode completely AFAIK.
Maybe there have been changes to this since I first started using it.
The last couple of years a lot have been changed in relation to dashboards, so I might be wrong now.

[Ildar_Gabdullin]

Cannot comment anything about lovelace_gen, never tried it. But try this:

dashboards:
  mode: storage
  lovelace-main:
    mode: yaml
    title: …
    …
  lovelace-climate:
    mode: yaml
    title: …
    …

AFAIK that “lovelace_gen:” keyword may be placed in any yaml file which you want to “generate”.

PS. It became so tricky to use a browser in iOS(((