Load content into grid

[N0nick]

Hello

I know you can load content in html with a target tag to a Iframe.
Can you do the same with a grid?
I would like to stay in 1 dashboard but load my content like my curtains, lamps etc in the content grid when push the button in the left menu bar.

Now i need to copy my code 5 times because the header, menu and footer are all the same for all sections.
Is only the content grid that change

Thx

[paddy0174 (Patrick)]

Give this card a try, it can do exactly what you want. And much more, eg. you can animate the transformation from different content cards. It’s really cool.

state-switch - conditional card on steroids

Ever wanted a lovelace card that’s only shown for certain users? Ever wanted to show a certain lovelace card in one spot if the door is open, and another one otherwise? Ever wanted to be able to swap out a part of your layout when you press a button? Ever wanted to do that only on one device, and not on all of them at once? Ever wanted to show different cards depending on the size of your window, or on wheter you’re viewing it on a touch enabled device or not? [image] [image] State-sw…

[N0nick]

Hello Patrick

Thx this looks exactly what i looking for.
But… i’m very new to HA and try to figure out how this works but i struggle with it.
From the example they start with 1 entity dropdown that has 3 states.
So based on the state that is selected the grid show the correspondent entity’s
But how can i make this works with separate buttons like i have?

[paddy0174 (Patrick)]

It sounds complicated, but once you get the idea, it will work quite nicely.

In theory you have to do a few things:

• setup an input_select with a name for each view you want to display in the grid. In your case “lichten”, “rolluiken” and so on.
• Then in your dashboard set a state-switch-card as the only card in your content area
• Fill the state-switch-card with other cards (=your content)
• set a tap_action to your button and change the menu entry of the input_select to the content area

Like this:

# this is the input_select
input_select:
  frontend_grid_content:
    name: Frontend Grid Content
    options:
      - lichten
      - rolluiken
      - ...
    initial: lichten

# this is the card for your content area
- type: custom:state-switch
  view_layout:
    grid-area: <your_content_area_name_here>
  entity: input_select.frontend_grid_content
  default: lichten
  transition: slide-down
  transition_time: 600
  states:
    lichten:
      type: ... # refer to the state-switch-card documentation, this is where your content goes
    rolluiken:
      type: ...

# this is the tap_action for your button
tap_action:
  action: call-service
  service: input_select.select_option
  target:
    entity_id: input_select.frontend_grid_content
  data:
    option: lichten # chnage to the specific name eg. rolluiken

Whenever you now change the input_select to a new value, the grid content changes.

[N0nick]

Thx for your support but i think i still miss something.

In my configuration.yaml i add this code

# Example configuration.yaml entry
input_select:
  frontend_grid_content:
    name: Frontend Grid Content
    options:
      - home
      - lichten
      - rolluiken
    initial: home

In my menu with my buttons on the left is add this code

type: grid
cards:
  - type: vertical-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          target:
            entity_id: input_select.frontend_grid_content
          data:
            option: home
        name: Home
        icon: mdi:home
        show_state: true
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          target:
            entity_id: input_select.frontend_grid_content
          data:
            option: lichten
        name: Lichten
        icon: mdi:lightbulb-multiple
        show_state: true
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          target:
            entity_id: input_select.frontend_grid_content
          data:
            option: rolluiken
        name: Rolluiken
        icon: mdi:window-shutter
        show_state: true
columns: 1
view_layout:
  grid-area: menu

In my target grid (content) i add this code

type: custom:state-switch
entity: input_select.frontend_grid_content
default: home
transition: slide-down
transition_time: 600
states:
  home:
    type: horizontal-stack
    cards:
      - type: custom:weather-card
        entity: weather.forecast_thuis
        number_of_forecasts: '5'
        name: Thuis
      - type: alarm-panel
        states:
          - arm_home
          - arm_away
        entity: alarm_control_panel.home_alarm
      - type: media-control
        entity: media_player.nest_mini
    name: Home
  rolluiken:
    square: false
    type: grid
    cards:
      - type: custom:shutter-card
        entities:
          - entity: cover.rolluik_vooraan
            name: Rolluik Voorraam
            buttons_position: left
            title_position: bottom
      - type: custom:shutter-card
        entities:
          - entity: cover.rolluik_zijraam
            name: Rolluik Zij
            buttons_position: left
            title_position: bottom
      - type: custom:shutter-card
        entities:
          - entity: cover.rolluik_achteraan
            name: Rolluik Achter
            buttons_position: left
            title_position: bottom
      - type: custom:shutter-card
        entities:
          - entity: cover.rolluik_slaapkamer
            name: Rolluik Slaapkamer
            buttons_position: left
            title_position: bottom
      - type: custom:shutter-card
        entities:
          - entity: cover.rolluik_dressing
            name: Rolluik Dressing
            buttons_position: left
            title_position: bottom
  view_layout:
    grid-area: content

Do i missed something ?
I only see my home grid but when i hit the “rolluiken” buttons nothing happend

Grts

[N0nick]

for everyone that have the same problem
The first thing i asked my customers:
did you already reboot?

That fixed my problem.
@paddy0174 thx for the help.
Now trying to understand your solution so i can write it myself

[paddy0174 (Patrick)]

Great it’s working. Sorry, I missed the restart step, as I falsely assume people just do that (despite me not doing it always myself )

But for what I can see, you’re doing great, and if you have further questions, just let me know.

[N0nick]

just 1 more question
is it possible to return home after x amount of time?
I did not find this on the state switch homepage.

Thx