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.
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:
To demonstrate how report sharing works, we added this feature to our main demo. Feel free to try the following:
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:
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.
By default, Flexmonster Data Server stores the shared reports in the following locations:
C:/ProgramData/FlexmonsterDataServer/reports/.~/.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:
"PathToFolder" property for the Data Server as a console application or as a DLL.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.
After installing the Data Server, enable the endpoint to share reports. See how to enable it depending on how you use the Data Server:
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.
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.
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:
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.
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"
}
}
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"
}
});
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.
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.
You may be interested in the following articles: