Skip to content

Commit

Permalink
Update frontend_creating_custom_ui.markdown (home-assistant#3275)
Browse files Browse the repository at this point in the history
  • Loading branch information
andrey-git authored and fabaff committed Sep 1, 2017
1 parent 8f72d36 commit 5715c20
Showing 1 changed file with 10 additions and 5 deletions.
15 changes: 10 additions & 5 deletions source/developers/frontend_creating_custom_ui.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,27 @@ If you would like to use your own [State card](/developers/frontend_add_card/) w

Put the element source file and its dependencies in `www/custom_ui/` directory under your Home Assistant [configuration](/docs/configuration/) directory.

For example if creating a state card for the `light` domain named `my_custom_light_card` put `state-card-my_custom_light_card.html` in `www/custom_ui/`.
For example if creating a state card for the `light` domain named `my_custom_light_card` put `my_custom_light_card.html` in `www/custom_ui/`.

That file should implement `<state-card-my_custom_light_card>` tag with Polymer.
That file should implement `<my_custom_light_card>` tag with Polymer.

In `state-card-my_custom_light_card.html` you should use `<link rel="import">` to import all the dependencies **not** used by Home Assistant's UI.
In `my_custom_light_card.html` you should use `<link rel="import">` to import all the dependencies **not** used by Home Assistant's UI.
Do not import any dependencies used by the Home Assistant UI.
Importing those will work in `development: 1` mode, but will fail in production mode.

In the `customize:` section of the `configuration.yaml` file put `custom_ui_state_card: <element-name>`.
1) In the `customize:` section of the `configuration.yaml` file put `custom_ui_state_card: <element-name>`.
2) In the `frontend` section use `extra_html_url` to specify the URL to load.

For example:
```yaml
homeassistant:
customize:
- entity_id: light
light.bedroom:
custom_ui_state_card: my_custom_light_card

frontend:
extra_html_url:
- /local/custom_ui/my_custom_light_card.html
```
For more possibilities, see the [Custom UI section](/cookbook/#user-interface) on our Examples page.

0 comments on commit 5715c20

Please sign in to comment.