daredoes / linked-lovelace-ui

Create cards that can be re-used, updated, and handle templated data.
MIT License
29 stars 3 forks source link
home-assistant homeassistant javascript lovelace-ui typescript

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

GitHub Release License hacs_badge

Project Maintenance GitHub Activity

Support

Hey you! Help me out for a couple of :beers: or a :coffee:!

coffee


Features


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)

  1. Install Linked Lovelace 2.0
  2. Navigate to a user-created dashboard. (pretty much anything but Overview I think)
  3. Put the content from sample-dashboard.yml into your dashboard using the raw configuration editor. The result should look like V2 Before Dashboard
  4. Click "Update All" and it should now look like V2 After Dashboard Before -> After Linked Lovelace V2 Demo
  5. 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)