Including a Flyout Button in a Hive Design

Including a Flyout Button in a Hive Design

Overview

A great user experience comprises many different elements that work cohesively to provide both an aesthetic, as well as functional, interface for users. Often, when too much effort is placed to include all the information a user could possibly need into a single view, the overall look of the user experience suffers ... and in most cases too many options and objects to interact with produces a less functional application.

To help combat this scenario, Digital Hive allows Hive authors to add Flyout buttons to the Hive pages. These buttons can be used for many different purposes, but this article will not only focus on how to leverage Flyout buttons, but will also highlight a few of the main challenges that flyout buttons help to resolve.

Providing guidance about how to leverage an embedded object

Not all consumers of a visualization or dashboard have the same understanding of how to interpret what they are seeing. One of the key issues is that sometimes uncommon visuals are used to help tell a narrative. If the user can't fundamentally grasp how a visual works, there is little chance of them making an informed decision on the data that is being displayed. 

Take for example, Sankey charts. These are great visuals for explaining the 'flow' or distribution across different dimensions, but they can be overwhelming for some users, especially users that are seeing a Sankey for the first time.



At the top of the visual, a Flyout button was overlaid that, when interacted with, will provide users will some guidance on how to interpret a Sankey chart. To accomplish this, when the flyout is invoked, there is an embedded video, located in Sharepoint, that a business analyst has created that offers users with insight and a walkthrough of the Sankey.



What is great about this approach, is that the contextual video is available to users if required, but it does not consume screen real estate and isn't always displayed. 

Adding additional insight for an embedded visualization

Another use case for the flyout button is the ability to provide deeper analysis of a visualization by highlighting another report or visualization, even if it comes from a different BI system. In this example, a Tableau view is displayed that provides users with an overview of the profit breakdown by month and year. A business analyst has performed some impact analysis and has uncovered that there is a direct relationship between shipping times and profitability. The challenge is that the shipping data resides in PowerBI. Using Digital Hive, the Tableau view is embedded onto a page, and a flyout button is added:  

When users click on the flyout button, the PowerBI dashboard visual is displayed in the flyout window, providing the users with on-demand information that comes from an entirely different BI system that the original visualization. 



There was no need for users to have to search for the secondary report, and more importantly, there was no need for the business analyst to import the data and create a net new view in Tableau.

Providing more details to users who may need it

Similar to the first two use cases, the flyout button aims to surface additional context for users, whether it's a video, secondary BI content, or even text fields. A common use case are for Hives that FAQs, or similar textual requirements. Instead of creating a lengthy page with both the questions AND answers, which can become overwhelming for users and impact the overall user experience, the question can be added to the page, and if a user requires a response they can invoke the flyout button.



When a user engages with the flyout, the response is included, which can include text, links, lists, etc.


How to add a Flyout button to a Hive page.

  1. Log into Digital Hive as a user that authoring (edit) privileges for a Hive
  2. Open the Hive to be edited
  3. Click on the Hive Launcher  icon and select Open Designer
  4. Navigate to the correct Hive page
  5. Click on the  to display all of the available widgets
  6. Drag and drop the  widget to the page
  7. This will add a Flyout Button to the page with the flyout expanded

  8. Using the red guide circles, resize the flyout window to the estimated size of the content that will be added to the flyout (the flyout can always be resized later, so it can be a rough estimate)
  9. If the content to be included is NOT a report or visualization, jump to step 13
  10. The easiest way to add content to the flyout is to click on 
  11. Browse or search for the desired content
  12. When the content is located, drag and drop the object onto the flyout
  13. For other types of widgets, from the Elements list of widgets, drag and drop the desired widget type (Text, Video, Image, etc) onto the flyout window
  14. In the Properties panel, adjust the Flyout Button properties to control the displayed icon, where the flyout appears, and whether the flyout is opened on click on on hover 

  15. Adjust the other required object properties (both the flyout and the flyout contents) to achieve the desired visual aesthetic
  16. Resize the flyout content and flyout window to the desired sizes
  17. Save the changes to the Hive
It is possible to add multiple widgets to a flyout. For example, building on the example above, this is the flyout when a Text element is also added.

    • Related Articles

    • Creating a Personalized Greeting within a Hive

      Question Is there way to insert a personalized greeting onto a Hive page to create a more personal user experience? Answer As of the Digital Hive 2.1 release, it is possible to insert a customized personal greeting into the Digital Hive experience. ...

    • Changing the Hive Color Scheme

      Question How do I modify the color scheme that is used by a Hive? Answer Digital Hive provides authors with the ability to leverage different color schemes as part of the Hive design process. Each Hive can have a unique color scheme applied. To ...

    • Embed Visualizations from Unsupported Content Systems

      Question There are documented ways to embed visualizations from supported content systems like Tableau, IBM Cognos Analytics, and PowerBI, but what if a visualization is required from a BI solution that doesn't have an out of the box connector within ...

    • Hiding Titles within the Content Lanes

      Question As part of our Hive design, we're displaying reports using the Content Lane widget. Is it possible to hide the title and details about the reports so that just the thumbnail is shown? Answer Starting in the Digital Hive 2.1 release, it is ...

    • Change the Location of the Hive Launcher

      Question The Hive Launcher is on the right-hand side of the header beside the avatar. Is there any way to move it to the left-hand side? Answer As of the Digital Hive 2.1 release, the location of the Hive Launcher icon can be customized. New Hives ...