Device preview in web edit: New inTableau 2021.1
You can now use the device designer in web edit.
- Device preview, previously desktop-only, is now available in web edit as of Tableau 2021.1, provided you have edit permissions on the workbook
- Tableau can auto-generate a phone layout, indicated by a padlock icon; locking keeps it auto-generated while unlocking lets you move and adapt elements yourself
- Right-clicking the device preview tab lets you add phone, tablet and desktop layouts as a hierarchy beneath the default view, and the three-dot menu deletes them
- You can pick specific device models via the device preview tab, such as a small iPad, large iPad or Samsung tablet, then click add layout to apply it
0:00Hey, it's Tim here. In today's video, I'm
0:02going to be showing you how to create,
0:04arrange and sort out device previews on
0:06Tableau in the browser in the latest
0:09release of Tableau 2021.1.
0:12Right, in order to do this, we need a
0:13visualization. So I'm going to get to my
0:15Tableau Online instance here.
0:18I'm going to select this first
0:19visualization, which is just Superstore.
0:21There's nothing special about this.
0:23I'm going to go to the second visualization
0:24, the product page here.
0:26Now, you can do this for any workbook. It
0:27doesn't really matter what you use this for
0:29.
0:30But on 2021, one of the things Tableau is
0:33continuing to do is to push forward with
0:34the browser capabilities.
0:36And so the device preview is pretty, you
0:39know, it's not heavily used on desktop in
0:41businesses.
0:42It's something that's normally an after
0:43thought typically. But in some organizations
0:45, it's actually done alongside and the sort
0:47of core development for desktop enabled
0:49visualization.
0:51So in order to show you this, first, you
0:52need to be able to edit the visualizations.
0:54If you can't see this edit button, then you
0:56don't have the appropriate permissions to
0:57edit visualizations.
0:59But if you do, you'll have this option here
1:01. And if you hit edit, you go into what
1:03looks like a dashboarding experience inside
1:05of Tableau desktop.
1:07So this feature is already available in
1:08desktop. It's not new for desktop. It's
1:10just new for the browser capability.
1:13And over here on the left hand side, you
1:14can see that Tableau has already created a
1:16phone layout for me.
1:18If you're wondering where I am, I'm just
1:19over here on the left hand side where it
1:21says phone.
1:22And this phone layout is actually
1:23automatically generated. If I just click on
1:25that, you'll see this little padlock here.
1:28That padlock, when I lock it, will just
1:30show you that this is actually an auto
1:31generated layout.
1:33If you click on that, you see you have the
1:35ability to edit. If I click on that, unedit
1:38it.
1:38When the tooltip comes back, you'll see if
1:40I hover over it again, it basically asks
1:42you to click to auto generate the layouts.
1:45The lock means it's auto generated and an
1:46unlock padlock means you've got the ability
1:48to move things around and adapt it to suit
1:51your needs.
1:52Now, this phone layout isn't ideal. It's
1:54not necessarily the best one. This table
1:55doesn't really work.
1:57But let me show you how to add more things
1:59to this view. If I just right click this
2:01tab here that says device preview,
2:03I get the ability to add additional layouts
2:05that I don't already have in the
2:06visualization.
2:08So if I go ahead and remove my phone layout
2:10, just by right clicking on that little dot
2:13and selecting delete layout,
2:16you'll see the phone layout disappears. And
2:17now when I right click on device preview, I
2:20see all three device types.
2:21So let's go ahead and add a tablet layout.
2:24You see, when I do that, it just adds like
2:26a hierarchy.
2:27So the default view is essentially what
2:29everyone sees. Then the subsequent views
2:31below are essentially sort of customized
2:33views for those devices.
2:35I can keep sort of adding things. Let me
2:38add a desktop layout and let's add a phone
2:40layout.
2:41So now we have all three. To delete any of
2:44these again, you just click on these three
2:45dots next to the item and it will give you
2:47the delete option to remove it.
2:49Now, that doesn't mean that you can't add
2:51things the other traditional way.
2:53So if I click on device preview here, you
2:55'll see that I get the device preview tab
2:57that pops up.
2:58If you didn't see that, I'm talking about
2:59this area just here on the screen here. So
3:01you can see that it's popped up and I have
3:03a range of devices.
3:04And so what I can do is I can just go here
3:05to device type, choose the device that isn
3:08't already in my device preview, in this
3:10case tablet,
3:12and then change this to the device that I'd
3:13actually like to use, whether it's a nice
3:15small iPad, a big iPad or Samsung tablet.
3:18Let's go over the Samsung tablet this time
3:19around. I know this is really tall and wide
3:21, so you can see that it sort of knows those
3:23layouts.
3:24It changes them. And then when you're done,
3:26you can just click on this add tablet
3:28layout and it will automatically add it.
3:31So if you didn't see that happen, all I did
3:33was I clicked on a button that was here to
3:36say add tablet layout,
3:38and then it hits this sort of area here on
3:40the left as it normally does.
3:43So really straightforward, really basic.
3:46Everything else is pretty much as you'd
3:47expect.
3:48Of course, it has all the same dashboarding
3:50layout capabilities as you have on desktop,
3:53but that is a nice quality of life
3:54experience for anyone who spends most of
3:56their time developing in the browser
3:58and needs to go in and edit a mobile layout
4:00, maybe just tweak a few things here or
4:02there.
4:03Editing in the browser still got a lot of
4:05catching up to do, but I firmly believe by
4:07the end of this year,
4:09we'll have something that is comparable, if
4:11not better than the actual product.
4:13So let's hope Tableau meets that
4:14expectations.
4:16And that's pretty much it for this one.
4:18Thanks for watching.
4:18Subscribe, like, share the video with
4:20everyone who you think might find it useful
4:22.
4:22And I'll catch you in the next video.
4:24[Music]