☝️Small business or a startup? See if you qualify for our special offer.
+
All documentation
  • Introduction
  • Connecting to data source
    1. Supported data sources
    2. Connecting to other data sources
  • Browser compatibility
  • Documentation for older versions
  • Referencing the Data Server as a DLL

    This guide describes the process of embedding Flexmonster Data Server in a .NET Core application.

    Note that the approach described in this guide is the same for all operating systems: Windows (32-bit and 64-bit), macOS (64-bit and ARM64), and Ubuntu/Linux (64-bit and ARM64).

    Note Knowledge of core C# concepts is required to fully understand this guide.

    Referencing Flexmonster Data Server

    Prerequisites

    Step 1. Create a new ASP.NET Core web application

    If you don't have an existing ASP.NET Core project, create a new one with the following commands:

    dotnet new web -n flexmonster-project
    cd flexmonster-project

    Check out how to create an ASP.NET Core project in Visual Studio.

    Step 2. Install Flexmonster.DataServer.Core.dll

    Install Flexmonster.DataServer.Core.dll by running the following command in the console:

    dotnet add package Flexmonster.DataServer.Core 

    Step 3. Include Flexmonster.DataServer.Core in the Program.cs file

    Program.cs is located in the project’s root directory. Add the following line of code to the beginning of the file:

    using Flexmonster.DataServer.Core;

    Step 4. Configure the Data Server

    Step 4.1. For Flexmonster.DataServer.Core.dll, it is possible to configure data sources and different data storage options. The most convenient way of setting the Data Server configuration is to use the configuration file.

    In the configuration file (e.g., appsettings.json), define the data sources to use. For example:

    {
    // Other settings
    "DataSources":
    [
    {
    "Type": "json",
    "Indexes": {
    "index-json": {
    "Path": "data.json"
    }
    }
    },
    // Other data sources
    ]
    }

    Note If you don't have your own dataset, use our sample data.json file for testing.

    To learn more about the available configurations for Flexmonster.DataServer.Core.dll, refer to the DLL configurations guide.

    Step 4.2. optional Set the data storage options, which include the data refresh time and the cache size limit. The data refresh time defines how often the data is reloaded from a file or a database. The cache size limit is the maximum number of cached server responses for every index specified in the DataSources property. You can set the configurations in the configuration file (e.g., appsettings.json) like this:

    {
    // Other settings
      "DataSources":
      [
        // Data sources
      ],
    "DataStorageOptions": {
    "DataRefreshTime": 60,
    "CacheSizeLimit": 150
    }
    }

    The data refresh time is set in minutes. If the refresh time is not defined, the data is not reloaded.

    If the cache size limit is not specified, the number of cached responses is 100.

    Step 4.3. In the previous steps, we configured the Data Server in the configuration file. To apply the configuration, add the following line of code to the Program.cs file:

    using Flexmonster.DataServer.Core;

    var builder = WebApplication.CreateBuilder(args);
    builder.Services.ConfigureFlexmonsterOptions(builder.Configuration);
    // Other service configurations

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

    Note that the configuration should be applied before initializing the app variable.

    Step 5. Implement the API controller

    Implement the API controller, which is responsible for handling the requests from Flexmonster Pivot.

    Step 6. Register the controller

    After implementing the API controller, register it by adding the following lines of code to the Program.cs file:

    using Flexmonster.DataServer.Core;

    var builder = WebApplication.CreateBuilder(args);
    builder.Services.ConfigureFlexmonsterOptions(builder.Configuration);
    builder.Services.AddFlexmonsterApi();
    builder.Services.AddControllers();
    // Other service configurations

    var app = builder.Build();
    app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}"
    );
    // Other app configurations
    app.Run();

    Step 7. (optional) Preload the data

    When using the Data Server as a DLL, it is possible to preload data before running the Data Server.

    When the app starts, create a scope to resolve the prepopulatingService and call the prepopulatingService.Prepopulate() method, which is responsible for data preloading:

    using Flexmonster.DataServer.Core;

    var builder = WebApplication.CreateBuilder(args);
    builder.Services.ConfigureFlexmonsterOptions(builder.Configuration);
    builder.Services.AddFlexmonsterApi();
    builder.Services.AddControllers();
    // Other service configurations

    var app = builder.Build();
    app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}"
    );
    using (var scope = app.Services.CreateScope())
    {
    var prepopulatingService = scope.ServiceProvider.GetRequiredService<IPrepopulatingService>();
    if (prepopulatingService != null)
    {
    await prepopulatingService.Prepopulate();
    }
    }
    // Other app configurations
    app.Run();

    Step 8. Enable cross-origin resource sharing (CORS)

    Due to the same-origin policy, the browser only allows requests that come from the same origin. Cross-origin resource sharing (CORS) allows web applications to make cross-domain requests.

    If the ASP.NET Core server and the client share the same origin, skip this step. Otherwise, CORS must be enabled to allow Flexmonster Pivot to send requests to Flexmonster.DataServer.Core.dll:

    using Flexmonster.DataServer.Core;

    var builder = WebApplication.CreateBuilder(args);
    builder.Services.ConfigureFlexmonsterOptions(builder.Configuration);
    builder.Services.AddFlexmonsterApi();
    builder.Services.AddControllers();
    builder.Services.AddCors();
    // Other service configurations

    var app = builder.Build();
    app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}"
    );
    using (var scope = app.Services.CreateScope())
    {
    var prepopulatingService = scope.ServiceProvider.GetRequiredService<IPrepopulatingService>();
    if (prepopulatingService != null)
    {
    await prepopulatingService.Prepopulate();
    }
    }
    // This example CORS configuration is unsafe for production
    // The configuration allows any origin, method, and header
    // Ensure to adjust the configuration for your project
    app.UseCors(builder => {
    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
    });
    // Other app configurations
    app.Run();

    Learn more about how to enable CORS in ASP.NET Core here.

    Step 9. Run the project

    The ASP.NET Core project can be run either using Visual Studio or the console. To run the project from the console, enter the following command:

    dotnet run

    Now Flexmonster.DataServer.Core.dll is configured and ready to connect to Flexmonster Pivot.

    Step 10. Embed the component into your webpage

    If Flexmonster is not yet embedded, set up an empty component in your webpage:

    In pure JavaScript

    Complete the Integrating Flexmonster guide. Your code should look similar to the following example:

    const pivot = new Flexmonster({
      container: "pivotContainer",
     toolbar: true
    });

    In React

    Complete the Integration with React guide. Your code should look similar to the following example:

    <FlexmonsterReact.Pivot
     toolbar={true}
    />

    In Angular

    Complete the Integration with Angular guide. Your code should look similar to the following example:

    <fm-pivot
     [toolbar]="true">
    </fm-pivot>

    In Vue

    Complete the Integration with Vue guide. Your code should look similar to the following example:

    <Pivot
     toolbar
    />

    Step 11. Configure the report

    On the client side, configure the report as follows:

    In pure JavaScript

    const pivot = new Flexmonster({
    container: "pivotContainer",
    toolbar: true,
    report: {
    dataSource: {
    type: "api",
    url: "http://localhost:5000/api",
    index: "index-json"
    }
    }
    });

    In React

    <FlexmonsterReact.Pivot
    toolbar={true}
    report={{
    dataSource: {
    type: "api",
    url: "http://localhost:5000/api",
    index: "index-json"
    }
    }}
    />

    In Angular

    <fm-pivot
    [toolbar]="true"
    [report]="{
    dataSource: {
    type: 'api',
    url: 'http://localhost:5000/api',
    index: 'index-json'
    }
    }"
    >
    </fm-pivot>

    In Vue

    <Pivot
    toolbar
    v-bind:report="{
    dataSource: {
    type: 'api',
    url: 'http://localhost:5000/api',
    index: 'index-json'
    }
    }"
    />

    Note The index must match the name of the index defined in step 4.1 (e.g., "index-json"), and the url must be set to your server's URL.

    See the full list of Flexmonster properties used to configure the dataSource object.

    Open the pivot table in the browser to see the data.

    Check out the client part of our sample ASP.NET project to see an example of how to configure Flexmonster Pivot.

    List of supported configuration parameters

    When connecting to data using Flexmonster Data Server, you can use the following properties of the DataSourceObject:

    List of properties
    Property/TypeDescription
    type
    String
    The data source type. When connecting to data using Flexmonster Data Server, set the type to "api".
    url
    String
    The URL to Flexmonster Data Server.
    index
    String
    The dataset identifier.
    mapping
    MappingObject | String
    optional Defines how fields from the data source are treated and presented within the component. For example, you can specify the field’s captions, define a type for a field, configure multilevel hierarchies, etc. Read more in the Mapping guide.
    Can be either an inline MappingObject or a URL to a JSON file with the mapping Live example.
    requestHeaders
    Object
    optional Adds custom request headers. Consists of "key": "value" pairs, where "key" is a header name and "value" is its value Live example.
    Note The requestHeaders property is not saved when obtaining the report via save() and getReport() API calls.
    singleEndpoint
    Boolean
    optional When set to true, all Flexmonster Pivot’s requests are sent to a single endpoint specified in the url property.
    Default value: false.
    withCredentials
    Boolean
    optional Indicates whether cross-site Access-Control requests should be made using credentials such as authorization headers (true) or not (false). For more details, refer to MDN web docs.
    Setting the withCredentials flag to true is recommended when using Windows authentication and other types of server authentication. When set to false, the browser does not ask for credentials and does not include them in outgoing requests.
    Default value: false.
    concurrentRequests
    Boolean
    optional When set to false, Flexmonster sends a request for each expand/drill-down separately and waits for the Data Server’s response before sending a new request. This can result in slow performance when there are a lot of expands/drill-downs in the report.
    When the concurrentRequests is true, Flexmonster sends requests for expands/drill-downs of a particular level simultaneously. To get the best performance, enable the HTTP/2 protocol in the Data Server.
    Default value: false.

    Full server code

    Here's how the code of your server should look like after you complete the tutorial:

    See the full server code

    Program.cs

    using Flexmonster.DataServer.Core;

    var builder = WebApplication.CreateBuilder(args);
    builder.Services.ConfigureFlexmonsterOptions(builder.Configuration);
    builder.Services.AddFlexmonsterApi();
    builder.Services.AddControllers();
    builder.Services.AddCors();

    var app = builder.Build();
    app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}"
    );
    using (var scope = app.Services.CreateScope())
    {
    var prepopulatingService = scope.ServiceProvider.GetRequiredService<IPrepopulatingService>();
    if (prepopulatingService != null)
    {
    await prepopulatingService.Prepopulate();
    }
    }
    app.UseCors(builder => {
    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
    });

    app.Run();

    FlexmonsterAPIController.cs

    using Microsoft.AspNetCore.Mvc;
    using Flexmonster.DataServer.Core;
    using Flexmonster.DataServer.Core.Models;

    [Route("api")]
    [ApiController]
    public class FlexmonsterAPIController : ControllerBase
    {
    private readonly IApiService _flexmonsterApiService;

    public FlexmonsterAPIController(IApiService apiService)
    {
    _flexmonsterApiService = apiService;
    }

    const string API_VERSION = "2.9.80";

    [Route("handshake")]
    [HttpPost]
    public IActionResult Handshake()
    {
    object response = new { version = API_VERSION };
    return new JsonResult(response);
    }

    [Route("fields")]
    [HttpPost]
    public IActionResult PostFields([FromBody]FieldsRequest request)
    {
    var response = _flexmonsterApiService.GetFields(request);
    return new JsonResult(response);
    }

    [Route("members")]
    [HttpPost]
    public IActionResult PostMembers([FromBody]MembersRequest request)
    {
    var response = _flexmonsterApiService.GetMembers(request);
    return new JsonResult(response);
    }

    [Route("select")]
    [HttpPost]
    public IActionResult PostSelect([FromBody]SelectRequest request)
    {
    var response = _flexmonsterApiService.GetAggregatedData(request);
    return new JsonResult(response);
    }
    }

    appsettings.json

    {
    "Logging": {
    "LogLevel": {
    "Default": "Information",
    "Microsoft.AspNetCore": "Warning"
    }
    },
    "AllowedHosts": "*",
    "DataSources":
    [
    {
    "Type": "json",
    "Indexes": {
    "index-json": {
    "Path": "data.json"
    }
    }
    }
    ],
    "DataStorageOptions": {
    "DataRefreshTime": 60,
    "CacheSizeLimit": 150
    }
    }

    Removing the Data Server

    To completely remove the Data Server, you need to delete the Data Server code, configurations, logs, and other related files.

    Note The uninstallation is irreversible, so ensure you back up the Data Server configurations.

    To remove the Data Server, do the following:

    Step 1. Remove traces of the Data Server from your project, which include:

    Step 2. Delete the Flexmonster.DataServer.Core.dll by running the following command inside the project folder:

    dotnet remove package Flexmonster.DataServer.Core

    See also