Skip to main content

Create a JSON Data Source

  • 4 minutes to read

Prerequisites

  1. Register a data connection string provider.

    The Web Dashboard control does not expose connection strings from the configuration file (appsettings.json or Web.config) when used in Designer mode. You need to use a data connection string provider to avoid data leaks and pass connection parameters safely. You can use a predefined data connection string provider or implement a custom provider.

    For additional information, refer to the following help topics:

Select an Existing Data Connection

The following page appears if you select JSON on the start page. Select an existing connection from the list.

Web Dashboard - Choose a JSON data connection

For information on how to register data connections in your application, refer to the following help topics:

Click Next to proceed to the Select Data Fields page.

Create a New Data Connection

End users can create new data connections if you implemented a JSON data connection storage.

  1. Implement the IDataSourceWizardConnectionStringsStorage interface to store the created JSON data connections.
  2. Use the created class instance as the ASPxDashboard.SetConnectionStringsProvider / DashboardConfigurator.SetConnectionStringsProvider method’s parameter.

  3. Set the allowCreateNewJsonConnection property to true:

Platform API
HTML JavaScript DataSourceWizardExtensionOptions.allowCreateNewJsonConnection
ASP.NET Core DataSourceWizardOptionBuilder.AllowCreateNewJsonConnection
MVC DashboardExtensionSettings.AllowCreateNewJsonConnection
Web Forms ASPxDashboard.AllowCreateNewJsonConnection

The following code snippet saves connection strings in the ASP.NET Core dashboard application.

View Example: Dashboard for ASP.NET Core - How to create new JSON data sources at runtime

using DevExpress.DashboardWeb;
using DevExpress.DataAccess.ConnectionParameters;
using System.Collections.Generic;
using System.Linq;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddDevExpressControls();
builder.Services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
    DashboardConfigurator configurator = new DashboardConfigurator();
    // Use the ConnectionStringProvider instance as the SetConnectionStringsProvider method's parameter.
    configurator.SetConnectionStringsProvider(new ConnectionStringProvider());
    return configurator;
});

var app = builder.Build();

// ...

app.Run();

public class ConnectionStringProvider: IDataSourceWizardConnectionStringsStorage {
    readonly Dictionary<string, DataConnectionParametersBase> storage = new Dictionary<string, DataConnectionParametersBase>();
    public Dictionary<string, string> GetConnectionDescriptions() {
      return storage.ToDictionary(p=>p.Key, p=>p.Key);
    }
    public DataConnectionParametersBase GetDataConnectionParameters(string name) {
      return storage[name];
    }
    public void SaveDataConnectionParameters(string name, DataConnectionParametersBase connectionParameters, bool saveCredentials) {
        storage[name] = connectionParameters;
    }
}

Select a new data connection on the following page:

Web Dashboard - Choose a JSON data connection

Configure a New Data Connection

On the next page, configure a new data connection:

Web Dashboard - Configure a new JSON data connection

Specify the connection name and select the JSON source type.

Web Service Endpoint (URI)

A URL to a file in JSON format. You can specify the Web Service Endpoint’s request parameters (username and password, HTTP headers, query parameters or URI path parameters)

Web Dashboard - Configure JSON data source parameters

  • A path parameter appends a path element to a JSON endpoint’s Uri.
  • A query parameter specifies a HTTP request parameter that is passed to a JSON endpoint.
  • A header is a custom HTTP header of JSON endpoint requests.

You can use expressions to specify path parameters, query parameter values, and headers.

Click the F icon to switch the Value option to Expression Editor and click the ellipsis () to invoke the editor.

Web Dashboard - Configure JSON data source parameters - Expression Editor F icon

Double-click the expression in the invoked Expression Editor and click OK.

Web Dashboard - Configure JSON data source parameters - Expression Editor

An expression can include dashboard parameters.

Tip

Refer to the Create a Dashboard Parameter on the Web topic for more information how to create a dashboard parameter.

Select the Fields section in the Expression Editor, double-click the predefined dashboard parameter, and click OK.

Web Dashboard - Configure JSON data source parameters - Select Dashboard Parameters in Expression Editor

Path parameters and query parameters are included in endpoint requests in the same order as they are listed. Move a parameter up or down in the list to change its position in endpoint requests.

The read-only Resulting URI field displays the resulting JSON URI.

Web Dashboard - Configure JSON data source parameters

Configure the basic HTTP authentication credentials and click Next to proceed to the Select Data Fields page.

JSON String

A string that contains JSON data. You can also use the Upload JSON button to load content from the selected JSON file.

Web Dashboard - Configure JSON data source from JSON String

Click Next to proceed to the Select Data Fields page.

Select Data Fields

The “Select data fields” page allows you to configure which data fields to use in a JSON data source.

Web Dashboard - Configure JSON data source - Select Data Fields

Click Finish to create a JSON data source.

API

The following API identifies the database wizard pages:

Page Name Page ID Class
Choose Connection (JSON) JsonDataSourceWizardPageId.ChooseConnectionPage ChooseJsonConnectionPage
Choose JSON Source JsonDataSourceWizardPageId.ChooseJsonSourcePage ChooseJsonSourcePage
Select Data Fields JsonDataSourceWizardPageId.ChooseJsonSchemaPage ChooseJsonSchemaPage
See Also