Showing/Hiding User Interface Elements

The $.ig.RevealView component can be used to enable or disable different features and/or UI elements towards the end user. Many of the available properties are of the Boolean type and can be very straightforward to use, but others not so much.

The revealView instance and the DOM element created below are assumed by all the code snippets in this topic:

var revealView = new $.ig.RevealView("#revealView");
...
<div id="revealView" style="height:500px;" />
Note

Depending on your css layout approach you might need the element hosting the RevealView to be "positioned" by setting a position attribute that is not static (like relative or absolute).

canEdit

This property can be used to disable the user's ability to edit dashboards.

Editing a dashboard through the UI

revealView.canEdit = false;

showEditDataSource

This property can be used to disable the editing of a dashboard datasource.

Editing the dashboard datasource

revealView.showEditDataSource = false;

showExportImage

This property can be used to disable exporting the dashboard to an image.

Exporting a dashboard to image

revealView.showExportImage = false;

showExportToPowerpoint

This property can be used to disable exporting the dashboard to PowerPoint.

Exporting a dashboard to PowerPoint

revealView.showExportToPowerpoint = false;

showExportToPDF

This property can be used to disable exporting the dashboard to PDF.

Exporting a dashboard to PDF

revealView.showExportToPDF = false;

showExportToExcel

This property can be used to disable exporting the dashboard to Excel.

Exporting a dashboard to Excel

revealView.showExportToExcel = false;

canCopyVisualization

This property can be used to disable the ability to copy a visualization and later paste it in the current dashboard or a different one.

Copying an existing visualization through the UI

revealView.canCopyVisualization = false;

canDuplicateVisualization

This property can be used to disable the ability to duplicate a visualization in the current dashboard.

Duplicating an existing visualization through the UI

revealView.canDuplicateVisualization = false;

canAddPostCalculatedFields

This property can be used to disable the ability to add a new post-calculated field in the current dashboard.

Accessing post-calculated fields through the UI

Post-calculated fields are new fields in the data set and are created by applying a formula on already summarized values.
For further details, please refer to the Reveal Help.

revealView.canAddPostCalculatedFields = false;

canAddCalculatedFields

This property can be used to disable the ability to add a new pre-calculated field in the current dashboard.

Accessing pre-calculated fields through the UI

Pre-calculated fields are new fields in the data set and are evaluated before executing data editor aggregations.
For further details, please refer to the Reveal Help.

revealView.canAddCalculatedFields = true;

showFilters

This property can be used to show or hide the Dashboard Filters UI to the user.

Showing Dashboard Filters in the UI

Dashboard filters allow you to slice the contents of the visualizations in a dashboard, all at once.

revealView.showFilters = true;

canAddDashboardFilter

This property can be used to show or hide the Add Dashboard Filter menu item.

Showing Add Dashboard Filter in the UI

revealView.canAddDashboardFilter = false;

canAddDateFilter

This property can be used to show or hide the Add Date Filter menu item.

Showing Add Date Filter in the UI

revealView.canAddDateFilter = false;

Preselected Filters

You can specify which values are initially selected among existing Dashboard Filters when loading a dashboard.

Showing a Dashboard Filter preselected in the UI

The following code snippet illustrates how to load a dashboard “AppsStats”. By setting the “Territory” dashboard filter’s selected value to be “Americas”, the dashboard will be showing data filtered by “Americas”.

var dashboardId = "AppsStats";

$.ig.RVDashboard.loadDashboard(dashboardId, function (dashboard) {
    dashboard.filters.getByTitle("Territory").selectedValues = ["Americas"];

    var revealView = new $.ig.RevealView("#revealView");
    revealView.dashboard = dashboard;
}, function (error) {
});

availableChartTypes

This property can be used to filter the visualization types available to the user.

Switching visualizations through the UI

You can use a brand new Array that includes only the visualizations you want to be available:

revealView.availableChartTypes = [$.ig.RVChartType.BulletGraph, $.ig.RVChartType.Choropleth];

In addition, you could remove some of the charts as shown below:

var toRemoveChartTypes = [$.ig.RVChartType.AreaChart, $.ig.RVChartType.Indicator, $.ig.RVChartType.IndicatorTarget, $.ig.RVChartType.ScatterMap, $.ig.RVChartType.Choropleth, $.ig.RVChartType.TreeMap];
revealView.availableChartTypes = revealView.availableChartTypes.filter(t => !toRemoveChartTypes.includes(t));

canChangeVisualizationBackgroundColor

A flag indicating if the end-user can change the background color for a given visualization in the visualization editor (under Settings tab), if enabled the list of colors specified as BackgroundColors in RevealTheme will be displayed as a suggested palette, but the user can also use an advanced mode to select any color.

Default value of this property is false. So to enable the end user to specify a background for a visualization you need to set it to true.

revealView.canChangeVisualizationBackgroundColor = true;

This feature depends on Spectrum color picker - v 1.8.0. In order to use it you'll need to make sure to have it loaded in the browser. Like:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>

Background color for visualization could also be controlled programmatically by calling revealView.setVisualizationBackgroundColor(RVVisualization, color). The color argument should be a hex string like "#ffffff".