linked-lovelace-ui
linked-lovelace-ui copied to clipboard
Create cards that can be re-used, updated, and handle templated data.
Linked Lovelace UI by @daredoes
A pure JS client-side implementation of re-usable cards between Home Assistant Dashboards (excluding Overview).
In-Progress Documentation Site
Support
Hey you! Help me out for a couple of :beers: or a :coffee:!
Features
- Create cards in the Lovelace UI that can be linked to multiple dashboards
- Provide templating when creating linked cards using https://eta.js.org/
- Create dynamic partials from local templates, or online templates!
- Access Template Data with variable
contexte.g.<%= context.name %>
Installation
Add through HACS
Options
| Name | Type | Requirement | Description | Default |
|---|---|---|---|---|
| type | string | Required | While normally required, this will be replaced | |
| ll_template | string | Optional | ll_key name | `` |
| ll_context | object | Optional | An object that can be accessed inside of EtaJS as context |
`` |
| Name | Type | Requirement | Description | Default |
|---|---|---|---|---|
| type | string | Required | A normal Lovelace card type | |
| ll_key | string | Required | The name you want to use for this template | `` |
| ll_priority | number | Optional | Used in sorting the order that templates are added to the system for nesting. Lowest number comes first. | 0 |
| Name | Type | Requirement | Description | Default |
|---|---|---|---|---|
| type | string | Required | custom:linked-lovelace-partials |
|
| partials | list | Optional | A list of partials you want to use in Eta JS | `` |
A partial object has the following shape
| Name | Type | Requirement | Description | Default |
|---|---|---|---|---|
| key | string | Required | The name you want to use for this partial in Eta JS | |
| priority | number | Optional | Used in sorting the order that templates are added to the system for nesting. Lowest number comes first. | 0 |
| url | string | Optional | A url that will have a GET request made to it, and have its response body used as template. |
`` |
| template | string | Required | The content that will be used as the Eta JS. If url is given, it will be downloaded and replace this. |
`` |
Instructions (if you can call them that)
- Install Linked Lovelace 2.0
- Navigate to a user-created dashboard. (pretty much anything but Overview I think)
- Put the content from sample-dashboard.yml into your dashboard using the raw configuration editor. The result should look like

- Click "Update All" and it should now look like
Before -> After

- Reverse engineer it for your own needs, or file an issue, or join the discord to chat with me directly about it.
V1 to V2 conversion (or useful information)
-
You no longer need "Template Dashboards". Make any top-level card in a view on any user-created dashboard a template by adding
ll_key: template_nameto the config.- If you need to choose the order these templates are processed for nested templates you can use
ll_priority: 0. - The templates are sorted by lowest number first, so if you want to use
templateAintemplateB,templateBshould havell_priority: 1to be rendered aftertemplateAhas been added to our collection of available templates.
- If you need to choose the order these templates are processed for nested templates you can use
-
template_dataorll_datamust now be set toll_context -
templatemust now be set toll_template -
ll_keysmostly works still. two tests involving overriding context failed if someone wants to fix them. I'm considering removing this feature entirely. -
To convert an old template data variable,
$example$, just swap the first$to<%=and the second$to%>, and retrieve the variable fromcontext.- example:
<%= context.example %>
- example:
-
file an issue if I forgot something plz UwU
