xtrareports-400380-feature-guide-to-devexpress-reports-bind-reports-to-data-json-data-bind-a-report-to-json-data-runtime-sample.md
This topic describes how to bind a report to JSON data at runtime.
Tip
Online Example : How to Create a Report Bound to JsonDataSource
Use the JsonDataSource component to bind a report to JSON-formatted data. You can retrieve data from the Web, a file or text strings.
The code sample below illustrates how to use JSON data from the Web.
using DevExpress.DataAccess.Json;
using DevExpress.XtraReports.UI;
public static JsonDataSource CreateDataSourceFromWeb() {
var jsonDataSource = new JsonDataSource();
// Specify the endpoint.
jsonDataSource.JsonSource = new UriJsonSource(
new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"));
// The schema is built, you do not have to call the Fill method to populate the Field List.
// The Designer calls the Fill method automatically when a document is generated for preview.
//jsonDataSource.Fill();
return jsonDataSource;
}
Imports System.Net
Imports DevExpress.DataAccess.Json
Imports DevExpress.XtraReports.UI
Public Shared Function CreateDataSourceFromWeb() As JsonDataSource
Dim jsonDataSource = New JsonDataSource()
' Specify the endpoint.
jsonDataSource.JsonSource = New UriJsonSource(
New Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"))
' The schema is built, you do not have to call the Fill method to populate the Field List.
' The Designer calls the Fill method automatically when a document is generated for preview.
'jsonDataSource.Fill()
Return jsonDataSource
End Function
Tip
You can also provide the created JsonDataSource object with authentication parameters to access the specified Web Endpoint. Refer to the Provide Authentication to Access JSON Data (Runtime Sample) topic for more information.
The code sample below illustrates how to use JSON data from a file.
using DevExpress.DataAccess.Json;
using DevExpress.XtraReports.UI;
// ...
public static JsonDataSource CreateDataSourceFromFile() {
var jsonDataSource = new JsonDataSource();
// Specify the JSON file name.
Uri fileUri = new Uri("customers.json", UriKind.RelativeOrAbsolute);
jsonDataSource.JsonSource = new UriJsonSource(fileUri);
// Populate the data source with data.
jsonDataSource.Fill();
return jsonDataSource;
}
Imports System.Net
Imports DevExpress.DataAccess.Json
Imports DevExpress.XtraReports.UI
' ...
Public Shared Function CreateDataSourceFromFile() As JsonDataSource
Dim jsonDataSource = New JsonDataSource()
' Specify the JSON file name.
Dim fileUri As New Uri("customers.json", UriKind.RelativeOrAbsolute)
jsonDataSource.JsonSource = New UriJsonSource(fileUri)
' Populate the data source with data.
jsonDataSource.Fill()
Return jsonDataSource
End Function
The code sample below illustrates how to use JSON data from a string variable.
using DevExpress.DataAccess.Json;
using DevExpress.XtraReports.UI;
// ...
public static JsonDataSource CreateDataSourceFromText() {
var jsonDataSource = new JsonDataSource();
// Specify a string with JSON data.
string json = "{\"Customers\":[{\"Id\":\"ALFKI\",\"CompanyName\":\"Alfreds Futterkiste\"," +
"\"ContactName\":\"Maria Anders\",\"ContactTitle\":\"Sales Representative\"," +
"\"Address\":\"Obere Str. 57\",\"City\":\"Berlin\",\"PostalCode\":\"12209\"," +
"\"Country\":\"Germany\",\"Phone\":\"030-0074321\",\"Fax\":\"030-0076545\"}]," +
"\"ResponseStatus\":{}}";
// Specify the object that retrieves JSON data.
jsonDataSource.JsonSource = new CustomJsonSource(json);
// Populate the data source with data.
jsonDataSource.Fill();
return jsonDataSource;
}
Imports System.Net
Imports DevExpress.DataAccess.Json
Imports DevExpress.XtraReports.UI
' ...
Public Shared Function CreateDataSourceFromText() As JsonDataSource
Dim jsonDataSource = New JsonDataSource()
' Specify a string with JSON data.
Dim json As String = "{""Customers"":[{""Id"":""ALFKI"",""CompanyName"":""Alfreds Futterkiste""," +
"""ContactName"":""Maria Anders"",""ContactTitle"":""Sales Representative""," +
"""Address"":""Obere Str. 57"",""City"":""Berlin"",""PostalCode"":""12209""," +
"""Country"":""Germany"",""Phone"":""030-0074321""," +
"""Fax"":""030-0076545""}],""ResponseStatus"":{}}"
' Specify the object that retrieves JSON data.
jsonDataSource.JsonSource = New CustomJsonSource(json)
' Populate the data source with data.
jsonDataSource.Fill()
Return jsonDataSource
End Function
Add path parameters, query parameters, or header parameters to the data source’s UriJsonSource to customize requests to a JSON web service endpoint.
You can use expressions to set parameter values. Specify an expression in the parameter’s Value property and specify that the parameter’s Type is Expression. Expressions can include report parameters. Prepend the report parameter’s name with the ? character in an expression.
The code sample below specifies a JSON endpoint and uses the date and id path parameters to identify the data record requested from the endpoint. The id parameter is bound to the ID report parameter.
using DevExpress.DataAccess;
using DevExpress.DataAccess.Json;
// ...
// Create a new JSON source.
var jsonSource = new UriJsonSource() {
Uri = new Uri(@"https://localhost:44367/api/values")
};
// Create the "date" and "id" path parameters that are appended to the JSON URI: https://localhost:44367/api/values/date/2020-01-15/id/123/.
jsonSource.PathParameters.AddRange(new[] {
new PathParameter("date", typeof(String), String.Format("{0:yyyy-MM-dd}", DateTime.Today)),
// "ID" is a report parameter whose value is used for the "id" path parameter.
new PathParameter("id", typeof(Expression), new Expression("?ID"))
});
// Assign the JSON source to the data source.
var datasource = new JsonDataSource() {
JsonSource = jsonSource
};
Imports DevExpress.DataAccess
Imports DevExpress.DataAccess.Json
' ...
' Create a new JSON source.
Dim jsonSource = New UriJsonSource() With {.Uri = New Uri("https://localhost:44367/api/values")}
' Create the "date" and "id" path parameters that are appended to the JSON URI: https://localhost:44367/api/values/date/2020-01-15/id/123/.
jsonSource.PathParameters.AddRange( {
New PathParameter("date", GetType(String), String.Format("{0:yyyy-MM-dd}", Date.Today)),
New PathParameter("id", GetType(Expression), New Expression("?ID"))
})
' "ID" is a report parameter whose value is used for the "id" path parameter.
' Assign the JSON source to the data source.
Dim datasource = New JsonDataSource() With {.JsonSource = jsonSource}
You can specify from which JSON nodes to retrieve data. Define a schema and assign it to the JsonDataSource ‘s Schema property.
using DevExpress.DataAccess.Json;
using DevExpress.XtraReports.UI;
public static JsonDataSource CreateDataSourceFromWeb() {
var jsonDataSource = new JsonDataSource();
// Specify the endpoint.
jsonDataSource.JsonSource = new UriJsonSource(
new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"));
var root = new JsonSchemaNode();
root.NodeType = JsonNodeType.Object;
var customers = new JsonSchemaNode() {NodeType=JsonNodeType.Array, Name="Customers", Selected=true };
customers.AddChildren(new[] {
new JsonSchemaNode(new JsonNode("CustomerID", true,
JsonNodeType.Property, typeof(string)))
{
DisplayName = "Customer ID" },
new JsonSchemaNode() {
Name = "CompanyName",
Selected = true,
NodeType = JsonNodeType.Property,
Type = typeof(string)
},
new JsonSchemaNode(new JsonNode("ContactTitle", true, JsonNodeType.Property, typeof(string))),
new JsonSchemaNode(new JsonNode("Address", false, JsonNodeType.Property, typeof(string)))
});
root.AddChildren(customers);
jsonDataSource.Schema = root;
// The schema is built, you do not have to call the Fill method to populate the Field List.
// The Designer calls the Fill method automatically when a document is generated for preview.
//jsonDataSource.Fill();
return jsonDataSource;
}
Imports System.Net
Imports DevExpress.DataAccess.Json
Imports DevExpress.XtraReports.UI
Public Shared Function CreateDataSourceFromWeb() As JsonDataSource
Dim jsonDataSource = New JsonDataSource()
' Specify the endpoint.
jsonDataSource.JsonSource = New UriJsonSource(
New Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"))
Dim root = New JsonSchemaNode()
root.NodeType = JsonNodeType.Object
Dim customers = New JsonSchemaNode() With {.NodeType = JsonNodeType.Array, .Name = "Customers", .Selected = True}
customers.AddChildren({
New JsonSchemaNode(New JsonNode("CustomerID", True, JsonNodeType.Property,
GetType(String))) With {.DisplayName = "Customer ID"},
New JsonSchemaNode() With {.Name = "CompanyName", .Selected = True,
.NodeType = JsonNodeType.Property, .Type = GetType(String)},
New JsonSchemaNode(New JsonNode("ContactTitle", True, JsonNodeType.Property,
GetType(String))),
New JsonSchemaNode(New JsonNode("Address", False, JsonNodeType.Property,
GetType(String)))
})
root.AddChildren(customers)
jsonDataSource.Schema = root
' The schema is built, you do not have to call the Fill method to populate the Field List.
' The Designer calls the Fill method automatically when a document is generated for preview.
'jsonDataSource.Fill()
Return jsonDataSource
End Function
The following code snippet assigns the JsonDataSource object to the report’s DataSource property:
using DevExpress.DataAccess.Json;
using DevExpress.XtraReports.UI;
private XtraReport CreateReport() {
XtraReport report = new XtraReport() {
Bands = {
new DetailBand() {
Controls = {
new XRLabel() {
ExpressionBindings = {
new ExpressionBinding("BeforePrint", "Text", "[CompanyName]")
},
WidthF = 300
}
},
HeightF = 50
}
},
DataSource = CreateDataSourceFromWeb(),
DataMember = "Customers"
};
return report;
}
Imports System.Net
Imports DevExpress.DataAccess.Json
Imports DevExpress.XtraReports.UI
Private Function CreateReport() As XtraReport
Dim report As New XtraReport()
Dim DetailBand As New DetailBand()
DetailBand.HeightF = 50
Dim XRLabel As New XRLabel()
XRLabel.WidthF = 300
XRLabel.ExpressionBindings.Add(New ExpressionBinding("BeforePrint", "Text", "[CompanyName]"))
DetailBand.Controls.Add(XRLabel)
report.Bands.Add(DetailBand)
report.DataSource = CreateDataSourceFromWeb()
'report.DataSource = CreateDataSourceFromFile();
'report.DataSource = CreateDataSourceFromText();
report.DataMember = "Customers"
Return report
End Function
The JsonDataSource object uses System.Text.Json. Install the System.Text.Json package if your application does not reference this library. .NET projects do not require manual installation of the System.Text.Json package, as it is already included in the .NET environment.
Set the DevExpress.DataAccess.Native.Json.JsonLoaderHelper.ProcessingLibrary property to NewtonsoftJson to use the Newtonsoft.Json library instead. Then, install the Newtonsoft.Json NuGet package.
You can now call the CreateReport() function and invoke the End-User Report Designer with the created report. Refer to the following topics for instructions on how to do this in different platforms:
See Also