Tableau Layout Containers: Part 2 - Tableau Menu Interface

0:00Okay, so in the last video I showed you the

0:03basics for layout containers.

0:05I showed you how sometimes the layout

0:07containers can change purpose from a

0:09horizontal to vertical

0:11and vice versa.

0:13And then I used color to basically help

0:15show you that.

0:16We're going to be doing that a little bit

0:18more.

0:18In today's video I want to focus on

0:20something a little bit more challenging

0:21where we essentially

0:22use everything that we've learned to create

0:25something a little bit more dynamic and

0:27interesting.

0:28This is a homepage system.

0:30The idea is that it links to different

0:32sheets or different dashboards and you'd

0:35click on

0:35an icon and it would take you there.

0:37Now those sheets or dashboards aren't

0:39actually here yet so clicking on anything

0:41won't do

0:42anything but the thing we want to focus on

0:45is the structure.

0:46And so I've actually created a colored

0:48example here just to try and make things a

0:51little

0:51bit simpler.

0:53So you can see here that we've got a whole

0:56range of colors going on and each one per

0:59tains

1:00to a layer on the dashboard.

1:03And if we look at this structure here you

1:04'll notice that you can actually sort of

1:06just

1:07about make out that hierarchy here.

1:10And if you sort of organize your layout

1:13containers then this is actually quite a

1:15useful guide

1:16of seeing what's where.

1:17So we start off with a tiled section, yes,

1:19and then a horizontal section across the

1:21whole

1:22sheet.

1:23In that we have a vertical section which

1:26can pretty much contain everything on this

1:29sheet.

1:29Next to that is a blank section and another

1:32blank section.

1:34Expand that again.

1:35Inside of that we have a horizontal section

1:38at the top with a text sort of titled

1:40inside

1:41of it.

1:42You have another bit of text below it.

1:44As I'm clicking these you can see that it's

1:46highlighting the appropriate section here.

1:49And then if we highlight that vertical

1:50section there then you'll see, okay, this

1:52vertical

1:53section contains more items.

1:55So let's go into that.

1:57And if we minimize these sections you start

2:00to get the trend here.

2:01We're basically stacking containers inside

2:04of each other to achieve an overall effect.

2:07The overall effect is that when we look at

2:10this dashboard and we start resizing it, it

2:13's

2:14fairly responsive.

2:15If I do this and start moving things around

2:19you'll see it's not as fast but it responds

2:22.

2:22And the icons, because these are shapes in

2:25a sheet and they're set to fill the entire

2:27view, when the space gets small then they

2:30get smaller.

2:32So you get a sort of fake responsive sort

2:34of feel to the dashboard where it adjusts

2:37to fit whatever height it's given in, it's

2:39sort of put in, which is I think quite nice

2:41.

2:42And similarly with width, these lines can

2:44show you here that, you know, if you had an

2:46image here on the right hand side rather

2:48than the blank space then you'd essentially

2:50get

2:50sort of an expanding and diminishing image.

2:56And so if we go back to this sheet and we

2:59get the dashboard hierarchy out, you start

3:03to see basically if you put together all

3:06the tips and tricks that we've learned so

3:09far

3:09on layout containers, you can start to

3:11build some quite compelling user interfaces

3:13that

3:14you can use.

3:15And so I'm just going to walk you through

3:17how I built this and whilst I'm doing that

3:20you'll see a few tips and tricks that I use

3:23to make this fast and simple.

3:25So I'm going to minimize that and I'm going

3:28to go back to this sheet and I'm going to

3:31create a new dashboard.

3:32For now we're not going to use any of the

3:34sheets that we've built so far, we're just

3:35going to use this sort of area here on the

3:38left.

3:39Let me just give myself a little bit more

3:41space.

3:42So if we start with, I'm going to make this

3:43automatic.

3:44I'm going to make it fill the whole screen

3:46just so you can see what I'm doing.

3:49Next up, the first thing I'm going to drag

3:51on is a horizontal container and let's

3:53color

3:54that so that you can see that it's actually

3:56on there.

3:57Sometimes it's difficult to know what's

3:59going on.

3:59Some thin colors just help make it a little

4:02bit more obvious.

4:03So the first thing we've got here is a

4:05horizontal container and inside of that

4:08horizontal container

4:10I'm actually going to put a blank area and

4:12that's going to be sort of in on the right

4:15hand side and if you don't believe me it is

4:17in there but because it's the only thing it

4:19's

4:19taking up the whole screen.

4:22And then the next thing I'm going to put

4:24inside of that is a, I think I'm going to

4:26put a vertical

4:27area here on the left hand side.

4:29So we've got a vertical and a blank space

4:32here.

4:33Now the vertical container is actually

4:35taking up pretty much all the space because

4:38by default

4:39blank containers don't have a set width.

4:43They're sort of flexible and the vertical

4:45containers or layout containers

4:47automatically

4:48adapt.

4:49Again they've got no set width so what's

4:51happening here is that vertical container

4:53is taking

4:54sort of precedence over this blank area.

4:57There's nothing in it so it becomes the

4:59smallest thing on the dashboard.

5:01If you were to set a fixed width of that

5:03then obviously it would then abide by that

5:05space

5:06but because there isn't any there isn't

5:08anything sort of happening there.

5:10Next thing I'm going to drag in is a

5:12horizontal container and again looks like I

5:14'm just dragging

5:15an attempt to space but it is actually in

5:18there.

5:18So just dragged in the horizontal space

5:21into the vertical container and then the

5:24first

5:25thing is going to be a text space.

5:27So let's call this super store sales menu

5:34system.

5:36Excuse my spelling.

5:38There we go and let's make this nice and

5:42large.

5:43Let's make it 20 and yeah.

5:45So there we go.

5:47So now if we highlight that you'll see that

5:50there's a horizontal space in there and

5:52inside

5:52of that is a text item.

5:55It's perfect.

5:56Okay the next thing I'm going to do is I'm

5:57going to drag another text item and this is

5:59just going to be called description text.

6:03So this bit of text describes something.

6:09I'm just going to say okay so we've got

6:13this area here at the top and I'm going to

6:16color

6:17that layout container again just so you can

6:19see what's going on.

6:21I'm going to make it green and then you've

6:23got the text just below that.

6:25And then the next thing now that we've got

6:28that layout container in there is I'm

6:30actually

6:31going to drag in a blank space and I do

6:33this just to make my life a little bit

6:35easier because

6:36sometimes you need something in the

6:39container to be able to drop something else

6:41in and you'll

6:42see exactly what I mean a little bit later.

6:45So I'm going to now drag in the vertical

6:47right in between there and you'll see that

6:49that's

6:50now taken up all the space again.

6:52It's gone and taken the full width and I

6:55can now select this blank space and delete

6:58it.

6:59So we've got our vertical container, we've

7:01got text just above describing what this is

7:03and this is our title and if we compare

7:05that to what we have so far you see it's

7:08very similar.

7:09We've got our superstore sales item there,

7:12hover or click on the Arkansas Navigate

7:14which

7:14is our description text and now we're

7:17getting into the bulk of sort of the meat

7:19of this

7:20area here.

7:21Now I'm going to use images rather than

7:24sheets for now just to basically show an

7:26example

7:27of how to do this quickly but you can use

7:30sheets instead of images where I use the

7:33icon.

7:33So we've got a vertical container in here

7:36and again I'm going to use a blank

7:39container.

7:40I'm going to put those inside to help me do

7:42something a little later on and you'll see

7:45why that is in a second.

7:46So I have put in a blank area, it's gone

7:49inside of this vertical and I'm putting

7:52another blank

7:53area in there and a lot of this is actually

7:57just sort of blind faith.

7:59It is there, if you select them you can see

8:01that they're there but I think as a user

8:03sometimes

8:04you can think well what's going on here,

8:05nothing happened.

8:06But pay attention to this layout view here

8:08because that's where the magic is really

8:11happening

8:11and so vertical container automatically res

8:14izes anything inside of it equally if they

8:17have

8:17no set height or width and that's exactly

8:20what's going on here.

8:22It's sized the blank, two blank areas the

8:26same height and the width is now abiding by

8:29this sort of split that we've got here.

8:32You might notice that this has been

8:34changing back and forth as we put things in

8:36there,

8:36that's being controlled by the containers

8:38that we put inside and the text items that

8:40we put inside.

8:41And now the next thing I'm going to do is

8:47drag in five vertical containers and these

8:53are going in again, that's one, two, three,

8:56four and we need five so just do one more.

9:00There we go, just to prove that they're

9:02going in I'm going to format those and

9:05color them

9:07alternating colors just so you can see what

9:10's going on.

9:11There we go.

9:16Now I hope you can now appreciate why I use

9:19coloring a lot because imagine if I hadn't

9:21colored anything this would all just be

9:23white and I wouldn't know what the hell's

9:25going

9:25on if I was honest.

9:26So I'm now going to delete the two blank

9:30spaces I put in there and if we select this

9:33layer

9:34container and I'm just going to format that

9:36and I'm going to color it red you'll see

9:39that

9:42in our layer container here, in our

9:44vertical layer container we've got one, two

9:46, three,

9:47four, five vertical containers and they're

9:50equally spaced out and you can see that

9:52here

9:52in the hierarchy.

9:53So you've got a horizontal section, our

9:56text section just below that and our

9:58vertical section

9:59containing five more vertical containers.

10:02Excellent.

10:03Next step is putting these icons and text

10:06in there.

10:08Icons in my case would be sheets but I'm

10:09just going to use images to keep this video

10:11nice

10:11and short.

10:12So how are we going to put these in there

10:15and how are we going to get them to space

10:17my seal?

10:18We're going to need a horizontal container.

10:20So again a bit more blind faith here.

10:22We're going to put a horizontal container

10:25in there and in there.

10:27And I know it's doing this because when I

10:29hover over the vertical area the blue line

10:32is going around the container to tell me

10:35yes this is about to get dropped inside of

10:37here.

10:37And that's what happens if I put it

10:39somewhere else like there that would tell

10:40me that it's

10:41about to put a horizontal container in

10:43between the two verticals.

10:45We don't want that.

10:46So I'm just going to carry on doing what I

10:49'm doing.

10:50Okay and you'll see I now have something

10:52inside all my vertical containers and if I

10:55select

10:55that you can see the switching there

10:58between those two there.

11:00Okay so now that we've done that again a

11:02bit more blind faith here.

11:04If this had no color you wouldn't be seeing

11:06anything.

11:07Just all still be white.

11:08We haven't got a single sheet on here.

11:11But what I'm doing is really important.

11:12I'm building the structure for my semi

11:15responsive menu system here.

11:18So next thing now that I've got something

11:21horizontal in each of the vertical

11:23containers

11:24I'm going to put some text in there and I'm

11:27going to call this menu option one.

11:30I'm just going to make this nice and big.

11:32And I'm actually going to copy that.

11:34I'm a bit lazy today so I'm just going to

11:36copy that in there.

11:37When you do that you realize a vertical

11:39container suddenly shrinks.

11:41And in a way that makes sense because what

11:43it's saying is well this vertical container

11:45doesn't need more space than that height.

11:48So let me minimize that and make all the

11:51others the same.

11:53And if I drag a text item into that one,

11:56click okay, you'll see it does the same

11:59again.

12:00And if I drag another text item into this

12:04container here, it does the same again.

12:08And again.

12:12And the last one something very different

12:15happens.

12:16So it said okay those are your containers.

12:19Let's just have a look and make sure

12:21everything went in okay.

12:23It's always good just to look back here in

12:25your layout view and make sure everything

12:27went where you wanted it to go.

12:30And that appears to be the case.

12:36That's perfect.

12:37Yeah, everything went where I wanted it to

12:41go.

12:42Now the next thing I need to do is to drag

12:45in a blank item on the left hand side of

12:48each

12:48one of these.

12:51And that's just going to give me a bit more

12:53space to work with.

12:54Let's just do that now.

12:59We're going to delete these later on, but

13:01again they just make it much easier for me

13:03to manipulate.

13:05And then in between these I'm going to use

13:07images.

13:07This is an icon set that I really, really

13:09like.

13:10Use it a lot in Tableau and it's just got

13:13some great, great icons.

13:16So let's just say, let's just use some

13:18random images.

13:19Here we go.

13:20And when we pick an image in Tableau

13:22realizes hold on a minute, this image is

13:24huge.

13:25Let's give it more space.

13:26And that's exactly what it does.

13:29But let's do that to all of them first.

13:31And you can see what Tableau's decision

13:34Tableau's making here.

13:35So let's choose another icon so you can see

13:37what that looks like.

13:38And then it was quickly running out of

13:40space here.

13:41But let's keep going.

13:44See what happens as we add more.

13:46Now can you start seeing it's actually now

13:48equally distributing them.

13:50It ran out of space at the bottom so now it

13:52's time to equally distribute the ones at

13:53the

13:53top.

13:55And when we add in an image at the bottom,

13:58same thing happens again.

14:01And this is a final one.

14:02I'll use a paper airplane.

14:05Perfect.

14:06So we've got our five images nicely spread

14:09out here.

14:10And we're going to get rid of the blank

14:15spaces we've put on the left hand side.

14:20And voila, we have our many options.

14:23Next thing to do is to just center the

14:26image and fit them.

14:28Again if these were sheets you'd probably

14:31not be doing this.

14:33You'd probably set them to fill the entire

14:40view.

14:41But at the moment they're resizing because

14:44there is something else that is taking up

14:47more space.

14:48So do you see how when I finally told this

14:52one to fit the image, it decided okay, I'll

14:57do that properly now.

14:58And it equally distributed everything

15:00across the page.

15:02And there you go.

15:03That's your paper airplanes.

15:04The last thing I'm going to do is I'm going

15:06to edit the width.

15:07I'm going to give all these the same width.

15:09I'm going to give them a width of 150.

15:11I'm going to copy that because again I'm

15:23pretty lazy.

15:27Keep going.

15:33Okay.

15:38And of course they're not all many option

15:40one.

15:41They're different menus.

15:44Double click that.

15:52This is the fifth one.

15:54Perfect.

15:55And so now I'm going to try and remove all

15:58the coloring so you can see that we have

16:01really

16:02ended up pretty much close to where we

16:05started at the beginning minus a few sort

16:08of finishing

16:10touches that you can do yourself.

16:13So I've taken off the background wallpaper,

16:16sorry wallpaper color on that layout

16:18container.

16:20I'm just going to select the layout

16:21containers here.

16:22I'm going to format container.

16:24There's nothing there.

16:26I'm going to select the layout container

16:27here again.

16:28There's a layout container again.

16:31There's none there.

16:33Perfect.

16:34I'm going to select the layout container

16:37for the whole thing.

16:38And hopefully you're noticing my workflow.

16:41I use different methods every single time

16:43to get to layout containers.

16:44I don't ever use the same one every single

16:47time.

16:48So I'm going to go here, being slightly

16:56slow here.

16:58Sometimes when you select, you select the

17:01text item and not the layout container.

17:05And obviously because we've got the

17:06vertical and the horizontal in there, I had

17:08to do that

17:09twice to get to what I want.

17:12And so maybe I'm just going to put in a

17:15small blank space in between these.

17:19Reduce that a bit.

17:25Use Tableau's automatic snapping sort of

17:28feature here.

17:29It doesn't come up.

17:33And there we go.

17:39That's a very, very quick overview of how

17:42to create something responsive.

17:44And I hope you agree.

17:45There you go.

17:46As if I start resizing this, you'll see

17:50that everything sort of resizes.

17:53Now, if you were using sheets, the idea is

17:56that you wouldn't use these blank lines.

17:59You'd use something a bit more accurate.

18:01So I'd actually use an image in between all

18:04of these so that you get the same

18:06consistency

18:07in each horizontal section.

18:10Secondly, I'd use sheets because they give

18:12you more control of these icons.

18:14And then you can also apply actions on them

18:16.

18:16You can't apply actions on images.

18:18Lastly, if we have a look back at this one,

18:22the finished sort of example, just some pol

18:27ishing

18:27touches on the font and some information

18:31here at the bottom that you can use.

18:33But there you go.

18:34So now we're going to build a responsive

18:37sort of menu system.

18:38In the next video, we'll go through tying

18:41all of this together.

18:42And so we'll actually create a Superstore

18:45sales dashboard, which will have this menu

18:48system.

18:49And it will have a couple of other dash

18:51boards as well that we'll interact with.

18:53And we'll cover a few new ideas there.