Using Layout Containers to Lock a Section of a Sheet

[MattSmart]

An explanation of a problem faced while updating an app, and the solution.

[MattSmart]

One of the main jobs we do on the Demo Team at Qlik is update the demo apps at explore.qlik.com. When we do this, we want to add some of the new features that Qlik has to offer and show you, the user, how you can use these features to further customize your apps.

The problem

Recently, I have been working on an app called ‘Procurement’. This app illustrates how an organization can analyze their spending and contracts. In doing so, this app shows the intersection of many different fields, such as vendor, country, contract, dates, and many others. One of the sheets we have is titled ‘Vendor Profile’.

In this sheet, a user can select a vendor and be shown various details about this vendor.

Please note that these screenshots were taken after the theme of the app was updated, bringing in new colors and backgrounds.

So, as you can see, we have the Vendor filter pane at the top of the screen. The problem is that for the user to use this sheet properly, one and only one vendor must be selected, if not, the sheet just looks blank. So how do we solve this?

A possible solution

One solution, one that many may be screaming at their screen would be to limit the field vendor to only allow one selection. While in isolation that would get the job done, the vendor field is used in multiple places throughout the app, limiting its use in other circumstances.

The solution I went with

Let me tell you a bit about layout containers. They are one of my favorite visualizations in all of Qlik. Layout containers really expand what a user can do as far as customization. Users can layer visualizations on top of each other, use different layers to shape a visualization that way that you desire, or in our case, lock a section of a sheet until a condition is met.

Doing this is very simple. First, we start by transferring all of visualizations from this sheet into our layout container EXCEPT for  what we want to let the users interact with before making a selection. In our case, we’ll keep the text box informing the user and the filter pane. If you do it correctly, you should have something that looks like this:

Notice that all our visualizations that we want to lock are within the green line, showing that they are within the layout container. Next, we’ll grab a Text & Image visualization and bring it into our layout container and expand it to cover the entirety of the layout container.

Our screen should now look like this. Please note that we need our new Text & Image visualization to be at the top because in layout containers, the top is equal to the front. If we get out of edit mode, we’ll see this:

So yes, we have locked our visualizations away, but now users cannot see what they are missing out on, or have anyway to access it, even if they do select just one vendor.

Let’s go back into edit mode to fix that, starting with being able to show them what they are missing out on. To do so, simply click on the ‘Edit properties’ in our new Text & Image visualization. From here we can go into ‘Styling’ then ‘Background color’. Click on the color and adjust the transparency. I’ve found that 40% works well.

Great! Now users can see that there is more to this sheet but cannot interact with it. Let’s fix that. With layout containers, we can create a ‘show’ condition for a visualization within it. For our app, we’ll use this expression for our show condition: ‘=GetSelectedCount([GlobalMaster])<>1’. Let’s break this expression down. ‘GetSelectedCount’ returns the number of selected values in the field called ‘GlobalMaster’. GlobalMaster is the dimension that our Vendor filter pane uses. Next, we have GlobalMaster, which is the field we want to center our show condition around. Last, we have <>1 which translates to ‘not equal to 1’. Put that all together and we get “Show this visualization if the returned value of the field GlobalMaster is not equal to 1.” We now click ‘Apply’ and we’re set!

Now we test:

Here we see that a Vendor is not selected, therefore I cannot click any of the other visualizations on the sheet. But if I select a Vendor, our textbox disappears and we’re able to access the rest of the sheet!

Perfect!

Thank you for reading this tutorial for diving into this use case of a layout container. What are some creative ways that you have used layout containers in your own apps? Leave them in a comment below!