[Canvas][Meta] Template experiences

[ryankeairns]

Describe the feature:
As a Canvas user, I would like to select from workpad templates so that I can learn about Canvas elements and to quickly build workpads for reporting on common technical solutions.

Phases:
Phase 1

Read-only; user can select a template which creates a duplicate/copy for them to edit, users can not create their own templates.

• Static workpad templates Feat: Workpad Templates #23966
• Templates are tagged by category; users can filter by tag Tagging #25532

Phase 2+

• Users can create templates (ie. save their own workpads as templates)
• Advanced filtering capabilities (eg. a sidebar list/navigation; tagging and filtering on element types, etc.)
• Suggest elements or functions based upon the template being used. For example, if you started from an 'elasticsearch' tagged template, then elements and functions relevant to that use case would rise to the top.
• Workpad templates can be packaged with custom functions and elements.

Describe a specific use case for the feature:
As a new Canvas user with no workpads, I would like to build a dashboard (workpad) of live charts using Elasticsearch data. I navigate to Canvas, see a list of workpad templates, select one, and can then view/edit a real workpad with sample data.

As an experienced Canvas user, I want to create a workpad to monitor the status of my Docker containers. I navigate to Canvas, see a list of workpad templates, filter for templates tagged with 'docker', select one, and can then view/edit a workpad using my Docker log data.

Mockups (Phase 1):

1. Canvas home (empty state) with tab navigation

• I'm making an assumption that each tab should have its own search input. The reason I opted to not have a single global workpad search is that the results could then have a mix of my personal workpads entangled with templates, presumably on the 'My Workpads' tab which seems confusing.
• Alternatively, we could not use a tabbed navigation and then - upon clicking 'Create workpad' - have the user select a 'blank' workpad or search/filter available templates. The downside here is that we likely end up with another large modal and the templates are not visible until you click 'Create workpad'. I have a mockup of this and will share it in a comment below.
  

2. Template tab; list of available templates

• Presuming we have a small initial set, this design uses existing EUI components to expedite the initial development - a table, health (for tags), select dropdown, etc. (see next screenshot)
  

3. Filter templates by tag (viz has similar EUI-style tag filtering in the works)
   

Mockups (Phase 2):
4. Filter navigation/sidebar (faceted search)

• As our available templates and tag categories grow, we can expose them in a list to surface key terms (tags) and make for a quicker search filtering experience.
• This style of filtering could also be used when adding elements to a workpad.
  

cc:/ @rashidkpc @alexfrancoeur @cqliu1

[ryankeairns]

As an alternative to the tab navigation, we could add the template selection as an intermediate step that could look something like below. This is a quick mockup, more visual cues/differentiation between blank and template workpads is needed, but you get the idea.

I have a couple reservations about this approach (noted above), that said, it may be a familiar flow... click on 'Create workpad' see a selection screen:

[ryankeairns]

Thinking even longer term - as content grows and the K7 design evolves - we could explore moving the filtering to the sidebar as is being explored for Dashboard (mockups below).

Currently, we are restricted design-wise in that the home page and workpad selector are displaying the same content. In other words, we're limited to keeping things inside the white panel on the home screen as this is what will display in the workpad selector modal when in edit mode.

This wider layout would buy us more real estate for additional workpad information such tags, descriptions, spaces, etc., in a card/grid layout.

[rashidkpc]

Loving this, can you work up a view for how we add/remove/manage the tags on workpads? I'd like to get that in soon, it's an easy win.

[ryankeairns]

@rashidkpc , et al, here's a mockup showing how a user can manage template tags (uses EUI combo box):

[alexfrancoeur]

@ryankeairns this is great! With most presentation software templates are usually represented more visually.

Thoughts on something like sample data? Or simply a card with a visual as the default and an option to switch over to list view? I'd imagine the templates are reasonably different so having a visual representation here should make it easy to differentiate. I know with these approaches it's easy to get lost in the screenshots and maybe it doesn't scale, but it seems to be a common approach.

Also just a small thing but "My workpads" won't necessarily be true until RBAC is introduced. They will be global to start, maybe that should just be "Workpads" for now.

[ryankeairns]

@alexfrancoeur Yes, the more visual, image preview route is where we'll likely head. My initial mockup was going down that route using EUI cards with images, but I shifted focus to a simpler version that we could 🤞 can get into the beta release. Do you have any idea how many templates we'll have initially?

We have some limitations with the current home page in that this content is re-used in the workpad switcher modal - this leaves us little room to work with and I'm reluctant to add another large modal. My prior comment explains this a little further and shows a screenshot of things that are cooking for Dashboard... once we come back around to this (Phase 2), that is a direction I would like to explore further (imagine those cards being thumbs or using a right sidebar to display templates, as in the Google Slides screenshot you shared).

Boiling that all down, I'm on the same page, just taking an iterative approach with the design in light of current deadlines and limitations. I will keep chipping away at this and put together a Phase 2 home page mockup that breaks out of the current mold.

Thanks for the feedback.

[ryankeairns]

@alexfrancoeur here's a quick mockup of what we were discussing above regarding template thumbnails (previews) and a revised Canvas home page (in the same vein as the Dashboard page Caroline has been designing):

There are some interactions and design elements that I would like to continue working on (toggle the template sidebar, clean up the content in all the cards, etc.), but this gives us an idea.

cc:/ @snide

[snide]

Layout looks great. Only comment is I think you'd want to separate templates and existing workspaces from being on the same page. I'd probably lead them on a little bit. Will also prevent the page from being half empty and lopsided when they first start using canvas.

Does this make sense?

[ryankeairns]

Who doesn't like more mockups?

We could also balance the space by toggling the templates sidebar (see button next to search). Following Dave's logic, we could show the sidebar if you have no workpads and, while perhaps a little visually unbalanced, those template thumbs do capture your eye when the workpad list is empty:

One shortcoming of the show/hide sidebar is that once you hide it you might forget about it - out of sight, out of mind. While less exciting from a visual standpoint, tabs do a great job of keeping the word 'Templates' at the forefront. This removes the need for the sidebar altogether and provides more real estate for template cards/content.

Lots of thoughts but all in all this is feeling like a good direction.

[snide]

Nice 💯 ! I like the tabs myself, mostly because it's clear and follows our other patterns. To solve the "where does the create workpad button go" I'd make that button simply load a propover with "Start from scratch" and "Start from a template" as the two options IF they are not on the template tab already. That way a user isn't going to miss the templates either way they attack it.

The template sidebar one looks nice, but might not scale as well. If we plan on having lots of templates (the Elastic way) it likely could need search, pagination...etc. Would it be fixed against the right side, or does the content just grow.

[elasticmachine]

Pinging @elastic/kibana-design

[biji-padhy]

Hello Everyone,

Can we set one canvas workpad as default homepage for kibana? What I mean is, as soon as the user logs in instead of showing the default homepage of kibana, can we set one of the existing workpads? I know we can set the default homepage as one of the dashboards by setting the property "kibana.defaultAppId" in kibana.yml. But wondering if it is possible to make a canvas workpad as default homepage.

I tried this: kibana.defaultAppId: "canvas#/workpad/workpad-dd83b8fa-0d4f-4713-90d6-3d87455a80f4/page/1"

But its not working. Please help me with the correct URL pattern if possible to do so. Thanks in advance.

[nreese]

Closed as not planned