Home » Blog » How To Create a USER-specific Dashboard in Home Assistant!

How To Create a USER-specific Dashboard in Home Assistant!

Do you want to create user-specific dashboards in Home Assistant so that every person in your house only has access to those devices that are important to them? And did you know that you only need one dashboard for that? Yes, this can be done with only one dashboard! Let’s do this!


โญโญโญ NOTE: โญโญโญ

This article accompanies a YouTube video. I wrote it for people who would rather read than watch a video. To keep doing this, I want to ask you to check out the video, leave a comment under the video, give the video a thumbs up, and subscribe to my YouTube channel. This means that the video is offered more often to new visitors so that they also stay informed of the latest Home Assistant tutorials.

Thank you for your support!

Ed

Click here to watch the video

Introduction

After I created this video on how to create the perfect dashboard layout, some of you asked me if I could explain how you can create user-specific dashboards. That was a great suggestion, so I will explain in this video how you can do this.

I will show the following in this video:

  • Make sure that users only see the views in a dashboard that they have access to.
  • Create a home view on the dashboard that contains a navigation button to my office that is only visible to me and not to others in my home.
  • Add a navigation button to the Laundry Room that is only visible to parents and not to children.

After I’ve shown you these three use cases, you can easily create your own dashboard that automatically hides and shows entities for each user.

But, before we start, make sure to smash the thumbs-up button for this video and subscribe to my channel. This way you make it possible for me to keep creating these videos for you.

Assign a Dashboard for Users or Administrators

First of all, you can create multiple dashboards and create a separate dashboard for each user, but that’s an awful lot of work to maintain. It’s much easier to maintain just one dashboard that automatically shows and hides the entities based on what user views the dashboard. The downside is that you need to use a little bit of YAML code for it, but it’s really not that hard once you understand how to do it.

One of the things you can do is that you have the option to create dashboards for administrators and for users. When you create a new dashboard, you can indicate if it’s a dashboard for administrators or for everyone. You can do that by going to Settings, Dashboards, and clicking on Add Dashboard. There you see the option Admin only that can be used to create a dashboard for users who are administrators in Home Assistant. We’re not going to do that in this tutorial. We will create one dashboard that can be used by all users, but that will only show those entities that are relevant for each user. So, give this dashboard a name, don’t click Admin only and click create.

Create views in your user-specific dashboard

We’ve just created a new dashboard. Now click on the three dots in the right upper corner and click Edit Dashboard. Click start with an empty dashboard and click Take Control. Our new dashboard is now empty and we only have a Home view. Now, to create an easy vertical layout, I make use of the custom layout card. I created this video about the layout card that explains in detail how that card works, so check that video out if you like to know more about it. Don’t worry if you do not have the layout card installed. The tutorial will work without it too. Just omit to set the view type in the rest of this tutorial. But I’m going to set this view to vertical by clicking on the pencil next to Home and selecting Vertical (layout-card) in the View type dropdown. Click Save.

Create 4 other views

Now I’m going to create 4 other views for each room in the house. In this tutorial, I will add views for the Living room, the room of my son Daan, the Office, and the Laundry room. All users may see the Living room and my Son’s room. The office will only be visible to me and the laundry room will only be visible to my girlfriend and me. Click on the Plus sign next to Home to create a new view. Give this view the name Living room, and choose the view type vertical (layout-card).

Now go to the tab named visibility. In this tab, you can select who may see this view on the dashboard. Everybody may see this view, so make sure that all users are selected here. Click Save. Now click on the Plus sign again and give this view the name of your kid, and choose the view type vertical (layout-card). Everybody may see this view, so all users are selected in the visibility tab.

So, we now have three views, namely Home, Living room, and Daan that are visible to all users. The next view is named Office and may only be visible to me. Click on the Plus sign again, give this view the name Office and select Vertical layout. Now go to the Visibility tab and only select your name so that this view is only visible to you. Click save. And finally, add the Laundry Room view by clicking on the Plus sign again. Give it the name Laundry Room, choose the vertical layout and go to the Visibility tab. Now only select the parents in the house. In my case, that’s Ed and Ariette. (And Smart Home Junkie as well ;))

Test the views

So, let’s test if this works. If I open the dashboard I see all the views because I have access to all of them. If I open an incognito browser window and log in using my son’s username, I will only see the Home, Living room, and Daan’s view because he does not have access to the Office and the Laundry room. Well, to be honest, he doesn’t see the links to those rooms here, but if he knows the URL, he will still be able to open the view. You can sort of fix this by using kiosk mode. See this video on how to set up kiosk mode in Home Assistant. I just want to point out that it’s not totally secure, but at least users see only those rooms that are relevant to them.

Set up the Home view

Now let’s add some navigation buttons to the Home view so that users can navigate to all the views they have access to.

Let’s add a date and time first. Click Add Card and select a Markdown card. Paste the following code in the content field. You can type the code from the screen, but you can also download the code via the download link in the description below. It will save you time and frustration plus you sponsor me and help to make sure that I can keep creating these videos for you. Now click save.

Let’s add a welcome message too. This welcome message addresses the user that is logged in. I will retrieve the username using a template and show it on the screen. This is the first step in determining who is viewing the dashboard. We will use the same code later to determine what cards the user will see on his dashboard. Click Add Card and select the markdown card once again. Now add the following code to the content field.

What you see here is that I retrieve the name of the user using the {{user}} code. I also check what hour it is and show Evening, Afternoon. or Morning based on that time. So, we can retrieve the username using the code {{user}}. Click save.

Add navigation buttons to your user-specific dashboard

Next, I am going to add a card for each room in the house.

I use Mushroom cards to show information because they look a lot nicer than the default Home Assistant cards and they offer more flexibility. You can install the Mushroom Cards with HACS. If you want to know how to install HACS, please watch this easy-to-follow video on how to do that. When you installed HACS, you can search for Mushroom in HACS and you’ll be fine.

I will use Mushroom template cards for the navigation buttons because I can show a lot of information on one card using these and it allows me to use them as navigation buttons.

  • Click Add Card.
  • Select the Grid Card.
  • At columns enter 2. You can choose to Render the cards as squares if you wish.
  • At search cards, select the Mushroom Template Card.
  • Depending on your setup the values might be different for your house, but I am going to make use of the entities in my house.
  • At Entity I select the livingroom Light entity
  • The icon is mdi:sofa
  • I will change the icon color based on the value of the lights using a template. If you want to know more about how templates work then please watch this video for that. After watching this video you’ll understand better how templates and custom sensors work.
  • Add the following code in the Icon color field.
  • Enter the name of the room in the Primary Information field. In my case, that’s Living room.
  • Then, in the secondary information, I show the temperature in that room using a template.
  • For layout, I select Vertical layout.
  • And in the Tap action, I select Navigate.
  • The navigation path is the view URL of the living room view which is “living-room”.
  • In the Double Tap action field, I select Toggle, so that I can toggle the lights in the living room by clicking twice on this button.
  • Click Save

Add Navigation cards for the other rooms

I’ve created one button now for the living room. If I click the button, it navigates to the living room and if I double-click the button, the lights turn on and off. Let’s quickly add three more cards for the other rooms.

I need your help!

You will be doing me a huge favor if you subscribe to my channel if you haven’t already. And, you will help me a lot if you also give this video a thumbs up and leave a comment. This way, YouTube will present this video to new people, making the channel grow! In the video description, you will also find information about how you can sponsor me so that I can continue to make these tutorials for you.

Thank you!

The buttons for the living room, my son’s room, the office, and the laundry room are now created as well and I filled the views of them with cards now too so that you see a little bit more info. I will create a video in the near future about how I created my tablet dashboard to explain more about all the elements that you see on my dashboard. Make sure you subscribe to my channel and tick the notification bell so that you won’t miss that video.

Test the navigation cards in our user-specific dashboard

Now, let’s test this. When I log in with my own account, I have access to all cards and views on my dashboard, so I see all of them and I can navigate to all of them too. Now, let’s login using the account of my son. You’ll see that he does not see the views in the top menu, but that he still has access to the buttons and when he clicks on them, the corresponding view is also shown. That’s not what we want!

We have to take one more step to make sure that he does not see the buttons on the Home view that lead to views that he may not see. For this, we need a HACS integration which is called the state-switch card. With the state switch card, we can show and hide entities on our dashboard based on the username or user role of a user.

Use the state-switch card

  • To install the state switch card, go to HACS.
  • Go to Frontend.
  • Click Explore and download repositories.
  • Search for state-switch.
  • Click on state-switch.
  • Click Download.
  • Click Download again.
  • Click Reload.
  • Make sure you refresh your browser cache!
Edit the office navigation card

Now that the state switch card is installed we can start using it in our dashboard. The office card may only be visible to me, so I’m going to make sure that I am the only one that will see that card.

  • Go to the Home view.
  • Click on the three dots in the right upper corner.
  • Click Edit Dashboard.
  • Click Edit on the grid card that holds our Navigation buttons.
  • Now select the Office card.
  • Click on Show Code Editor.
  • We are going to alter the code like so:
  • First I am going to add a new type: custom:state-switch.
  • Then I’m setting the entity for the state-switch card to: user.
  • And then I am going to declare the states. If you use the entity: user then each state is a username. In this case, I only have one state which is my name.
  • So, below states, I will add my name: Ed:. Make sure you get the indentation right otherwise it won’t work.
  • The code of the card is shown below my name. Select this code and press the TAB key twice to indent the code twice.
  • Click Save.
Test the Office navigation card

Now let’s test this! When I log in with my own account, I see the office navigation card because I granted myself access with the state-switch card. When I log in using my son’s account, the office navigation card is not shown! That’s great and exactly what we want!

Oh, and if you’d like to know more about how I created this tabbed interface on the office view, then watch this tutorial video so that you can set it up yourself too. The links to all videos that I mentioned can be found in the description of this video below.

Edit the laundry room navigation card

Okay, let’s do this for a group of people too. Unfortunately, I cannot create a parent user group that shows if someone is a parent or not, but I can use another option of the state switch card which is called template. Let’s use that for the laundry room navigation button.

  • Go back to the Home view
  • Click on the three dots in the right upper corner.
  • Click Edit Dashboard.
  • Click Edit on the grid card that holds our Navigation buttons.
  • Now select the Laundry Room card.
  • Click on Show Code Editor.
  • We are going to alter the code like so:
  • I am going to add the type: custom:state-switch.
  • Then I’m setting the entity for the state-switch card to: template.
  • And then I am going to declare the states. If you use the entity: template, then each state is the outcome of a template. In this case, I will use a template that filters the parents only.
  • The template code looks like this. It checks if the user is either my girlfriend or me. If so, it returns the state true, else it returns the state false.
  • So, below states I will add the state: ‘true’:. Make sure you get the indentation right otherwise it won’t work.
  • The code of the card is shown below this state. Select this code and press the TAB key twice to indent the code twice.
  • Click Save.
Test the laundry room navigation card

Now let’s test this too! When I log in with my own account, I see the laundry room navigation card because I granted myself and my girlfriend access with the state-switch card. When I log in using my son’s account, the laundry room navigation card is not shown! Now my dashboard works great!

Conclusion

You can use this mechanism too to hide entities on pages that you do not want some users to see. I think you can do that yourself now using the info that I’ve given in this tutorial. If you have ideas for tutorials then please let me know in the comments what your ideas are and I will consider creating a tutorial about it. You can also join my Discord server to discuss topics about Home Assistant. And again, you can download the code that I’ve used in the description below.

These awesome people who sponsor me made it possible to create this Home Assistant tutorial for you. I cannot keep doing this without your help. Please consider sponsoring me too if these tutorials are valuable for you. You can support me through Patreon, Ko-Fi, or by joining my channel. The links are in the description below. And please do not forget to give this video a thumbs up, subscribe to my channel, and hit the notification bell!

I will see you soon.

Bye Bye.


,

Back to all articles