The Dashboard Builder

The Dashboard Builder makes it easy to combine multiple Qrvey Composer components, like forms, charts and metrics, into beautiful web pages, each with their own unique sharable URL. You can also combine multiple dashboards into a complete information application with the Navigation feature.

Dashboards

1. Click the Dashboard Builder icon in the left navigation bar. The Dashboards page will open, showing all dashboards within the application. Click any dashboard to open it up.

The Dashboard Builder feature consists of three top-level tabs:

• Dashboard — to design and publish dashboards.
• Navigation — to create navigation menus that combine multiple dashboards.
• User Management — to grant and restrict end users’ access to dashboards.

Note: If this is a new application, you will not have any dashboards in the list.

Create a Dashboard

1. In Dashboard builder, click Create New Dashboard.
2. The Create New Dashboard dialog displays with the following two options:
   • Fixed Grid. A fixed canvas that remains constant regardless of the device used to display the dashboard.
   • esponsive Grid. An adaptive canvas that is suitable for displaying dashboards on multiple devices, such as tablets and phones.
3. Select a grid option and click Create. An empty canvas displays, ready for you to create your dashboard.

Note: You can change the grid option after you’ve created the dashboard. Open the dashboard, click the Grid menu, and select Change to Responsive Grid or Change to Fixed Grid.

Dashboard Options

1. Click the three-dot menu in the upper-right corner of the desired dashboard card. A shortcut menu appears, enabling you to Edit, Rename, Delete, Duplicate, Copy Dashboard Link, Dashboard Preview, as well as copy the code snippet to embed it as a Widget.

Design Mode and Interaction Mode

Dashboard Builder provides two modes for working with dashboards: Design mode for building and configuring dashboards; and Interaction mode to view and interact with the dashboard just as you would in Dashboard View. To open Interaction mode, click the Interact button at the top of the page. To return to Design mode, click the Design button.

Note: Any changes made in Interaction mode are not persisted when returning to Design mode.

The Data Panel

This panel datasets that you can work with and enables you to search for a particular dataset. Toggle the arrow to the right of a dataset to display all charts and summary panels that use its data. You can perform the following:

• Drag a panel directly onto the canvas.
• Hover over a panel to display the name of the chart, chart type, and description (if available).
• Click the Go to Dataset icon to open the design page for a given dataset.
• Click the star icon to add it to your favorites. Click the orange star icon button at the top of the Data Panel to display only favorites.

The Filters Panel

Note: This feature is different than a Filter Control.

The Filters panel enables you to add filters to a dashboard so that end-users can interact with them within a published application. For more information, see Overview of Filters.

Panel Options:

• Add Filter — Lets you configure a filter. You can also set the scope of the filter to All dashboards or Current dashboard.
• Filter Panel Settings — Customizes how the Filters panel displays, including the color codes, within the dashboard.
• Disable All Filters — Click the three-dot menu in the Filters panel and click Disable All Filters.
• Delete All Filters — Click the three-dot menu in the Filters panel and click Delete All Filters.

Canvas Configuration Options

The following options are available for an object that is currently selected on the canvas.

The Menu Bar

• File
  • New Dashboard — Creates and opens a new dashboard, preserving the current one.
  • Duplicate Dashboard — Clones the current dashboard, preserving the current one.
  • Dashboard Settings — Adjusts pixel resolution of the dashboard.
  • Privacy — If private, requires authentication or clientid to view the dashboard as a widget. If public, anyone with a link can see the dashboard. Defaults to Public.
    You must Publish the Dashboard for an update to Privacy to take effect.
  • Download — Shortcut to the Download feature.
  • Embed — Creates a copy & Paste widget embed.
  • Copy Dashboard Link — Past the link into the browser to see an em`bedded view of the dashboard, with public access permission. If Privacy is set to Private, the dashboard will not be visible.
• Edit — Provides common edit commands for selected items, such as: Copy, Paste, Cut, Delete, Duplicate, or Select all.
• Grid — Provides the following options for configuring the grid that is displayed on the canvas:
  • Snap to Grid — enables or disables the snap-to-grid functionality.
  • Show/Hide Grid — Toggles grid square visibility.
  • Switch to Responsive/Fixed Grid — Toggles the grid type.
• Insert — Enables you to create a chart or other items on the grid area. For descriptions of each item, please see:
  • For most items, please see the Canvas Menu below.
  • Tabs - Inserts tabs into your dashboard. Use the configuration panel to set Font, Selector, Background, Border Colors, and Tab Size. Rename, add +, or duplicate tabs from the three-dot menu.
  • Header — Inserts a Page Header. Use the configuration panel to set Background Color, Logo, Image, Width, and Height.
  • Subscriptions — Inserts the subscriptions button. For details please see Subscribing to Exports.
• Arrange — Lets you set the depth level and alignment of items on the grid. (Click to select an item on the grid to enable this).

Canvas Menu

• Grid Options — Select a pixel resolution from the dropdown menu. You can change this setting at any time, though this may adjust page size or reposition items, which is an action that cannot be reverted.
• Undo and Redo — Conventional Undo and Redo buttons, which can undo and redo up to 50 actions. You can also use the standard undo/redo keyboard shortcuts.
• Create Chart — Inserts a new chart. The edit chart modal will open automatically.
• Image — Inserts a new image box. Use the Configuration panel upload via URL or form local machine, as well as the Aspect (Contain, Cover, or Fill).
• Text — Inserts a new textbox. Use the Configuration panel to adjust text format.
• Button — Inserts a new button, to navigate to another URL. Use the Configuration panel set its URL.
• Style Themes — Choose a custom theme. For details, please see Managing Themes.
• Responsive View — Select Desktop, Tablet, or Mobile to preview how it will appear. Click the Responsive View icon in the toolbar and select Customize Breakpoints Resolution so configure the min and max breakpoints.
• Filter Control — Inserts a filter control for end-users. Options are: Date Picker, Value List, and Input Box. The Configuration panel updates to display Filter Control Configuration options.
• Align Objects — The Align components feature helps arrange the components with more precision. To align components, select them on the canvas and click the Align Objects icon on the toolbar. Options include align left, align center, align right, align top, align middle, and align bottom.
• Arrange Objects — Arrange overlapping components with Send to Front and Send to Back. The component you want to arrange must be selected.
• Grid — Toggle Show Gridlines and Snap to Grid within the canvas, as well as between Responsive Grid & Fixed Grid.
• Responsive View — Select Desktop, Tablet, or Mobile to preview how it will appear. Click the Responsive View icon in the toolbar and select Customize Breakpoints Resolution so configure the min and max breakpoints.
• Download — Enables you to download the dashboard data in a number of formats. If multiple datasets ar used, they are exported as separate files.

Preview a Dashboard

Dashboard Builder enables you to preview a single dashboard in a browser, so you can see how the page will appear to the end user. Note that the preview feature requires you to publish the application first, which commits the application to the server. You cannot resume editing the dashboard until you unpublish the application.

NOTE: Version 8.3 introduces Interaction mode, which provides a quick way to preview your dashboard within the Dashboard Builder interface. For more information, see "Using Design Mode and Interaction Mode" earlier in this article.

1. Click the Dashboard icon in the left-hand menu to display the Dashboard list.
2. Click the Publish Application button in the upper right corner and the changes are saved.
3. Open the dashboard that you wish to preview.
4. Click the File menu and click Copy Dashboard Link.
5. Open a new browser tab and paste in the link. The dashboard displays in the browser.
6. To continue editing the dashboard, you must unpublish the application. On the Dashboard page, click Unpublish.

Preview an Application

Dashboard Builder provides a preview link that you can use to view an application in a browser. The Preview feature enables you to see how the application will appear to the end user. Note that the preview feature requires you to publish the application first, which commits the application to the server. You cannot resume editing the application until you unpublish it.

NOTE: Version 8.3 introduces Interaction mode, which provides a quick way to preview your dashboard within the Dashboard Builder interface. For more information, see "Using Design Mode and Interaction Mode" earlier in this article.

1. Click the Dashboard icon in the left-hand menu to display the Dashboard list.
2. Verify that the pages you want to preview are included in the Navigation Menu.
3. Click the Publish Application button. The application is saved, and the Link button is activated.
4. Click the Link button. The application displays in the browser.
5. To continue editing on application, click Unpublish.

Publish an Application

Before an application can be made available to end users, you must publish it. The Publish feature commits the application to the server and enables the Embed and Preview features.

1. Verify that the pages you want to preview are included in the Navigation Menu.
2. Verify that you have granted and/or restricted access to the desired users.
3. Click the Publish Application button and the application is saved. You may now preview the application using the Link option, or embed the application using the Embed options.

Navigation

You can combine multiple pages together into a complete information application by using the Navigation tab to add a simple menu that will appear on all of your pages.

To begin, click on the Navigation tab, then choose “Allow users to see navigation menu”. Next, select the pages you’d like to add from the left column and drag them onto the right column. You can reorder them in any order you’d like.

Once you have your menu ordered correctly, you can then publish your application by clicking Publish Application in the top toolbar. You can use the link icon to launch your application and see what your users will see.

After your application is published, your users will see a drop-down menu atop all of your pages so that they can easily navigate between the pages you’ve selected. Only published pages will appear to users.

Note: In order to publish your application, you will need to add at least one page to the navigation menu, even if it will not be visible to users.

User Management

In the User Management tab, you can not only create users and groups but also restrict access to certain portions of your application. For instance, you may wish to hide individual pages or components from certain users or allow certain groups of users to access only specific datasets.

Authentication

In this tab, you can enable and disable authentication as well as set authentication settings. In version v5.3, we added a second authentication method called OpenId that will allow you to configure a third-party OpenId provider as an additional authentication method for Qrvey. To use OpenId, first, an Admin user must enable it from the admin app. As a creator, you can allow your users to authenticate with any of the methods available.

• Qrvey Authentication — The traditional way to authenticate users. When enabled, users must log in with an existing Qrvey account. Read more on these settings in the section below. If you require authentication for your users, the Qrvey method sets it as default when you turn on the option. If an end-user wants to login on a page that has Qrvey login as the authentication method, a standard Email & Password following login form will appear. Qrvey will add users that authenticate for the first time within the platform with an OpenId provider to a group called OpenId. If the group does not exist, it will create it and add the users to the group. A creator is able to change the name of the group later on, and new users can be added to it regardless of the name.

• OpenId Authentication — OpenId is the new authentication method and if an admin user enabled it from the admin portal, a new option called “Enable OpenId Log In” will appear. When enabled, users will be able to use their existing credentials based on the configured provider. For example, if using Google as the OpenId provider for end-users, the Login with Google button will appear.

• Both Methods — If both methods (Qrvey and OpenId) are enabled, both Email & Password and Auth0 buttons will appear.

• Settings — The Allow Signup, Login Dashboard, and Forgot Password are only available with Qrvey Auth, and you will need to add new users manually in the User Table tab. When using OpenId, these settings will not affect the end-users login. If an end-user wants to recover their password, they should use the configured OpenId provider.

User Table

The User Table tab is where you will add and manage the users of your application.

To add a new user, click the Add New User button and enter the user’s information as shown below. When a new user is added Qrvey will automatically send an email, to the address you entered, with an auto-generated password. Upon their first login, the user will be prompted to change their password.

Note: Users that are not assigned to a group will have full access to your application. It is recommended that you create groups and permissions first (see Groups below), then assign new users to those groups as you create them.

Once added, you can activate, deactivate and delete users by using the Bulk Actions drop-down menu. You can also use this menu to quickly assign multiple users to groups.

Groups

You can organize users into groups in the Groups tab and assign permissions to them.  Permissions cannot be assigned to users individually.

To create a new user group, click the orange Create New Group button. You’ll then be shown the screen below, where you can give your group a name, assign users to it, and create permissions.

In the Users pane, you can search for existing users and add them to your group.

In the Permissions pane, you can add restrictions in two areas: datasets and pages. In the Data section, you’ll see a list of all the datasets currently connected to your app. You can choose to show or hide data from each dataset individually.

In the Pages section, you’ll see a list of all the pages in your application. You can choose to provide read/write access or hide each of these pages individually.

In the Actions section, you’ll see the different filter types, and you will be able to enable or disable these filters for the end-users. So they will not be able to use those types of filters in your application.

The following are the filter types supported by this settings:

• Global Filters: Filters that apply to all pages in your application.
• Page Filters: Filters that apply to a page inside your application.
• Tab Filters: Filters that apply to the current tab of a page. If page filters are disabled, this option will be disabled too.
• Panel Filters: Filters that apply only to the chart.
• Pre - Defined Filters: Filters that were added by a creator.

Any changes you make to users or permissions are updated in real-time as you make them.

Subscribe to Exports

When creating a dashboard, the Creator can add a subscription option to it. If the option has been added you can see the subscribe icon in the three-dot menu on your page. From this icon you can configure a scheduled delivery of exports and manage any existing subscriptions.

The option is only available if you are authenticated. If you don’t see the icon you are either not authenticated, or the creator has not turned the option on.

Configure Subscriptions

Choosing the Subscribe to Pages option from the menu opens up the dialog box to configure the subscription.

Each subscription configuration must be given a name. This name is used to identify the configuration if it needs to be modified or managed later. Choose a name that is meaningful to you and you can remember later.

You can choose any number (or all) of the pages and/or any number (or all) of the charts to be included in your scheduled export. Choose the format(s) for your export. The default format is PDF. If exporting charts and not only entire pages, you may also choose CSV summary or CSV raw formats. You have to have at least one format selected for subscriptions to work. Note that not all charts support CSV summary or CSV raw format and they won’t be exported if those are your only selected export formats.

The next step is to configure the schedule of the exports:

• Select the date to start exporting and sending the objects.
• Choose the time for the export. The time zone is the same as yours.
• You can choose to continue the exports until you cancel it (choose Never from the End dropdown) or stop the delivery after a certain number of repetitions.
• Choose the schedule of repetitions; every 1 week, every 15 days, etc.

Next, enter any email addresses that you want the exports to be delivered to in the To field of the email section. Enter a subject for the email and the body of your email using the rich text box provided.

Once done with entering all of the needed information click on the Apply button to finalize the configuration of your subscription. At the chosen time all of the selected pages will be exported to one file in PDF format. Each selected chart will be exported to an individual file, also in PDF format, and all of the files are packaged in a zip file and the link to download the file is added to the email that you set up. The download link is valid for 7 days from the date of creation.

The orange Apply button becomes activated only when all the required information has been filled in. The required fields are highlighted to notify you there’s information missing.

Manage Subscriptions

Click Manage Subscriptions from the menu to open the following dialog.

All of the active subscription configurations that you have created in the past are listed and can be managed from here. The management options can be found in the three-dot menu to the right of each subscription. The Unsubscribe command gives you the option to only remove yourself, or all of the subscribers. If there are multiple subscribers and you remove your own email address from the list, others will continue to receive the emails. Once every email account has been removed from the list, the subscription is removed.

The Edit command opens the configuration dialog for the selected subscription and lets you modify it and the Delete command removes the subscription and all of its subscribers, thereby stopping the scheduled delivery of the emails.

Configure Actions

You can configure chart interactions on the Dashboard Builder by setting up actions when users click on a data point or a chart panel area in the End User pages.

To configure an action, follow these steps:

1. Open Dashboard Builder and click anywhere on the chart panel you wish to apply an action to.
2. Under Data > Dashboard Actions, choose On Click. The Action configuration page will open, which consists of.
   • Chart Name & Type
   • Trigger Type (currently, "on-click" is the only type of trigger available)
   • Action Type
3. For each Action Type, toggle its radio button on/off, and configure as desired.
   • Dashboard Drill
   • Filter By
   • Go To URL
   • Chart Drill Down
   • See Data
4. Click Back to Dashboard to return to the Dashboard Builder page. Your configurations will be save automatically.
5. Click Publish Dashboard to apply the actions, then Interact to test them out.

If one action is configured, the action will occur immediately. If multiple actions are configured, a tooltip menu will open, allowing the user to choose which action they'd like to perform.

Note: Not every action is available for every chart type.

Dashboard Drill

• Modes
  • Off — Disables this action.
  • Go to Dashboard — Redirects to an existing dashboard within the application.
• Options
  • Select Dashboard — Choose another dashboard in the application to redirect to.
  • Menu Label — Creates a custom label for the tooltip menu that displays when multiple actions are configured.
  • Apply Filters — If configured, redirects to a dashboard where charts are filtered based on the this points. The filter logic configured here will be merged in addition to those defined in the target dashboard.
    Note: only charts using the same dataset can be filtered.

Dashboard Drill in Maps

The Dashboard Drill action on maps allows users to interact with the chart’s data point (dot or bubble depending on the map’s type) by clicking on it, and then the action will then redirect them to the targeted dashboard defined by the creator. If there is more than one action specified in the chart, a contextual menu will appear when users click on the symbols showing all the available dashboard actions.

Filter By

• Modes
  • Off — Disables this action.
  • Only Chart — Applies a filter to the chart data.
  • Full Dashboard — Applies a filter to all charts within the Dashboard that use same data.

Filter By in Bar Charts

The Filter By action in bar charts enables users to filter data by clicking on a data point (bar). For example, selecting one of three categories will filter the chart according to the chosen value.

Action Behavior

• Scope of Filtering: The filter can be applied to either the chart where the action is triggered or the entire dashboard, filtering all other charts on the same dashboard. This depends on the configuration set by the creator.
• Multiple Actions: If multiple actions are defined for the chart, clicking on a bar will display a contextual menu showing all available actions. Users can then select the desired action.

This functionality enhances interactivity and provides a seamless way to explore and analyze data within dashboards.

Filter By in Tables

The Filter By action is supported for grouped tables. When this action is defined for a grouped table, users can click on any cell value, and the table will automatically filter by all the categorical values located to the left of the column where the click occurred.

For instance, clicking on the cell with the value "Health and Beauty" in the Product Line column will filter the table to include that value along with all its parent values from the grouping hierarchy. These filter criteria will be added automatically, and if a filter panel is available, the applied filters will be visible there. The same behavior applies when clicking on any cell in the Total column. If a user clicks on a value in the first column, only that specific value will be added to the filters.

Go to URL

• Modes
  • Off — Disables this action.
  • Go To URL — Redirect users to an external page.
• Options
  • Title — The name displayed to users in the menu options
  • URL — Sets an external URL where you want the users to be redirected.
  • Open In — Choose from: Self (open in current tab), New Tab, or a New Window.
• Notes
  • In case of Table Charts, choose a column the Dashboard Action applies to from the Column Link dropdown.
  • The URL must be a valid one for the action to work.
  • As part of the URL, you can use data or system tokens.
  • You can set the URL to open on the same page the user is currently on, a new tab, or a new window.

Go to URL in Maps

The Go to URL action functions similarly in Dot Maps and Bubble Maps but behaves differently compared to other chart types. A creator can configure a single Go to URL action to redirect users to a targeted dashboard when they click on a data point. Alternatively, a multi-level behavior can be defined, where the action constructs a hierarchical navigation through the context menu based on dataset columns.

Multi-Level Behavior

To set up a multi-level behavior, creators must configure the following fields:

• Levels: Specifies the data for each level. Only geolocation columns are allowed. Up to five levels can be defined, with each level requiring a unique column.
• # Records per Level: Determines how many records are displayed per level, based on the sort method.
• Sort Records: Sets the sort order for records at each level, either Ascending (default) or Descending.

Action Execution

• If Go to URL is the only defined action, users are redirected to the target dashboard immediately upon clicking a data point.
• If multiple actions are defined, a contextual menu appears, displaying labels specified by the creator. Users can then select the desired action.

Multi-Level Navigation

The Go to URL action includes a Multi-Level setting for geographical hierarchies (e.g., State, City, Zip Code). When enabled, users navigate through a multi-level contextual menu. Clicking on each level reveals the next, until the final level is reached, where users are redirected to the specified URL.

This functionality enables intuitive exploration of hierarchical data, enhancing user navigation and dashboard interactivity.

Chart Drill Down

• Modes
  • Off — Disables this action.
  • Default: Drill down on data, while the chart remains the same. Select the fields/columns available for the users to choose from.
  • Custom: Drill down into data with configurable levels that dynamically update the chart based on where the user clicks.
• Options
  • Default > Select Columns to Display — Add or remove columns as desired.
  • Custom > Layer(s) — Add or remove columns to serve as drill down layers.

See Data

• Modes
  • Off — Disables this action.
  • See Data — Displays a Tabular View of the dataset with Filter, Sort, and Select Columns options, which are not saved and do not affect the dataset.
• Options
  • Menu Label — Creates a custom label for the tooltip menu that displays when multiple actions are configured.