Need a special offer?Find out if your project fits.
+
  1. API reference
  • Introduction
  • Connecting to Data Source
    1. Supported data sources
    2. Connecting to other data sources
  • Browser compatibility
  • Documentation for older versions
  • Table of contents

    Referencing the Data Server as a DLL

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

    Learn more in the following sections:

    Referencing Flexmonster Data Server

    Prerequisites

    To reference the Data Server as a DLL, follow the steps below.

    Step 1. 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:

    let pivot = new Flexmonster({
      container: "pivotContainer",
      componentFolder: "node_modules/flexmonster/",
      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 React

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

    <FlexmonsterReact.Pivot
     toolbar={true}
    />

    In Vue

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

    <Pivot
     toolbar
    />

    Now it’s time to embed Flexmonster Data Server into your ASP.NET Core project.

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

    Skip this step if you already have an ASP.NET Core project. Otherwise, create a new project:

    Via the File menu

    Via the start window

    In the project templates menu, select the ASP.NET Core template:

    Then, to simplify the server configuration process, create a project based on the API template:

    Step 3. Install Flexmonster.DataServer.Core.dll

    Flexmonster.DataServer.Core.dll can be installed with NuGet – Visual Studio’s package manager:

    1. Right-click on the project and select the Manage NuGet Packages item:
    2. In the Browse tab, search for the Flexmonster.DataServer.Core package and install it:

    Another way to install Flexmonster.DataServer.Core.dll is by running the following command in the console:

    dotnet add package Flexmonster.DataServer.Core 

    Step 4. Include Flexmonster.DataServer.Core in the Startup.cs file

    Startup.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 5. Register FlexmonsterAPIService in the dependency injection container

    In the ConfigureServices() method of the Startup.cs file, add the following line of code:

    services.AddFlexmonsterApi();

    Step 6. Configure the data sources

    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:

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

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

    Step 7. (optional) Set the data storage options

    Data storage options 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 like this:

    "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 8. Add a configuration object to the Startup.cs file

    The IConfiguration object contains user configurations and is used to pass them to the Data Server. Create a variable with the IConfiguration type and initialize it in the constructor:

    public Startup(IConfiguration configuration)
    {
    Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    Step 9. Add the Data Server configurations

    In the previous steps, we configured the Data Server in the configuration file. To apply this configuration, add the following line of code to the ConfigureServices() method of the Startup.cs file:

    services.ConfigureFlexmonsterOptions(Configuration);

    Now the ConfigureServices() method of the Startup.cs file should look similar to the following:

    public IConfiguration Configuration { get; }
    
    public void ConfigureServices(IServiceCollection services)
    {
        // other services configurations
        services.ConfigureFlexmonsterOptions(Configuration);
        services.AddFlexmonsterApi();
        // other services configurations
    }

    Step 10. Implement the API controller

    The API controller is responsible for handling the requests from Flexmonster Pivot. The implementation of the controller is described in the API controller guide.

    After you implement the API controller, add the following lines of code to the ConfigureServices() and Configure() methods:

    public void ConfigureServices(IServiceCollection services)
    {
    // other configurations
    services.ConfigureFlexmonsterOptions(Configuration);
    services.AddFlexmonsterApi();
    services.AddControllers();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
    // other configurations
    app.UseEndpoints(endpoints =>
    {
    endpoints.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}");
    });

    }

    Step 11. (optional) Preload the data

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

    The prepopulatingService.Prepopulate() method is responsible for data preloading. You can use it in the Configure() method:

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env,
    IPrepopulatingService prepopulatingService)
    {
       // other configurations
       prepopulatingService.Prepopulate();
     
       app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}");
        });
    }

    Step 12. 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:

    public void ConfigureServices(IServiceCollection services)
    {
        // other configurations
        services.ConfigureFlexmonsterOptions(Configuration);
        services.AddFlexmonsterApi(); 
        services.AddControllers(); 
        services.AddCors();
    }
    
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env,
    IPrepopulatingService prepopulatingService)
    {
        // other configurations
        app.UseCors(builder => {
            builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
        });
        
        prepopulatingService.Prepopulate();
    
        app.UseEndpoints(endpoints =>
         {
             endpoints.MapControllerRoute(
                 name: "default",
                 pattern: "{controller=Home}/{action=Index}");
         });
    }

    Find out how to enable CORS in ASP.NET Core here.

    Step 13. 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

    Step 14. Configure the report

    On the client side, configure the report as follows:

    new Flexmonster({
      container: "pivotContainer",
      componentFolder: "node_modules/flexmonster/",
      toolbar: true,
      report: {
        dataSource: {
          type: "api",
          url: "http://localhost:5000/api", // replace with your url
          index: "index-json"
        }
      }
    });

    Note The index must match the name of the index defined in step 6 (e.g., "index_json").

    Now Flexmonster.DataServer.Core.dll is configured and ready to connect to Flexmonster Pivot. Open the pivot table in the browser to see the data.

    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 in one of the following ways:

    Via Visual Studio

    Step 2.1. Right-click the project name and select the Manage NuGet Packages... option:

    Step 2.2. Go to the Installed tab, select the Flexmonster.DataServer.Core package, and click Uninstall:

    Via the console

    Step 2.1. Open your project folder and run the following command:

    dotnet remove package Flexmonster.DataServer.Core

    What's next?

    You may be interested in the following articles: