Create a React Dasard Application

• Jan 27, 2025
• 6 minutes to read

The Web Dasard consists of client and server parts:

Client

The client is a JavaScript application that supplies users with a UI to design and interact with a dasard. The DasardControl is the underlying control. The client communicates with the server using HTTP requests.

Server

The server is an ASP.NET Core or ASP.NET MVC application that handles client data requests and provides access to data sources, dasard storage and other backend capabilities.

The tutorial creates and configures a client React application that contains the Web Dasard and a server ASP.NET Core application that targets .NET.

View Example

Prerequisites

• Node.js 18+
• .NET 8 SDK or later
• Visual Studio 2022 (v17.0) or higher

Requirements

• The script version on the client should match the library version on the server.
• Versions of the DevExpress npm packages should be identical.

Step 1. Create a Client Application

In the command prompt, create a React application:

npm create vite@latest dasard-react-app -- --template react

Navigate to the created folder after the project is created:

cd dasard-react-app

Install the following npm packages:

npm install devexpress-dasard@24.2-stable devexpress-dasard-react@24.2-stable @devexpress/analytics-core@24.2-stable devextreme@24.2-stable devextreme-react@24.2-stable

Replace code in the the src/App.jsx file as shown below to display a dasard component on the page.

import React from 'react';
import 'ace-builds/css/ace.css';  
import 'ace-builds/css/theme/dreamweaver.css';  
import 'ace-builds/css/theme/ambiance.css';  
import 'devextreme/dist/css/dx.light.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
import '@devexpress/analytics-core/dist/css/dx-querybuilder.css';
import 'devexpress-dasard/dist/css/dx-dasard.light.css';
import DasardControl from 'devexpress-dasard-react';

function App() {  
  return (
    <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
      <DasardControl style={{ height: '100%' }} 
        endpoint="https://demos.devexpress.com/services/dasard/api">
      </DasardControl>
  </div>
  );
}

export default App;

Use the command below to launch the application.

npm run dev

Open your browser and navigate to the URL specified in the command output to see the result. The Web Dasard uses data from the preconfigured server (https://demos.devexpress.com/services/dasard/api).

Step 2. Create a Server Application

Create the Application

Create a server application to show your data. In Visual Studio, create an ASP.NET Core Empty application. Name it asp-net-core-server.

Install NuGet Packages

In the project, open the NuGet Package Manager and set the package source to All. Install the following NuGet package:

• DevExpress.AspNetCore.Dasard

Configure the Dasard Controller

In the root directory, create an empty MVC Controller named DefaultDasardController. Inherit the DasardController:

using DevExpress.DasardAspNetCore;
using DevExpress.DasardWeb;
using Microsoft.AspNetCore.DataProtection;

namespace AspNetCoreDasardBackend {
    public class DefaultDasardController : DasardController {
        public DefaultDasardController(DasardConfigurator configurator, IDataProtectionProvider? dataProtectionProvider)
            : base(configurator, dataProtectionProvider) {
        }
    }
}

Configure the Server

In your application, create the Data folder and add your data files to the folder. In this example, data is obtained from a JSON file. You can find sample data in the following repository:

View Example

Create the Data/Dasards folder that will store dasards.

Replace the content of the Program.cs file with the code below to configure the following parameters:

• Configure CORS policy.
• Add and use services for DevExpress Controls.
• Map the dasard route.
• Add a JSON Data Source to a data source storage.

using DevExpress.DasardAspNetCore;
using DevExpress.DasardWeb.Native;
using DevExpress.DasardWeb;
using Microsoft.Extensions.FileProviders;
using DevExpress.AspNetCore;
using DevExpress.DasardCommon;
using DevExpress.DataAccess.Json;

var builder = WebApplication.CreateBuilder(args);

IFileProvider? fileProvider = builder.Environment.ContentRootFileProvider;
IConfiguration? configuration = builder.Configuration;

// Configures CORS policies.                
builder.Services.AddCors(options => {
    options.AddPolicy("CorsPolicy", builder => {
        builder.AllowAnyOrigin();
        builder.AllowAnyMethod();
        builder.WithHeaders("Content-Type");
    });
});

// Adds the DevExpress middleware.
builder.Services.AddDevExpressControls();
// Adds controllers.
builder.Services.AddControllersWithViews();

// Configures the dasard backend.
builder.Services.AddScoped<DasardConfigurator>((IServiceProvider serviceProvider) => {
    DasardConfigurator configurator = new DasardConfigurator();
    configurator.SetDasardStorage(new DasardFileStorage(fileProvider.GetFileInfo("Data/Dasards").PhysicalPath));
    configurator.SetDataSourceStorage(CreateDataSourceStorage());
    configurator.SetConnectionStringsProvider(new DasardConnectionStringsProvider(configuration));
    configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
    return configurator;
});

void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
    if (e.ConnectionName == "jsonSupport") {
        Uri fileUri = new Uri(fileProvider.GetFileInfo("Data/support.json").PhysicalPath, UriKind.RelativeOrAbsolute);
        JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
        jsonParams.JsonSource = new UriJsonSource(fileUri);
        e.ConnectionParameters = jsonParams;
    }
    if (e.ConnectionName == "jsonCategories") {
        Uri fileUri = new Uri(fileProvider.GetFileInfo("Data/categories.json").PhysicalPath, UriKind.RelativeOrAbsolute);
        JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
        jsonParams.JsonSource = new UriJsonSource(fileUri);
        e.ConnectionParameters = jsonParams;
    }
}

DataSourceInMemoryStorage CreateDataSourceStorage() {
    DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();

    DasardJsonDataSource jsonDataSourceSupport = new DasardJsonDataSource("Support");
    jsonDataSourceSupport.ConnectionName = "jsonSupport";
    jsonDataSourceSupport.RootElement = "Employee";
    dataSourceStorage.RegisterDataSource("jsonDataSourceSupport", jsonDataSourceSupport.SaveToXml());

    DasardJsonDataSource jsonDataSourceCategories = new DasardJsonDataSource("Categories");
    jsonDataSourceCategories.ConnectionName = "jsonCategories";
    jsonDataSourceCategories.RootElement = "Products";
    dataSourceStorage.RegisterDataSource("jsonDataSourceCategories", jsonDataSourceCategories.SaveToXml());
    return dataSourceStorage;
}

var app = builder.Build();

// Registers the DevExpress middleware.            
app.UseDevExpressControls();

// Registers routing.
app.UseRouting();
// Registers CORS policies.
app.UseCors("CorsPolicy");

// Maps the dasard route.
app.MapDasardRoute("api/dasard", "DefaultDasard");
// Requires CORS policies.
app.MapControllers().RequireCors("CorsPolicy");

app.Run();

In the Properties folder, open launchSettings.json. Modify the applicationUrl setting as shown below to use port 5001 for HTTPS and port 5000 for HTTP:

//...
"profiles": {
  "asp_net_core_server": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": true,
  "applicationUrl": "https://localhost:5001;http://localhost:5000",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
 },
}

Start the Server

Open the asp-net-core-server folder and run the following command:

dotnet run

Update the Endpoint on the Client

To use this server in the client application, go to the App.jsx file. Set the following URL as an endpoint: http://localhost:5000/api/dasard

import React from 'react';
import 'ace-builds/css/ace.css';  
import 'ace-builds/css/theme/dreamweaver.css';  
import 'ace-builds/css/theme/ambiance.css';  
import 'devextreme/dist/css/dx.light.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
import '@devexpress/analytics-core/dist/css/dx-querybuilder.css';
import 'devexpress-dasard/dist/css/dx-dasard.light.css';
import DasardControl from 'devexpress-dasard-react';

function App() {  
  return (
    <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
      <DasardControl style={{ height: '100%' }} 
        endpoint="http://localhost:5000/api/dasard">
      </DasardControl>
  </div>
  );
}

export default App;

Use the command below to launch the application.

npm run dev

Open your browser and navigate to the URL specified in the command output to see the result. The client Web Dasard app uses data from the newly created server (http://localhost:5000/api/dasard).

Step 3. Switch to Viewer Mode

In Designer mode, the control loads the extensions required to design dasards. Users can access the Data Source Wizard, preview underlying data, and modify dasards from storage. Requests from the dasard backend server can be sent to third-party resources. A user can also switch the control to Viewer mode.

After you created and saved a dasard, you can switch your Dasard Designer application to ViewerOnly mode to prevent users from modifying the dasard and its data.

Open the App.jsx file and set the workingMode property to ViewerOnly:

<DasardControl style={{ height: '100%' }} 
    endpoint="http://localhost:5000/api/dasard">
    workingMode="ViewerOnly"
</DasardControl>

Refer to the following topic for more information on how to switch the component’s properties: Change Control Properties.

Next Steps

Create Dasards on the Web

Describes how to create and configure dasards in the Web Dasard control.

Dasard Component for React

Contains instructions on how to use the Dasard Component for React.