Linked Lovelace by @daredoes
A Javascript/Websocket way to do templating in the Lovelace UI
Support
Hey you! Help me out for a couple of
Features
- Create cards in the Lovelace UI that can be linked to multiple dashboards
- Provide basic templating when creating linked cards
Installation
Add through HACS
Options
| Name | Type | Requirement | Description | Default |
|---|---|---|---|---|
| type | string | Required | custom:linked-lovelace-ui |
|
| name | string | Optional | Card name | `` |
Templates
Creating a template dashboard
The first thing needed when creating a template card is a dashboard to hold these templates.
Create a dashboard inside of Hassio at http://YOUR_INSTANCE.local:8123/config/lovelace/dashboards
For our example, we'll create a Templates dashboard with the path lovelace-templates. The settings here don't really matter, it only matters that we have a dashboard.
-
On the
Templatesdashboard, click the⋮to access a menu, and clickEdit Dashboard.
-
Once again, click the
⋮to access another menu, and clickRaw configuration editor.
-
Add
template: trueto the top of the configuration file
That's it! Any view in this dashboard that has exactly one card in it will now be converted into a template.
Remember, the path of each view in the dashboard will be the name of the template.
What is a template?
A template is a 'view' that contains exactly one 'card'. The 'path' of the view determines the 'key' we use to identify the template in other cards.
What can be in a template?
So, amateur hour here, a template can be any valid card, where any term surrounded by the $ character can be used as a key for replacement.
How does data make it into the template to be replaced? template_data duh?
Need an example? Okay!
First, we'll create a view called Version Card with the path version-card.
Next, we'll make a card that has a version in the bottom-right corner. Create a new card, and throw this YAML into it.
type: custom:mushroom-template-card
primary: ''
secondary: $version$
icon: ''
badge_icon: ''
badge_color: ''
fill_container: false
layout: horizontal
multiline_secondary: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card.type-custom-mushroom-template-card {
background-color: rgba(0,0,0,0);
text-align: right;
padding-top: 0px;
margin-top: -26px;
z-index: 0;
}
Now, let's use that version-card in something! How about another template!?
First, we'll create a view called Update Button with the path update-button.
Next, we'll make a card that contains a vertical stack, with the button and our version as the two elements in the stack.
Here's the YAML
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:linked-lovelace-ui
- type: custom:mushroom-template-card
template_data:
version: v0.0.1
template: version-card
Wait, that doesn't look like a very useful card. Maybe it'll be more useful once we render it. Save the card, and then click it! You may be prompted to refresh the page, if not, refresh anyways since the changes won't appear until we do.
Click edit, and look that that filled in YAML.
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:linked-lovelace-ui
- type: custom:mushroom-template-card
primary: ''
secondary: v0.0.1
icon: ''
badge_icon: ''
badge_color: ''
fill_container: false
layout: horizontal
multiline_secondary: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card.type-custom-mushroom-template-card {
background-color: rgba(0,0,0,0);
text-align: right;
padding-top: 0px;
margin-top: -26px;
z-index: 0;
}
template_data:
version: v0.0.1
template: version-card
The main takeaway here is where template_data, version, and $version$ are used.
Card Using Template
template: version-card
template_data:
version: v0.0.1
Card Using Template Data
type: custom:mushroom-template-card
secondary: $version$
The config also is populated in the card editor with the template data for a card when a valid name is put in the text field
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
15.5k Jan 1, 2023
8 Sep 4, 2022
2 Sep 12, 2022
56 Dec 26, 2022
4 Dec 16, 2022
9 Oct 5, 2022
16 Dec 15, 2022
5 Apr 12, 2022
3 Nov 19, 2022
165 Dec 31, 2022
1 Jan 22, 2022
12 Aug 12, 2022
55 Oct 21, 2022
9 Dec 28, 2022
10 Apr 26, 2022