Digital Hive Designer Elements Used for Authoring Hives

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 be leveraged to create a unique and effective user interface. This document outlines the different types of elements that are available to Digital Hive authors, why they would be used, and where applicable, recommendations on when to use each element type.

The various elements available to Hive authors can be found by clicking on the Elements  UI option in the upper left hand corner of the Designer. The Elements menu is divided into four main sections: Layout, Content, Actions, and Annotate.

The Layout elements are the containers that are added to a Hive page. These containers are where other elements will be added to complete the design. A Hive page MUST have a layout element. In fact, if a layout element is absent from the current page in the Designer, the other element types will not be visible. By default, when a new page is added to the Hive, a Grid element will automatically be added to the page.

Grid

This will be the type of container that used most frequently, which is why it is the default layout element when a new page is created. The Grid is the best way to design pages as elements within the grid can be easily aligned and will resize proportionally based on the screen size. 

As most organizations have users that leverage both tablets and desktop browsers, or that may have different screen size resolutions, the Grid should be the preferred layout. For more details about using the Grid and Canvas elements, specifically how they pertain to authoring for both desktop and tablet users, please refer to https://support.digitalhive.com/portal/en/kb/articles/authoring-for-both-tablet-and-desktop-users 

Canvas

The Canvas layout element is for designs when a specific Hive size is required. The Canvas will arrange the content based on pixels and specific location, and will not change when the screen size is altered. There are no grid lines when using a canvas so it's possible to add elements that are 'misaligned' from each other.  

Embedded Viewer

The Embedded viewer is probably the element type that will be the most frequently used in Hive designs. This is the element that displays content from the underlying connected content systems. The Embedded viewer is the element that would be used to embed a PowerBI dashboard, Tableau report, or Excel file from Sharepoint Online. 

File explorer

The File explorer is similar to the Catalog page where users can browse content, but it is smaller and can be used as part of Storyboard page type. The File explorer is configured to display a single collection of content or multiple collections. When multiple collections are included in the design for the File explorer, the collections are accessible by clicking on the collection names, at the bottom of the File explorer element. In this example, Shared Files, Authoring Workshop, Favorites, and Trending right now, are all collections available within this element.



Content Lane

The Content Lane, or 'swimlane' as people sometimes refer to it, is a purpose built way to display content from a specific folder, or the objects that are part of the predefined collections, like, favorites, trending, new content, recommendations, interests, etc. The Content Lane element, when paired with other Content Lanes, provides the ability to build a Netflix style page, which is a very intuitive, and familiar way, for users to consume content. 

Content Lanes are a great way to insert specific content onto a page that is made up of other elements, like a landing or home page, for example. 




Text

Like the name implies, a Text element allows authors to insert text objects into the design to bring Hives to the next level. Text elements can include links, bulleted lists, and even dynamic values to create personalized greeting for example. The example below contains a text element with a dynamic value (for time of day and the users' first name) coupled with a Search Bar element. These are the little extras that can be added to a Hive that elevate the quality of the user experience that gets delivered to end users.








Video

Another great technique for creating a more engaging Hive experience, is through the use of the Video element. With this element, videos, from YouTube, and other streaming services, can be embedded by simply providing the unique URL for the video. Videos can be set to automatically play when the page is viewed, loop when the video ends, and even be muted if the volume is not desirable. 

A great use of using the Video element is when creating a FAQ or help page. Videos can be embedded onto a page to help users overcome common hurdles or answer questions that new users may have about the application that has been deployed. When videos are coupled with links, images, and textboxes, an easy to use Help page can be crafted as part of a Hive.



Web Page

The Web Page element, as appropriately named, is to enable the embedding of web content. This is done through a single URL which is loaded into the element. This is a great way to embed images from a website, or content from another system. The one caveat to using the Web Page element, is that the target web URL has to be embeddable. Some websites do not allow their content to be embedded so if this is the case, the content will not render. This is not something that Digital Hive can address, you'd have to contact the people responsible for the  target website.

In this example, the author has tried to embed https://google.com and as Google does not allow itself to be embedded, the Web Page element is not happy.



Slider

Much like a lot of websites that have scrolling images on the home page, the Slider element allows users to display more content using less screen real estate. The Slider element is designed to automatically scroll through different content, and content types. For example, a Slider can contain a report from IBM Cognos on one panel, an image with some text on another panel, and then a Tableau workbook on the final panel.

The Slider is a perfect way to display numerous KPIs. Instead of embedding all the KPIs onto a single page, which can consume a lot of screen space, considering KPIs are usually looked at briefly, embedding KPIs into Slider panels delivers a better experience to the end users. The KPIs will automatically scroll, the amount of time each KPI is displayed is configurable, and if the user wants to engage with the KPI, when they mouse over the Slider the auto scrolling pauses. When the user is done with the KPI and moves their focus to another part of the screen, the auto scrolling resumes. 

In the following example, a slider was used at the top of the page to scroll between multiple Tableau KPIs. The KPIs can be set to auto scroll, which is typical the preferred way to deploy a Slider, or users can use the arrows to scroll through the various KPIs.



Using a Slider element adds a dynamic aspect to the Hive design by introducing motion into the experience. Highly recommended for displaying multiple KPIs.

Embed Twitter

The Embed Twitter element allows authors to embed a specific Twitter (now X) feed to a Hive page. To configure the element, the twitter URL, https://twitter.com/DigitalHiveIQ for example, must be loaded. This display the desired feed in a chronological order. 

Some words of caution when using the Embed Twitter element. As tweets are dynamic objects, what is being displayed today in the Hive, may not be what is there tomorrow as new tweets may be added. Also, there is no guarantee what the contents of those tweets will be, so beware. If you're pointing to a corporate Twitter feed, then chances are, the tweets should be user friendly. If you're pointing to more of a public feed, then what type of content gets displayed is a gamble.

There can also be some Twitter API request limitations which can prevent the feed from displaying consistently.



The Search Bar element adds a search box to a Hive page. When the user enters search criteria into this element, the Search page is then launched with the matching results. The Search Bar element is a great way to highlight the search capability, especially when the header of the page is set to the left hand side, where the search icon may not be as visible. When using the Search Bar element in a Hive with a header along the top of the page, the search bar control that is in the header can be disabled, or both search controls can be leveraged. A common preference is to leave the header search bar enabled so that search is available from any page of the Hive, not just the page(s) that contains a Search Bar element.

Image, Icon, Button, & Link

From a functionality standpoint, there is no difference between these four element types. In fact, the only small differences between these different options, are their appearance attributes. Images are displaying images on a Hive page, and can be used as actionable objects. In other words, they can launch URLs, open reports, navigate between Hive pages, etc. Images have a number of artistic filters (blur, opacity, brightness, etc) that can be utilized to edit the image without having to upload a new version of the image file. 

The Link element, similar to the Image element, is used primarily for navigation purposes. The one added benefit of the link versus the image is that a tooltip can be added to highlight to users where the link will take them, if the link text isn't descriptive enough.

The Button element is identical to the Link element, other than it does not fill the entire container, where as the link does.



The Icon element is the same as the Button, except that it is round and only contains an icon, as opposed to the button that can include text and/or an icon.

Flyout Button

The Flyout Button element is a great way to provide contextual information for an embedded report, a button, image, etc. The Flyout button essentially becomes a 'page within a page' where different types of elements can be used to provide necessary context to an object. Uses of the Flyout could be in conjunction with a button to download a report, where the flyout is an image preview of the report or even an embedded copy of the report. Another use could be that there is a sales report from PowerBI being displayed on a Hive page, and there is a Qlik Sense visual about last months campaigns from Marketing that helps to explain why sales increased over the quarter. The flyout could contain the Qlik Sense visual so that users are looking at the Sales results in PowerBI and if they were curious about the increase, they could invoke the flyout and see the Marketing results.

Flyouts are great when there is contextual detail is available for objects, but not every user requires the context. They also help to simplify the user experience by not requiring every element to be rendered until necessary.

In the following example, there is a Tableau Sankey visualization as well as a textual summary of the results. As not all users are familiar with how Sankeys should be interpreted a flyout was utilized for some additional context. The Flyout Button was configured to display an embedded video (using the Video element) that shows the business analysts recording of a deep dive into understanding how to read and extract value from the Sankey visualization.




This feature is available as of the 2024.1 release.

Line, Arrow, Ellipse, Rectangle

These types of elements are used for annotations. Highlight certain elements of the Hive, by including different annotations to the user experience. For example, here is a snippet of a Hive page, where the red line is drawing attention to the note at the bottom of the summary text. There is a red rectangle around the key takeaway from another text summary. The red ellipsis is highlighting that one of the categories needs attention, and the red arrow is drawing focus to the visual that seems like some data is potentially missing.

 


To help guide Hive authors to using the correct element, the Designer provides a quick overview for each element type. For example, if an author hovers over the Content Lane element, a flyout will appear with some contextual details about the element.

 

This feature is available as of the 2024.1 release.


    • Related Articles

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

    • Digital Hive Frequently Asked Questions (FAQ)

      Installation Can Digital Hive be installed on premise or in the Cloud? Digital Hive can be installed using either on-premise hardware, in a Private Cloud, or a hybrid architecture that leverages both Cloud and on-premise. There is currently no ...

    • Setting the Memory Used by Digital Hive

      Question How do you set the amount of memory that Digital Hive uses? Answer If you have lots of available memory on the Digital Hive server you will want to increase the Tomcat JVM. Setting the Tomcat Memory in Windows In Services, stop DigitalHive - ...

    • Adding Custom Fonts to Digital Hive

      Question The corporate branding guidelines for our company mandates a specific font be used for all material. Examining the available fonts within Digital Hive, the required font is not listed. Is there a way to add the custom font so that it's ...

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