Specify Data Source Settings (JSON)

• Jun 03, 2020
• 4 minutes to read

Select an Existing Data Connection

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

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 shows how to save the created connection strings in the context of the ASP.NET Core dashboard application.

C#

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

// ...

public void ConfigureServices(IServiceCollection services) {
  services
    .AddMvc()
    .AddDefaultDashboardController((configurator, serviceProvider)  => {
      // Use the ConnectionStringProvider instance as the SetConnectionStringsProvider method's parameter.
      configurator.SetConnectionStringsProvider(new ConnectionStringProvider());
      // ...
    });

  services.AddDevExpressControls();
}
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;
    }
}

VB.NET

Imports DevExpress.DashboardWeb
Imports DevExpress.DataAccess.ConnectionParameters
Imports System.Collections.Generic
Imports System.Linq

' ...

Public Sub ConfigureServices(ByVal services As IServiceCollection)
      ' Use the ConnectionStringProvider instance as the SetConnectionStringsProvider method's parameter.
      ' ...
  services.AddMvc().AddDefaultDashboardController(Function(configurator, serviceProvider) AnonymousMethod1(configurator, serviceProvider))

  services.AddDevExpressControls()
End Sub

Private Function AnonymousMethod1(ByVal configurator As Object, ByVal serviceProvider As Object) As Boolean
    configurator.SetConnectionStringsProvider(New ConnectionStringProvider())
    Return True
End Function
Public Class ConnectionStringProvider
    Implements IDataSourceWizardConnectionStringsStorage
    Private ReadOnly storage As New Dictionary(Of String, DataConnectionParametersBase)()
    Public Function GetConnectionDescriptions() As Dictionary(Of String, String)

        Return storage.ToDictionary(Function(p) p.Key, Function(p) p.Key)
    End Function

    Public Function GetDataConnectionParameters(ByVal name As String) As DataConnectionParametersBase
        Return storage(name)
    End Function

    Public Sub SaveDataConnectionParameters(ByVal name As String, ByVal connectionParameters As DataConnectionParametersBase, ByVal saveCredentials As Boolean)
        storage(name) = connectionParameters
    End Sub
End Class

After that, select a new data connection on the following page:

Tip

Example on GitHub: Web Dashboard - How to create new JSON data sources at runtime

Configure a New Data Connection

On the next page, configure a new 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)

• 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 … to invoke the editor.

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

An expression can include dashboard parameters.

Tip

Refer to the Create Parameters 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.

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.

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.

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.

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