We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Share the report

    Starting from version 2.9, Flexmonster allows you to share its current report configuration with other users via a link. This allows sharing reports quickly without manually saving and loading .json report files. In this guide, you can learn how report sharing works and how to use it.

    In Flexmonster, you can also save, export, or print your report.

    The idea of the report-sharing feature

    Let’s assume you have configured a report in Flexmonster Pivot 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 Pivot saves this report to the Data Server and provides a link to the report.
    • When the link is opened in the browser, Flexmonster Pivot 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 the following:

    1. Configure the report. For example, select a different field for rows.
    2. Click the Share Toolbar tab.
    3. Copy the provided link.
    4. Send the link to your teammates.

    If they follow the 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.

    See how to add the report-sharing feature to your project.

    When you share a report, the Data Server saves it and returns the report identifier. Then, Flexmonster Pivot creates a link to the report in the following way:

    1. Takes the link to the page where it is embedded.
    2. Appends the report identifier to the link in the flexmonsterreport URL parameter.

    For example, if you embed the component into the https://example.com/report/ page, the link to the report will be formatted as https://example.com/report/?flexmonsterreport=<report identifier> (e.g., the report identifier can be 6d5d2dc39301e1833c44ed02e6fc11a5).

    The resulting link leads to the page with Flexmonster Pivot. When the link is opened, the component requests a report associated with the identifier from the Data Server and displays the report once it is received.

    Note The Data Server does not store your website or page. Only the report is stored on the server and loaded using the flexmonsterreport URL parameter.

    If you are using URL parameters or URL redirection that might conflict with the flexmonsterreport parameter, ensure this parameter is passed between Flexmonster and the Data Server.

    Where the shared reports are stored

    By default, Flexmonster Data Server stores the shared reports in 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/).

    Note If you are using the Data Server as a DLL, you must manually set the default location in the AddReportSharing service configuration.

    You can specify another location for storing the shared reports:

    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, install it as a Windows/Unix service, as a DLL, or as a console application.

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

    Step 2. Configure the report-sharing feature

    After installing the Data Server, enable the endpoint to share reports. See how to enable it depending on how you use the Data Server:

    As a Windows/Unix service

    Step 2.1. Open the Admin Panel.

    Step 2.2. Go to the Settings tab and scroll down to the Report sharing settings block.

    Step 2.3. Enable the Endpoint configuration.

    As a DLL

    Step 2.1. In the Controllers/ folder of your project, create a ReportSharingController class as follows:

    using System.Text.Json;
    using Flexmonster.DataServer.Core;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.Primitives;

    [Route("api")]
    public class ReportSharingController : ControllerBase
    {
    private readonly IReportSharingService _reportSharingService;

    public ReportSharingController(IReportSharingService reportSharingService)
    {
    _reportSharingService = reportSharingService;
    }

    // Handle the /save request to save the shared report on the server
    [Route("save")]
    [HttpPost]
    public IActionResult SaveReport([FromBody] JsonElement report)
    {
    /* The Save() method saves the shared report
    * and returns its unique hash code,
    * which will be used in the link to the shared report */
    var hash = _reportSharingService.Save(report);
    return new JsonResult(hash);
    }

    // Handle the /load request to send the shared report to Flexmonster Pivot
    [Route("load")]
    [HttpPost]
    public IActionResult LoadReport([FromBody] string hash)
    {
    /* The Load() method returns the previously shared report
    * with the hash code that corresponds to the one
    * provided by Flexmonster Pivot */
    var report = _reportSharingService.Load(hash);
    if (report != null)
    {
    return new JsonResult(report);
    }
    return new BadRequestResult();
    }
    }

    Step 2.2. In the Program.cs file, add the AddReportSharing service configuration after the AddControllers one:

    using Flexmonster.DataServer.Core;

    var builder = WebApplication.CreateBuilder(args);
    // Other service configurations
    builder.Services.AddControllers();
    builder.Services.AddReportSharing("<default-path-to-folder-with-shared-reports>");

    var app = builder.Build();
    // Other app configurations

    Note The Data Server as a DLL must have read and write access to the folder where the shared reports are stored.

    As a console application

    Step 2.1. Open the flexmonster-config.json file for the Data Server. The file is located in the same folder as the Data Server's executable file. For more details, check out the Data Server's installation folder structure.

    Step 2.2. Specify the "ReportSharingOptions" object with the "EndpointEnabled" property set to true:

    {
    "ReportSharingOptions": {
    "EndpointEnabled": true
    },
    "DataSources": [{
    // Index configuration
    }]
    }

    You can also set the following configurations for the report sharing in the Data Server as a service and as a console application:

    • Set expiration time for shared reports to store them only temporarily.
    • Change the folder where the shared reports are stored.
    • Limit the size of the folder with shared reports.
    • Automatically delete old shared reports when the size limit is exceeded.

    Step 3. Specify a path to the Data Server

    Flexmonster Pivot 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:

    report: {
    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:

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

    Step 4. Share the report

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

    let pivot = new Flexmonster({
     container: "pivotContainer",
    componentFolder: "node_modules/flexmonster/",
     beforetoolbarcreated: toolbar => {
       toolbar.showShareReportTab = true;
     },
     // ...
    });

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

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

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

    <script>
      let pivot = new Flexmonster({
        container: "pivotContainer",
    componentFolder: "node_modules/flexmonster/",
        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 shared report. You can copy that link and share it. See where the Data Server stores the shared reports.

    Step 5. Open the shared report

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

    What’s next?

    You may be interested in the following articles: