Dashboard Builder Widget (Legacy)

When embedded in an application, the Dashboard Builder widget enables users to modify existing dashboards or add new dashboards. Dashboards can contain reports or other content.

Embeddable Script

<!-- Tag -->
<qrvey-builders settings="config"></qrvey-builders>

<!-- Config -->
<script>
var config = {
  apiKey: "<API_KEY>",
  domain: "<DOMAIN>",
  userId: "<USER_ID>",
  appId: "<APP_ID>"
};
</script>

<!-- Launcher -->
<script type="text/javascript" src="https://<WIDGETS_URL>/widgets-launcher/app.js"></script>

Configuration Object

Property	Value	Required	Description
apiKey	String	Yes, if qvToken is not provided	Your organization’s unique API key required to access the Qrvey platform.
qvToken	String	Yes, if apiKey is not provided	Encrypted token used for secure authentication.
appId	String	Yes	ID of the Qrvey application that contains the asset you want to embed.
domain	String	Yes	The base URL of your Qrvey instance.
userId	String	Yes	ID of the Qrvey User that owns the application being embedded.
clientid	String	No	Unique identifier for the tenant end user. Required for using the End User Personalization and Download Manager features. The clientid must be set to a unique value for each tenant end user.
dashboardId	String	No	ID of a specific dashboard to open to. If omitted, the end user is taken to the "dashboard selection" page. In practice, you should always send the user to a specific dashboard.
timezone	Object	No	Overrides the timezone setting in Qrvey Admin Center. For more information, see Configuring Time Zone Settings.
privatePages	Boolean	No	Pre-defines the privacy state of new dashboards. If true, every new dashboard will be private (and unavailable to unauthenticated users). Defaults to false, and therefore dashboards are published in a public state.
doNotAllow	Array(String)	No	Hides or blocks certain features. Currently only supports: CREATE_CHART which hides the Create Chart button. Example: ["CREATE_CHART"]
styles	Object	No	Allows users to modify part of the look and feel of the widget. Every property supports a string (hexadecimal color) or the name of a color. For details, see The Styles Object below.
userFilters	Array(Object)	No	Collection of custom filters that the system will apply to the visualized data. For more information, see Working With Filters in Embedded Scenarios.
customTokens	Object	No	Sets custom threshold values in Bullet and Dial charts. For more information, see Using Custom Tokens.
authenticatedSession.email	String	No	The email property in the authenticatedSession object specifies the email address to associate with the widget. If an address is not specified, exports are sent to the email address associated with the user ID.
themeId	String	No	Theme ID to use in the component. For more information, see Accessing a Theme Programmatically.
fitPanelButton	Boolean	No	If false, hides the Fit to Panel button on charts and panels. Defaults to true.
featurePermission	Object	No	Configure which features are available in the widget. For more information, see The Feature Permission Object.

Styles

Property	Required	Description
main_color	No	Sets main color using a hex color value.
main_text_color	No	Sets main text color using a hex color value.
secondary_color	No	Sets secondary color using a hex color value.
icon_color	No	Sets icon color using a hex color value.
tab_bar_color	No	Sets tab bar using a hex color value.
tab_font_color	No	Sets tab font color using a hex color value.
error_color	No	Sets error color using a hex color value.

Feature Permission

The following table describes the properties of the featurePermission object.

Property	Value	Required	Description
liteVersion	Boolean	No	Hides all elements that are managed by feature permissions if true. Defaults to false. For more details, check the example given below this table.
navigation	Object	No	Defines navigation-related features that can be hidden.
navigation.hideNavigationTab	No	Boolean	Hides the entry method to the navigation tab in the top bar of the widget if true. Defaults to false.
userManagement	Object	No	Defines user management related features that can be hidden.
userManagement.hideUserManagementTab	Boolean	No	Hides the entry method to the user management tab in the top bar of the widget if true. Defaults to false.
pagesAndApplication	Object	No	Define pages and application-related features that can be hidden.
pagesAndApplication.hidePublishAppButton	Boolean	No	Hides button “Unpublish / publish" application button if true. Defaults to false.
pagesAndApplication.hidePublishPageButton	Boolean	No	Hides “publish page” button if true. Defaults to false.
pagesAndApplication.hideCopyPageLink	Boolean	No	Hides the UI interfaces where the user can get the link of a page if true. Defaults to false.
pagesAndApplication.hideLaunchButton	Boolean	No	Hides the button to access the page view if true. Defaults to false.
pagesAndApplication.hideCreateManagePages	Boolean	No	Hides all options to create pages if true. Defaults to false.
pagesAndApplication.hidePageStatus	Boolean	No	Hides Text status if true. Defaults to false.
pagesAndApplication.hidePagesBar	Boolean	No	Hide bottom bar pages if true. Defaults to false.
pagesAndApplication.hideThreeDotMenu	Boolean	No	When true, hides the three-dot menu, including in edit mode. Defaults to false.
pagesAndApplication.hideCustomDataset	Boolean	No	Hide Custom Dataset option. Defaults to false. Available starting with version 9.2.2.
canvas	Object	No	Defines canvas related features that can be hidden.
canvas.hideManageCanvas	Boolean	No	If true, hides the following options: Grid, Responsive View, Discard Changes. Defaults to false.
downloads	Object	No	Contains params to control display of the download and schedule exports feature.
downloads.hideGeneralDownload	Boolean	No	Displays the download access points in the widget if true. Defaults to false.
downloads.hideSchedule	Boolean	No	Hides the scheduling export option if true. Defaults to true.

To hide all features, set the liteVersion property to true. For example:

const widgetConfig = {
   domain: "DOMAIN",
   appid: "APP_ID",
   userid: "USER_ID",
   featurePermission: {
     liteVersion: true,
   },
}

Tip: To hide most features, set the liteVersion property to true and list the exceptions you want to show to false. For example:

const widgetConfig = {
   domain: "DOMAIN",
   appid: "APP_ID",
   userid: "USER_ID",
   featurePermission: {
     liteVersion: true,
     userManagement:{
       hideUserManagementTab: false
     }
   },
}

Events

The widget supports custom events to update keys of the configuration, you can dispatch an event using your own user interface to modify the behavior.

• atApplyUserFilters() — Enables changes to the userFilters property.

  window.dispatchEvent(new CustomEvent('atApplyUserFilters', {detail: userFilters}));