🍉 Meet Flexmonster Pivot Table & Charts 2.9.Check out all hot features!
Get Free Trial
  1. API reference
  2. Welcome
    1. Getting started
    2. Get Flexmonster
    3. Quick start
    4. System requirements
    5. Troubleshooting
    6. Managing license keys
    7. Migrating from WebDataRocks to Flexmonster
  3. Integration with frameworks
    1. Available tutorials
    2. Integration with Angular
    3. Integration with React
    4. Integration with Vue
    5. Other integrations
      1. Integration with Python
        1. Integration with Django
        2. Integration with Jupyter Notebook
      2. Integration with React Native
      3. Integration with AngularJS (v1.x)
      4. Integration with TypeScript
      5. Integration with R Shiny
      6. Integration with jQuery
      7. Integration with Ionic
      8. Integration with Electron.js
      9. Integration with Webpack
      10. Integration with RequireJS
  4. Connecting to Data Source
    1. Supported data sources
    2. JSON
      1. Connecting to JSON
      2. Connecting to JSON using Flexmonster Data Server
      3. Data types in JSON
    3. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Flexmonster Data Server
      3. Data types in CSV
    4. Database
      1. Connecting to SQL databases
      2. Connecting to a MySQL database
      3. Connecting to a Microsoft SQL Server database
      4. Connecting to a PostgreSQL database
      5. Connecting to an Oracle database
    5. Flexmonster Data Server
      1. Introduction to Flexmonster Data Server
      2. Getting started with Flexmonster Data Server
      3. Flexmonster Admin Panel Guide
      4. Data sources guide
      5. Security and authorization guide
      6. The Data Server as a DLL
        1. Getting started with the Data Server as a DLL
        2. Referencing the Data Server as a DLL
        3. Implementing the API controller
        4. Implementing the server filter
        5. Implementing the custom parser
        6. DLL configurations reference
        7. The controller's methods for request handling
      7. The Data Server as a console application
        1. Installing the Data Server as a console application
        2. Configurations reference
        3. Data sources guide
        4. Security and authorization guide
      8. Troubleshooting the Data Server
    6. MongoDB
      1. Introduction to Flexmonster MongoDB Connector
      2. Getting started with the MongoDB Connector
      3. Embedding the MongoDB Connector into the server
      4. Configuring the MongoDB Connector
    7. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Flexmonster Accelerator
      3. Referencing the Accelerator as a DLL
      4. Configuring the authentication process
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    8. Custom data source API
      1. Introduction to the custom data source API
      2. A quick overview of a sample Node.js server
      3. A quick overview of a sample .NET Core server
      4. Implement your own server
        1. Implementing the custom data source API server
        2. Implementing filters
        3. Supporting more aggregation functions
        4. Supporting multilevel hierarchies
        5. Returning data for the drill-through view
        6. Testing your custom data source API server
    9. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
    10. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with the Accelerator
      3. Configuring Mondrian roles
      4. Configuring username/password protection
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    11. Connecting to other data sources
  5. Accessibility
    1. Accessibility overview
    2. Keyboard navigation
  6. Configuring report
    1. What is a report
    2. Data source
    3. Slice
    4. Options
    5. Mapping
    6. Number formatting
    7. Conditional formatting
    8. Set the report for the component
    9. Get the report from the component
    10. Share the report
    11. Date and time formatting
    12. Configuring global options
    13. Export and print
    14. Calculated values
    15. Custom sorting
  7. Charts
    1. Available tutorials
    2. Flexmonster Pivot Charts
    3. Integration with Highcharts
    4. Integration with amCharts
    5. Integration with Google Charts
    6. Integration with FusionCharts
    7. Integration with any charting library
  8. Customizing
    1. Available tutorials
    2. Customizing the Toolbar
    3. Customizing appearance
    4. Customizing the context menu
    5. Customizing the grid
    6. Customizing the pivot charts
    7. Localizing the component
  9. Security
    1. Security in Flexmonster
    2. Security aspects of connecting to an OLAP cube
      1. Ways of connecting to an OLAP cube
      2. The data transfer process
      3. Data security
      4. Data access management
  10. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.8 to 2.9
    4. Migration guide from 2.7 to 2.8
    5. Migration guide from 2.6 to 2.7
    6. Migration guide from 2.5 to 2.6
    7. Migration guide from 2.4 to 2.5
    8. Migration guide from 2.3 to 2.4
    9. Migration guide from 2.2 to 2.3
  11. Flexmonster CLI Reference
    1. Overview
    2. Troubleshooting the CLI
    3. flexmonster create
    4. flexmonster add
    5. flexmonster update
    6. flexmonster version
    7. flexmonster help
  12. Documentation for older versions
Table of contents

Share the report

Starting from version 2.9, Flexmonster allows you to share reports.

This guide describes the following:

The idea of the report-sharing feature

Let’s assume you have configured a report in Flexmonster and want to show the result to your team. It is possible with the report-sharing feature.

Its idea is the following: 

  • Flexmonster Data Server is needed for report sharing. This server-side tool is responsible for saving and loading reports.
  • When the user shares a report, Flexmonster saves this report to the Data Server and provides a link to the saved report.
  • When the link is opened in the browser, Flexmonster loads the report from the Data Server. As a result, the component will visualize the shared report.

To demonstrate how report sharing works, we added this feature to our main demo. Feel free to try: click the Share tab, copy the provided link, and send it to your teammates. If they follow your link, they will see our demo with your report. Note that in this case, reports will be saved to the Data Server configured on our side.

Now let’s see how to add the report-sharing feature to your project.

How to share the report

Step 1. Install Flexmonster Data Server

To share reports, you need Flexmonster Data Server version 2.9 or higher. If you do not have the Data Server, complete this guide: Getting started with Flexmonster Data Server.

If you have Flexmonster Data Server version 2.8, see how to update the Data Server.

Step 2. Specify a path to the Data Server

Flexmonster requires the Data Server’s URL to save and load the shared report.

Ways to specify the URL depend on the data source used on your page.

Flexmonster Data Server

If you use Flexmonster Data Server as a data source, the component saves and loads reports using the URL from the dataSource.url property:

{
dataSource: {
type: "api",
// this URL will be used to share reports
url: "http://localhost:9500",

index: "sample-index"
}
}

Another data source

If you use any other data source, you need to specify the Data Server’s URL in the shareReportConnection.url property. This URL will be used to load and save the shared reports. For example:

var pivot = new Flexmonster({
    container: "pivotContainer",
    report: {
        dataSource: {
            filename: "data.json"
        }
    },
    shareReportConnection: {
        // a URL to the Data Server
        url: "http://localhost:9500"
    } 
  
});

Step 3. Share the report

For convenient report sharing, there is a Share tab on the Toolbar. By default, it is hidden. To show the Share tab, handle the beforetoolbarcreated event as follows:

var pivot = new Flexmonster({
   container: "pivotContainer",
   beforetoolbarcreated: toolbar => {
       toolbar.showShareReportTab = true;
   },

   ...
});

Now you can share your report by clicking on the Share tab:

Alternatively, you can implement your custom control using the shareReport API call:

<button onclick="flexmonster.shareReport()">Share the report</button>

<script>
    var pivot = new Flexmonster({
        container: "pivotContainer",
        report: {
            dataSource: {
                filename: "data.json"
            }
        },
        shareReportConnection: {
            // a URL to the Data Server
            url: "http://localhost:9500"
        }
    });
</script>

Once called, the shareReport method saves the report to the Data Server and opens a pop-up window with a link to the saved report. You can copy that link and share it.

Step 4. Open the shared report

Now users can open the link you have shared in the browser to see your report. Note that the Data Server should be accessible to the people you share the report with.

Where to configure report sharing

You can configure the report-sharing functionality using Flexmonster Admin Panel. Open it, go to the Settings tab, and scroll down to the Report sharing settings block.

Share report settings block

The Report sharing settings block allows configuring the report-sharing functionality. Have a look at the configurations it provides:

  • Endpoint. Indicates whether the endpoint to share reports is enabled in the Data Server. Default value: Disabled.
  • Custom path to folder. This configuration is available only when the endpoint is enabled. Defines the folder to which the Data Server saves reports. By default, reports are saved to the following locations:
    • On Windows – C:/ProgramData/FlexmonsterDataServer/reports/.
    • on macOS and Ubuntu/Linux – ~/.local/share/FlexmonsterDataServer/reports/ (will resolve to  /home/[current_user]/.local/share/FlexmonsterDataServer/reports/).
  • Report expiration time. Defines how long the saved reports are stored. The time is set in minutes. Default value: 0 (reports are stored permanently).
    This configuration is available only when the endpoint is enabled.
  • Max folder size. The maximum memory size available for report saving (in MB). Default value: 0 (unlimited).
    This configuration is available only when the endpoint is enabled.
  • Auto delete. Should be used with the Max folder size configuration. Defines whether to delete older reports when the folder is full. If enabled, older reports will be deleted automatically until there is enough memory for a new report. Default value: Disabled (older reports are not deleted).
    This configuration is available only when the endpoint is enabled.

What’s next?

You may be interested in the following articles: