I have a master home screen running on an iPad panel (as shown below). This runs as a single panel card, with one huge glob of YAML code.
In an attempt to simplify, I have separate pages that I ‘navigate’ to if somebody taps on the light icon, or the entity status. (They all navigate to the same common ‘light control page’.) These individual pages (lights, doors, switches, etc.) give me granular control over individual or groups of lights.
As an alternative to navigating to and from the home page, I’ve been investigating the use of Browser_Mod popup pages instead, and so far, they work great. However, the code (below) shows the YAML for just a single entity. (Clearly, with multiple lights and doors, this gets very cumbersome, very quickly.) The problem is that I want the same popup to appear if someone taps either the “Lights” button OR the “Indoor Lights/Outdoor Lights” entities in the Overview section. Currently, I’d have to duplicate all the popup code for each of these, which would make the master code block almost unmanageable.
Question: Is there a way of modularizing the Browser_Mod popup code, so that I create a common popup page that can be invoked from multiple places in the master page? (Hopefully, that wasn’t a too confusing question.)
- type: custom:button-card
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights
content:
type: entities
entities:
- entity: light.living_room
type: simple-entity
tap_action:
action: call-service
service: light.toggle
data:
entity_id: light.living_room
hold_action:
action: more-info
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states('light.living_room') != 'off' %}
#FFBF00
{% else %}
white
{% endif %}
}
state_color: true