Video: How to Hide Cells in Your Application Prototypes

In our most recent how-to video, we show you how to hide cells when you're building an application prototype in Indigo Studio, by creating a navigation element which looks different on the phone than it does on the desktop. 

On the phone, we would really like to see a menu icon which shows up on the right side, but on the desktop you would like them to be separated out like a regular navigation. 

For that we would use this visibility property which by default the elements are visible but you could choose to hide it in a particular form factor and then show it in a different form  factor. 

Let's create a menu button first.  In the first row, there is actually just one cell in here.  I'm just going to make some room here so this title is inside a column span of 6, then I add a new item here.  As you can see the new item has a default height, but we won't worry about it right now.  I'll just double click and in here I'm just going to look for an icon, right here.  As you can see the menu icon is right now centered so I can just ask it to float to the right and then just give it a margin on the top of 15 pixels so it just aligns nicely. 

Before we can hide or collapse a certain column or cell I'm going to create it first.  Let's insert a new cell and give it the full width.  Inside this cell, let's just add some text and say, getting started.  I'm going to central line this text.  I'm just going to quickly name them so they look different and set the visibility of this cell to hidden.  The moment you do that, the cell takes on this blue highlight and you also see these indicators here which says XS, SM, MD, and LG which kind of implies that they'll be automatically hidden in all these form factors. 

To see exactly what the user would see, you can actually go up to the row.  We have this option to highlight hidden cells. If you turn that off, we will no longer highlight these cells.  Let's just do that.  This is exactly what the user would see. 

In order to trigger this particular menu, we will add an interaction on the menu button.  I'm just space selecting to select the menu button directly.  I say add an interaction when the user taps or clicks menu, change screen to new state.  In this new state, I'm going to select the row in which this menu is under.  I'm going to say, highlight hidden cells, and I'm going to select that cell and say, visibility is visible.  What we have done is from the starting state, you've added an interaction where we are setting that particular cell to be visible.

Now, let's just go back to our starting state.  Look at the tablet form factor.  Again, it's up to you whether you want to show the same kind of navigation for the tablet or not.  In this case, I do.  I would like to show a slightly different navigation for desktop.  For that I would go to desktop and in the desktop mode I would select this row right here and I'm going to say highlight the hidden cells.  I'm going to select the cell in which we had the menu icon and set the visibility to hidden.  The moment you hide it, you see these new indicators here which basically says that the menu cell is going to be hidden on the medium form factor, the large, (likely desktop) and very large desktop.

Instead, I would like to say this cell is always visible so I'm just going to come here and you can see that it says from XS hidden.  It then shows that where it inherited it from.  I'm going to set it to visible.  Same thing for this row, I'm going to now say that don't highlight it any more. 

Now this second cell actually has a span of 12, but the bootstrap is just occupying 2 column spans. Then I'm going to select this particular cell and reduce it's column spans and make it such that it occupies the remaining amount of space.  Then I'm going to edit this cell.  Right now each of these navigation items are full width and I don't want that.  I'm just going to select all of them to give them a column span of say 2.  That's about it. 

If you want to take a look at what actually has happened, if you select that particular row and say, highlight hidden cells, you'd see that the menu item is hidden on medium and large.  When you run the prototype you'd see that if I'm in the stretch mode then I re-size it and it comes to tablet form factor, it hides that particular cell which had the individual menu items and shows the cell which had the menu icon.  If I reduce it further, no change. 

Now, since we already have an interaction on it and that's what's showing on this highlight on here, when I click on this interaction, you're actually be able to see the menu items which are stacked automatically. 

But as you would have noticed that we don't have a toggle interaction specified in the menu button so let's just do that so that we can click on it and click on it again to basically collapse this menu.  I go back to my small form factor which was the phone.  Then select the menu icon directly using space select.  In here I'll edit the interaction under options.  I'll say when the user does this again, reverse the changes and that should do it.  When I run the screen, menu's shown, hide the menu.  If I re-size it, I get the full navigation available. 

As you can see, it's easy to create a navigation element that will look different in a phone versus the desktop, in Infragistics’ UX prototyping tool, Indigo Studio. For more videos and tutorials like this one, be sure to subscribe to our YouTube channel – and thanks for watching!