Question
Our user audience comprises both traditional desktop users as well as users who work with tablets. What is the best way, short of creating different Hives, to create a Hive that can cater to both user experiences?
Answer
There are two types of Layout components that can be used when a Hive is being authored: Grid and Canvas. A Grid, as implied, contains gridlines that serve as anchors for the elements. In other words, when an element is added to the screen, it will snap to the closest grid line (both horizontally as well as vertically). This ensures that elements are aligned and that they all share a common layout. The Canvas is more free-form and elements can be added anywhere within the Canvas and have no set gridlines to snap to.
By default, when a new Hive page is created, a Grid element is included on the page which is already optimized for a common tablet screen resolution (768x900). The maximum width is also set to a large value to accommodate larger screens.
When elements are added to the grid, they will properly resize based on the window size. This is possible because all of the elements have a fixed position relative to the other elements. As you can see in the following example, this is a screen that has been set to the 768px width.
When the window is resized to something much wider, you can see how the elements resize proportionally.
The way that the BI content resizes within the Embedded Viewer is solely at the discretion of the underlying BI technology. Some BI providers like PowerBI and Qlik Sense scale content very well, while some others are not so smooth or easy to configure for resizing.
Taking a look at a couple more example, you can see how other Digital Hive elements like Content Lanes, Sliders, Text Boxes, Buttons, etc also scale when used on a Grid.
When a Canvas is used, you will notice that there are two 'areas' that make up the canvas: the Inner and the Outer areas. These can be seen in the following image, where the Inner area has been formatted with a blue background.
Similar to the Grid container, the Inner default size is also formatted with the same tablet friendly dimension.
When a Hive is created using a Canvas layout, the Inner area is 'fixed' so that when a larger screen starts to contract in size, it will remove the Outer area first until just the Inner is visible. If the window is made even smaller than the dimensions of the Inner area, the content will start to disappear. For example, here is a window that is reduced to the size of the Inner area, and then what the same window looks like when it is made slightly smaller.
When the window size is made larger, and goes beyond the size of the Inner area, the Outer area will become visible. An image was used as the background of the Outer area to emphasize the visibility.
Note that unlike the Grid container, the actual size of the content doesn't change and remains constant within the Inner are of the Canvas. This means that the Canvas is a good technique to mask content that doesn't automatically scale properly, and to ensure the consistency of the content.
It is strongly recommended that Grids be used whenever possible as they offer the best scalability when working with window sizes that may vary across the organization.
Related Articles
Digital Hive Designer Elements Used for Authoring Hives
Overview Digital Hive provides a very robust, zero code, authoring experience that enables authors to create visually stunning and impactful end user applications, called Hives. As part of the authoring process, there are different elements that can ...
Authoring Best Practices Guide
Overview Digital Hive provides a very robust, zero code, authoring experience that enables authors to create visually stunning and impactful end user applications, called Hives. While the authoring process is very easy and intuitive, there are ...
Create Dynamic Folders to Curate Certain Content for Users
Question We have a lot of content that is exposed through Digital Hive, which is great for our Authors and Power Users, but for most Consumers, this can be overwhelming. Custom Fields are being used, and one of the fields that is populated on the ...
Removing Digital Hive Users that have been Disabled or Removed from the Active Directory
Question How do I remove Digital Hive users that have either been disabled or removed from Active Directory? Answer In version 2024.2, a mechanism was added that will remove Digital Hive accounts that are no longer active within Active Directory. ...
Users are 'Unable to log in right now' to Digital Hive
Question Some users who were able to log into Digital Hive previously are now unable to access the Digital Hive application. When they try to log in with their credentials, they receive an error message stating 'Unable to log in right now'. How do we ...