Authoring for both Tablet and Desktop Users

Authoring for both Tablet and Desktop Users

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 ...

    • 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 ...

    • Using Active Directory as the Authentication Source for Digital Hive

      Question Can Digital Hive leverage Active Directory as the authentication source so that existing AD users and groups can be used? Answer Digital Hive can be configured to use Active Directory authentication as long as the Digital Hive server is ...

    • What do the Digital Hive Capabilities Control in the Product?

      Question Digital Hive provides the ability to create new roles that contain various capabilities. What do each of the capabilities control? Answer Here is a listing of the Digital Hive capabilities. Please note that these are subject to change in ...