Class RevealView

This property allows customization of the grouping separator that appears between the category and field name. The default character used is "/" (forward slash).

revealView.categoryGroupingSeparator = " - ";
Copy

This property allows the customization of the default visualization when a new visualization is created.

revealView.defaultChartType = RVChartType.ColumnChart;
Copy

Event called when a datasource icon is needed. Using it, is the way to show your own icon for specific icon for datasources instead of the default ones. If this handler is not set, the default icons are used.

This event is triggered when Reveal is requesting credentials for a given data source. This is optional, as you can specify server side credentials for all your data sources, but if you don't know in advance credentials your users should use (for example if you want your users to enter their own credentials to the database) you can use this approach. Please note how credentials are requested and stored is something you need to do in your application, this event indicates credentials are needed, once the user entered credentials (or cancelled the flow) you must call the callback function received as a parameter, the function receives a boolean parameter that indicates if Reveal should try again (true) or the prompt was cancelled (false).

Event triggered when the dashboard property is set to a new instance of an RVDashboard. The event handler receives one argument:

• args: An instance of DashboardChangedEventArgs which contains the old and new dashboards.

Remarks: If the dashboard property is set to null, a new dashboard is created automatically with a title "New Dashboard".

Example usage:

revealView.onDashboardChanged = function (args: DashboardChangedEventArgs) {
  console.log('Dashboard has changed.');
  console.log('Old Dashboard:', args.oldValue);
  console.log('New Dashboard:', args.newValue);
};
Copy

Event called when the list of data sources is about to be displayed, this is the way to show your own UI for the list of data sources instead of the default UI. If this handler is not installed Reveal will use the default dialog for selecting a data source.

This event is triggered whenever the end user clicks on the 'Add visualization' button. You can create custom datasources to replace the default/existing ones. The argument is a callback function you're supposed to call and pass your custom collection of datasources which the end user will see.

revealView.onDataSourcesRequested = function (callback, trigger) {
    if(trigger == RVDataSourcesRequestedTriggerType.Visualization){
        var inMemoryDSI = new RVInMemoryDataSourceItem("employees");
        inMemoryDSI.title = "My InMemory Title";
        inMemoryDSI.description ="My InMemory Description";

        var sqlDs = new RVSqlServerDataSource();
        sqlDs.title = "Clients";
        sqlDs.id = "SqlDataSource1";
        sqlDs.host = "db.mycompany.local";
        sqlDs.port = 1433;
        sqlDs.database = "Invoices";

        callback(new RevealDataSources([sqlDs], [inMemoryDSI], true));
    }
};
Copy

This event is triggered when entering the visualization editor after selecting your data source. With this event you can customize the list of fields shown in the editor by removing, renaming, or reordering fields.

revealView.onFieldsInitializing = function (args) {
   var editedFields = args.fields;
   // a example of how you can delete fields
   // list of field names to be deleted  
   var exclude = ["Date", "Budget", "CTR", "Avg.CPC", "Avg. CPC", "Traffic"];
   // deleted the fields 
   editedFields = editedFields.filter(f => !exclude.some(e => e == f.name));
   //change name to show to Spend field to Spent
   var fieldToChange = editedFields.find(f => f.name == "Spend");
   if (fieldToChange) { fieldToChange.label = "Spent"; }
   //change order
   args.useCustomSort = true; //when set to true the fields are displayed in the same order   as in args.fields
   // if you want to re order only the first two positions
   var newOrder = ["Organic %", "Spend"]; // change the order for the first two position, 

   //for this example spend will be in the first position and Organic in the second position, 
   //the rest of the fields will be kept in the order they had in args fields 
   newOrder.forEach(function (field) {
     var moveFiled = editedFields.find(function (f) {
       return f.name === field;
     });
     if (editedFields.indexOf(moveFiled) !== -1) {
       editedFields.splice(editedFields.indexOf(moveFiled), 1);
       editedFields.unshift(moveFiled);
     }
   });
   args.fields = editedFields
}
Copy

This event is triggered whenever the end user clicks the 'Export Image' button in the 'Export Image' popup after annotating the screenshot (optional).

Note: This feature relies on server-side image rendering, so you will need to enable in your .NET Core or Java Reveal server component.

revealView.onImageExported = function (img) {
  console.log(img);
};
Copy

Will be called when a linked dashboard is needed either if the user tries to follow a dashboard link or tries to create a dashboard link while editing.

Note: This callback is expected to return a Promise of an RVDashboard.

revealView.onLinkedDashboardProviderAsync = function (dashboardId, linkTitle) {
    return RVDashboard.loadDashboardAsync(dashboardId);
};
Copy

This event is triggered when the end user maximizes or minimizes a visualization. If the action is maximizing, the visualization the title of the maximized visualization can be retrieved via the maximizedVisualization property of the revealView object.

revealView.onMaximizedVisualizationChanged = function () {
    maximizedVisualization = revealView.maximizedVisualization;
    msg = "";
    if (maximizedVisualization != null) {
        msg = maximizedVisualization.title;
    } else {
         msg = "no current maximized visualization";
    }
    console.log("Maximized visualization changed! " + msg);
};
Copy

This event is triggered when the overflow is clicked on the dashboard or visualization to expose the menu. Using this event, you can customize what is shown in that menu.

revealView.onMenuOpening = function (visualization, args) {
  for (var i = 0; i < args.menuItems.length; i++)
  {
    if (i == 2)
    {
      args.menuItems[i].isHidden = true;
    }
    if (args.menuItems[i].title === "Edit")
    {
      args.menuItems[i].title = "Edit Mode";
    }
  }

  var icon = new RVImage("https://svgsilh.com/png-512/1088490.png", "Icon");
  args.menuItems.push(new RVMenuItem("Cool Menu Item", icon, () => { alert('Example'); }));
}
Copy

This event is triggered when the end user clicks 'Save' or 'Save As'. However, if this event is set in RevealView then the callback server side (SaveDashboardAsync) will not be called, and the application will handle how the dashboard is saved, for example by implementing its own controller server side.

revealView.onSave = function (rv, saveEvent) {
   if (saveEvent.saveAs) {
       var newName = prompt("Save as", dashboardId);
	      if (!newName) return;
           saveEvent.serializeWithNewName(newName,
               function (b) {
                   saveDashboard(newName, b, saveEvent);
           });
       } else {
           saveEvent.serialize(
               function (b) {
                   saveDashboard(dashboardId, b, saveEvent);
               });
       }
};
Copy

Event fired when the user hover over a visualization and a tooltip is about to show up.

• 
  Copy

• revealView.onTooltipShowing = function (args) { *{
• var vizTitle = args.Visualization.Title;
• if(vizTitle == "noNeedForTooltipsHere")
• {

•    args.Cancel = true;
  

• } *} *```

Will be called when a url is needed if the user tries to follow a dashboard link. If this method is not provided, the link defined in the dashboard will be used. Note: This callback is expected to return the modified url. If the return value is null or empty, then the navigation is cancelled.

revealView.onUrlLinkRequested = function (args) {
    return args.url + "&modfiedUrl=true";
};
Copy

This event triggered when a visualization is about to request data, the event can be canceled if showing data for the visualization is not allowed. Using the args parameter you could cancel the data request by setting args.cancel to true and set the message to be displayed to the end user by setting cancel.errorMessage. See VisualizationDataLoadingEventArgs.

JavaScript:

revealView.onVisualizationDataLoading = function (args) {
    if(!hasAccess(args.visualization)){ 
         args.cancel = true;
         args.errorMessage = "You don't have access to this data";
    }
};
Copy

TypeScript:

    revealView.onVisualizationDataLoading = (args:Reveal.VisualizationDataLoadingEventArgs) => 
    {
         if(!hasAccess(args.visualization)){ 
              args.cancel = true;
              args.errorMessage = "You don't have access to this data";
     } 
 }
Copy

This event is triggered whenever the end user clicks on a data point over a maximized visualization and not in edit mode.

revealView.onVisualizationDataPointClicked = function (visualization, cell, row) {
  console.log("Visualization Data Point Clicked");
  console.log(visualization.title);
  console.log(cell.columnLabel);
  console.log(cell.value);
  console.log(cell.formattedValue);
  console.log("First cell in the row has label:" + row[0].columnLabel)
}
Copy

Event triggered when the visualization editor is closed. Using the args parameter you could check if this is a brand new visualization or the user edited an existing one. The isCancelled flag can be used to determine whether the changes were applied or discarded. The isCancelled is true when the later is true.

revealView.onVisualizationEditorClosed = function (args) {
    if(args.isNewVisualization == false) { 
    }
};
Copy

This event is triggered when the end user clicks on cancel("x") button upon editing/creating a visualization. Using the args parameter you could check if this is a brand new visualization or the user is editing an existing one. You could also cancel the process of exiting edit mode by setting args.cancel to true.

revealView.onVisualizationEditorClosing = function (args) {
    if(args.isNewVisualization == false){ //the user is editing
         args.resetVisualization = true; //puts the widget to the state when it was when the user started editing it
    }
};
Copy

Event triggered when the visualization editor is opened. Using the args parameter you could check if this is a brand new visualization or the user is editing an existing one.

revealView.onVisualizationEditorOpened = function (args) {
    if(args.isNewVisualization == false) { //the user is editing an existing visualization
    }
};
Copy

This event is triggered whenever the end user is trying to open the editor for a visualization. Using the args parameter you could check if this is a brand new visualization or the user is trying to edit an existing one. You could also cancel the process of entering the editor by setting args.cancel to true.

  revealView.onVisualizationEditorOpening = function (args) {
    if(args.isNewVisualization == false){
      //the user is trying to edit an existing visualization
      args.cancel = true; //prevent it
    }
};
Copy

This event is triggered when the chart visualization loads and is in the process of creating each series. With this event you can customize the color used for the series.

revealView.onVisualizationSeriesColorAssigning = function (visualization, defaultColor, fieldName, categoryName) {
  console.log("Visualization is creating a series");
  console.log(visualization.title);
  console.log(fieldName);
  console.log(categoryName);
  return defaultColor;
}
Copy

Returns the currently applied theme.