Add entity-first card picker for dashboard

[piitaya]

Proposed change

Adds a new "By entity" tab to the add-card dialog. You pick an entity first, and the dialog shows card options that fit that entity.

• Entity tree on the left: floor, area, device, entity. An "Unassigned" section groups entities and helpers without an area.
• Search the tree to get a flat list of results, same look as ha-entity-picker.
• Suggestions on the right based on the picked entity:
  • Tile cards with common feature combos per domain (light brightness, cover position, media playback, etc.).
  • Trend graph tile for numeric sensors.
  • Calendar and to-do list cards for those domains.
  • "Browse all cards" tile if you want something else.
• Mobile uses two screens. First the tree, then the suggestions with a row that shows the selected entity and a button to go back.
• The "By card" tab still works the same way.

Screenshots

Entity picker

Suggestions

Search mode

Mobile view (entity picker)

Mobile view (suggestions)

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Additional information

• This PR fixes or closes issue: fixes Entity-First distribution + Suggested configurations #51849
• This PR is related to issue or discussion:
• Link to documentation pull request:
• Link to developer documentation pull request:
• Link to backend pull request:

Checklist

• I understand the code I am submitting and can explain how it works.
• The code change is tested and works locally.
• There is no commented out code in this PR.
• I have followed the perfect PR recommendations
• Any generated code has been carefully reviewed for correctness and compliance with project standards.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

To help with the load of incoming pull requests:

• I have reviewed two other open pull requests in this repository.

[MindFreeze]

Maybe we can suggest a few entities on the initial screen so it's not empty. The newest primary entities would make sense because presumably after adding a device to HA you want to add it to a dashboard

[piitaya]

@MindFreeze Yeah we are discussing about how the empty screen looks like but it's hard to know which one to display.

[BBE-FR]

That is a very simple, yet good improvement for the discovery of features by newcomers !

They were suggestions in the roadmap to suggest other functionality to allow wider functionality discovery (mode vertical, mode inline of the feature). Are they discarded or may be implemented later on ?

Otherwise, this current proposal 100% fit my own need: all my cards are "horizontal" and it proposes to discover all features allowing a very quick choice of the right tile !

Will the same mechanism be adapted to the device page "add to dashboard" buttons ?

[piitaya]

This PR is more about providing the architecture of these suggestions. For now it's only tile card with compatible features but it can of course be extended in the future.
However, I'm not sure vertical fits here. If there is too much suggestions, user can be lost.

And sure, it we can use the logic in different places.

[mbb365]

@piitaya here is the suggested workflow for selecting. (in the purple box)

https://www.figma.com/design/xurRwpZBycqAjMDocJODJ3/Suggested-cards---dashboards?node-id=274-232&t=xBKULMKFaSZQYQtW-1

• Have moved the action to be purely in the 'side' bar
• The key idea is to keep the search in the context of the entity. Not having a 'global' positioned search which immediately takes you out of context.
• Imagine this as a hybrid of the automations file system and the current 'by entity' pattern.
• Included the button for 'Show new entities' as Petar suggested on the first screen as an example, there would need to be rules around this... time since added etc. @laupalombi what do you think of that idea?

I really like the pattern of the 'What do you want to control?'. It makes a lot of sense, and is a direction I would like to go. Although, having this question and the tabs above doesn't quite match.

To keep that same idea, but tweak it a little, I suggest the pattern in the yellow boxes (in the figma above) to start with. Although this totally adds complexity.

[mbo18]

Nice! May solve this WTH if it suggests all compatible cards.

"What do you want to control?" should be "What do you want to control or display?" Thinking about temperature sensors for example

[laupalombi]

@mbb365 I was seeing both versions, and one thought came to mind. In terms of how the UX is laid out,

• @piitaya version promotes single-entity cards
• your version promotes multiple-entity cards

My concern is that research shows that cards with multiple entities are less typical than single ones, plus people get lost with the concept of checkbox if they don't understand why they wanted several on the first place. The purple path makes sense if multiple is the way to go, but we cannot repeat the pattern we have currently with checkboxes and a "save/select" button, since we know people get lost. I would be OK if there is some UX tool (an explanation, something) that allowed everyone to understand why they can select multiple, and the action after selecting one is immediate.

As for search + filter - yeah I believe that's the way to go - start typing and show me the results filtered in the same screen.

I also love the pattern of "what do you want to control".
As for being empty - I do like the solution from Matt design of not showing an extra screen - we can have the search by entity with some CTAs

(please take a minute to enjoy my terrific design skills)

[BBE-FR]

Although, having this question and the tabs above doesn't quite match.

I personaly do not agree, I believes this is an easy discovery of the tabs, tabs being also a way to navigate between use cases after selection if needed.

• You land there, and can directly add an entity directly without selecting a tab => brilliant
• the proposition does not fit (I wanted another card) => i use the tab to go to "by cards"
• I clicked on "browse all cards by mistake => I can comme back thanks to tabs.

I really like the proposed interface by @piitaya with the tabs and the buttons within the initial question "What do you want to display or control ?" it is self explanatory like this.

• tabs :

- question & buttons (to allow an easy discovery of the tabs ):

Moreover, using the "+add entity" button, instead of a selection tree, feels very natural for me, and self explicit as i can have one (with several tiles features proposed) or several entities (and less choices, but can remove an entity to get back the full choice)

Maybe the various flow you all discuss could be addressed by the tabs and the buttons, adding new ones for other flows :

• current @piitaya design is mostly promoting single cards with feature discovery => 2 tabs: by entity / by cards (even if capable of multiple selection)
• in the future other answers and thus other tabs could be added to promote different flow or different targets:
  • "add multiple entities at once" => another suggestion in first page, another tab => promote sections with simple tiles + entities card (no issue to understand you can add multiple selection, it is embeded in the tab name)
  • "add an area" => another suggestion in first page, another tab => promote area card (various layout, similarly as what is done for tiles and features) + sections with simple tiles + entities card
  • "add a device" => another suggestion in first page, another tab => promote device card (when avail with various layouts) + sections with simple tiles + entities card
  • "add a label" => another suggestion in first page, another tab => promote label card (if avail one day) + sections with simple tiles + entities card
  • "add your favorite card" => could allow customisation, thinking out loud there....

[wendevlin]

Hello hello,

I wanna join the conversation, because the provided solutions seems a bit too complex to me 🙂

IMO the most common flow is: pick entity -> pick card

What about a multi step flow solution instead of a big dialog? Then we have enough space to display all cards and on mobile it's also easier to use the same as on desktop.

• First. Home tree where I can pick my entity or use the search
  • "+" maybe some recently added entities (that are not on the current dashboard)
  • "+" a button to switch to "select card first" mode
• Second. (when I have selected an entity) show available cards
  • "+" give the option to select another entity
    • I would give the select more entities option in the 2. step because IMO it's not the common use case. this can be done with a simple entity picker or we reopen the 1. view again

I think we stick too hard on what is already there.

👋

[BBE-FR]

IMO the most common flow is: pick entity -> pick card

To add an "entity related" card, it depends the way your brain works, and it depends if "what" is proposed fits you or not.

But this is not true for not "entity related" cards:

• shortcut card (the brand new one)
• heading card
• map
• markdown
• area card (but could be addressed depending how the "entity" selector is done)
• picture cards
• grouping cards (grid/vertical/horizontal, even if not that useful in sections...)
• many custom cards

IMHO The solution designed should also address this, and not only for user that "know" the card they want.
There should also be a way to make newcommer discover the cards above (or at least a subset of them, shortcut, heading, area, map for ex...) => that is the reason I like the 2 tabs approach, even if very close to the today solution.

[mbb365]

To me, this YELLOW boxed flow hits on the simplist natural form. https://www.figma.com/design/xurRwpZBycqAjMDocJODJ3/Suggested-cards---dashboards?node-id=327-814&t=xBKULMKFaSZQYQtW-1

I have the different 'add multiple entities' ideas tried out above this one.

[BBE-FR]

The only difference with Paul's proposal is the lack of the first screen with the question.

I think that this first screen is an additional step that make sense for a newcommer to discover that there are 2 ways to add cards:

• by entity
• by cards

If the two tabs interface was sufficient for that, why to bother to change the order, and not only propose more suggested card to the current good flow existing (devils advocate there...), why favor the by entity stream which is just one clic away ?

On the other hand for a user that already know the two tabs, he can directly start adding entities from there (the +add entity button is there) and jump to your yellow flow above or select the by card tab (by tab or button) => no real burden.

For me this intermediate screen is:

• no "pain" for me (as already knowing user) as it do not add more clic than the simple re-ordering of the tabs (only add one clic if i do not want the suggested cards to select the by_card tab compared to today => low risk of storm from experienced user)
• improved discoverability for new user on the various way to add cards.

Currently many people do not know they can add tile cards by entity, I personaly discovered it during a youtube video from Jlo and Paul, not through the interface despite the fact I use it regularly...

The redundancy make sense for discoverability.
Simplicity is not always good for discoverability.

What is the aim of this PR ? renew the UI for simplicity or improve discoverability ?

[laupalombi]

As far as I know from my UX experience, you don't need redundancy for getting discoverability, specially if its in a top bar. And from what I've seen in interviews, no one really struggled with discovering the tabs - it was more they expected the first tab to get them everything they needed.

On the contrary, putting people facing a choice with no context of what that means (What is "add entity" if I cannot know yet?) adds confusion, I've seen it in multiple studies including this one (most people verbalized "what is an entity" before starting to click around).

I still believe with those UX principles we should go with @mbb365 version here.

But @piitaya eager to get your thoughts too since you are implementing it

[piitaya]

Here's a new proposal based on suggestions :

• Sidebar always visible on desktop with a "What do you want to add?" title
• More compact entity list
• Content area shows an empty state prompting to add an entity when none is selected
• "Can't find the card you want?" footer with a browse-all-cards button below the suggestions grid when entities are picked.

[laupalombi]

OK @piitaya - I like this flow, its a good start.

I would still love to see if we could get some kind of checkboxes for multiple entities + search bar to filter them - maybe later, or inside the "add entity" dialog - but the flow seems correct.

[BBE-FR]

Self explanatory and very good first step for me.
Redundancy still there improving the discoverability of the two tabs.

I like it.

For the concern that people might not know entity at that stage I let Laura comment.

But as a first step it is good from my user / forum helper perspective !

[piitaya]

@laupalombi so basically the same as this previous "by entity" but in the sidebar?

It may work on desktop but it may be hard to know what you selected once your start searching. Also, it will not work on mobile, we may need a multiple step flow on mobile.

[BBE-FR]

side question.

When you propose a tile section (multiple entities selected) do you plan to add a heading card like "new section" or "new cards", or not ?

Thinking of heading card discovery and liking the way it is done in the setting / device view when pushing "+add to dashboard"...

(Maybe this idea is to be kept only if you can select an area or a device, where you could put area name or device name in heading card...)

[laupalombi]

UGH you are right @piitaya , mobile is the big issue. Yes, that was my thinking, but I wouldn't want to sacrifice mobile - @mbb365 any solution, or else we should go with Paul's proposal for now

[laupalombi]

@BBE-FR yes card title-section is another topic I want to open, but one at a time - I want to keep this scoped into suggested cards so we can ship it and move on to the next thing.

[BBE-FR]

@BBE-FR yes card title-section is another topic I want to open, but one at a time - I want to keep this scoped into suggested cards so we can ship it and move on to the next thing.

Fully agree.

The selection way is for me another topic.

Today when you create a new section, it comes with a heading card saying "new section", maybe that is enough for this discovery.

If tomorrow the selection above allow to select an area or a device instead of an entity, I will expect it could come in the suggested part directly as a section with the related heading + tiles or as a single entities card with a related title.

The today proposal is for me a huge step forward for feature discovery !

[piitaya]

@BBE-FR I agree, for now it's entity focus but we could allow selecting area or device and suggest a section based on that (using the same target picker as automation)

[BBE-FR]

As a potential future improvement Yes !

But today step, is already very powerful IMHO...

[BBE-FR]

I am still seing many user using custom card instead of heading...

But this is a totally different subject...

[laupalombi]

Let's keep this PR just for the current implementation please 🙏 suggested cards by entity

[wendevlin]

1. Height issue:

2. Selecting a card, takes a while. We should add some kind of transition here. I click and some time nothing happens. Moreover (I had it once) after add a card it opened the more info dialog 🤷

3. search: keyboard navigation, this can be done at a later stage, but it should behave like the entity picker to be able to just use up/down arrows to select.

4. Personal opinion: It should be Tile - Brightness, Tile - Toggle instead of Tile (brightness), Tile (toggle)

5. Floors

   • Unassigned areas are missing if the last floor is emtpy
   • if there are just unassigned areas it shouldn't be a "floor" just show areas as root
   • if there is just one floor (also with a second unassigned areas), please auto expand the tree there.

6. keyboard focus: when click on an entity it should focus the right panel

[home-assistant]

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.

[piitaya]

1. Height issue:

Fixed

2. Selecting a card, takes a while. We should add some kind of transition here. I click and some time nothing happens. Moreover (I had it once) after add a card it opened the more info dialog 🤷

I added a loader

3. search: keyboard navigation, this can be done at a later stage, but it should behave like the entity picker to be able to just use up/down arrows to select.

Yeah we can keep this for later as the picker may changhe

4. Personal opinion: It should be Tile - Brightness, Tile - Toggle instead of Tile (brightness), Tile (toggle)

Done

5. Floors

   • Unassigned areas are missing if the last floor is emtpy
   • if there are just unassigned areas it shouldn't be a "floor" just show areas as root
   • if there is just one floor (also with a second unassigned areas), please auto expand the tree there.

"Unassigned areas are missing if the last floor is emtpy". What do you mean?
I fixed the other points.

6. keyboard focus: when click on an entity it should focus the right panel

We can keep this for later as the picker may changhe