Getting Started with FlexReport for UWP

In July, we released the new FlexReport for UWP, and today we'll take you through the steps needed to create and show a FlexReport in a UWP app using SQLite database, and also look at the few differences from the WinForms version of FlexReport.

Download full sources | Download C1Studio Free Trial

Client-generated Reports

Unlike some other UWP report generators in which the reports are generated on a server and allow to view or print the server-generated report, FlexReport for UWP generates the report completely on the client UWP system. This has both advantages and disadvantages, depending on the situation. One of the main advantages is that you don't need to set up and run a special dedicated report server—as long as you have your data, you don't need any servers. All work is done on the client. Depending on the complexity of the report, it can also reduce network traffic, as you only need to send data, not the whole report, over the net.

Supported Data Sources

FlexReport for UWP currently supports the following data sources:

• SQLite
• An object in an external DLL supporting IC1FlexReportExternalRecordset
• An object that supports either IC1FlexReportRecordset or IList (needs to be assigned to DataSource.RecordSet in code)

Using SQLite

To create a report that uses an SQLite data source, you need to do the following, provided that you have your SQLite data source in place:

1. Install SQLite on the Windows system that you'll use to design the reports, so that you can design and test your reports targeting UWP.
2. Design the reports using the WinForms FlexReport Designer application as usual, using SQLite data sources.
3. Create a UWP app that uses FlexReport for UWP to generate the reports, and FlexViewer for UWP to view them.

Installing SQLite for WinForms

To use SQLite in the FlexReport Designer App, you need to download and install it on your system. Note that the bitness (32 bit or 64 bit target) of your SQLite installation must match the bitness of the FlexReport Designer app that you want to run. Two versions of the designer app are shipped with C1 Studio:

• C1FlexReportDesigner.4.exe, which is built for any CPU target, and will run in 64 bit space on a 64 bit system
• C1FlexReportDesigner32.4.exe, which is built for x86 target and will run in 32 bits on any system

To use SQLite data sources in the designer app, you need to match the bitness of the SQLite client with the flavor of the C1FlexReportDesigner executable. Once SQLite is installed, the "SQLite Data Provider" should appear in the "Data Provider:" dropdown of the designer's Data Sources dialog: SQLite Data Provider In this example we'll use the C1NWind.db file, which contains our standard sample C1NWind database in SQLite file format. The file is shipped with our UWP samples, or can be downloaded as part of the FlexReportSamples sample where it lives in Resources\C1NWind.db.

Creating a Sample Report

1. To create a sample report, click the "Empty Report" in the New Report combo, then open the data source editor for the Main data source.
2. Select "SQLite Data Provider" from the dropdown (as shown on the screenshot above), then click the "..." button to the right of the "Connection string" textbox to select the C1NWind.db file (no password is required).
3. Now the Data Source tab should have the Tables node filled with the available table. For this sample, we'll pick the Products table.
4. If you click OK now, the report's Main data source will include all fields from the Products table. Alternatively, you can specify an SQL select statement in the data source editor. You'll see the selected fields in the designer's data tree: Products table (Note the way the path to C1NWind.db is specified using the ?(SpecialFolder.SystemDefault) syntax - more on this later.
5. You can then create a simple report that will list all available products, by adding the fields to the detail section as usual (see FlexReport Designer documentation for details).
6. Press F5 or select Preview in the designer's ribbon to run the report.

You should see a preview similar to this one: ProductList report preview in designer Our sample report is called ProductList. This name will be used in our UWP app when we load the report.

SystemDefault Special Folder

FlexReport connection strings support a special syntax that allows us to specify locations defined by the Environment.SpecialFolder enumeration instead of physical paths. For example, you can specify an Access data source like so:

Data Source=?(SpecialFolder.MyDocuments)\\ComponentOne Samples\\Common\\C1NWind.mdb

This works in WinForms environment but not in UWP, because paths defined by the Environment.SpecialFolder enumeration are not available to a UWP app. To allow using the same syntax in both WinForms and UWP report definitions, two additional constants are supported by FlexReport:

• ?(SpecialFolder.SystemDefault): in WinForms, this resolves to Environment.SpecialFolder.MyDocuments, while in UWP it resolves to ApplicationData.Current.LocalFolder
• ?(SpecialFolder.BasePath): this resolves to an arbitrary string specified by the C1FlexReport.BasePath property.

With this in view, we can specify the data source definition in our sample like so:

Data Source=?(SpecialFolder.SystemDefault)\\C1NWind.db

It works both in WinForms environment (e.g in the FlexReport Designer) and in a UWP app.

Creating a UWP App to Run the Report

The following steps allow you to create a simple UWP app that generates the report and shows it in a FlexViewer control (provided that you have the ComponentOne Studio UWP Edition installed):

1. Create a new UWP app in Visual Studio
2. Add a FlexViewer control to the main page
3. Add a reference to C1.UWP.FlexReport (in Universal Windows/Extensions)
4. Download the FlexReport.SQLite project, add it to your solution, and add a reference to it to your app's project. This is needed because SQLite is often updated, and FlexReport.SQLite works as a wrapper, allowing the FlexReport assembly to avoid having a hard reference to SQLite.
5. Add the ProductsUWP.FLXR report definition file that we created using the designer to the Assets folder of your project, with Content build action.
6. Add the sample C1NWind.db file to Assets, also as Content.
7. Add the following handler to the Loaded event of your app's Main page:

private async void Page_Loaded(object sender, RoutedEventArgs e)
{
  // Copy the SQLite database file from app's Assets to LocalFolder - in a .FLXR report def,
  // it can be referenced as ?(SpecialFolder.SystemDefault):
  // Data Source=?(SpecialFolder.SystemDefault)\C1NWind.db
  // When designing the report, ?(SpecialFolder.SystemDefault) refers to Environment.SpecialFolder.MyDocuments, so you can
  // put the report database file in your MyDocuments folder to conveniently design and test run your reports:
  var dbPath = Path.Combine(ApplicationData.Current.LocalFolder.Path, "C1NWind.db");
  if (!File.Exists(dbPath))
    File.Copy(@"Assets\C1NWind.db", dbPath);

  // Create and load the report:
  C1FlexReport report = new C1FlexReport();
  using (Stream fs = File.OpenRead("Assets/ProductsUWP.flxr"))
    report.Load(fs, "ProductList");

  // Assign the report to the viewer's DocumentSource - it will be generated automatically
  // (asynchronously by default) when the viewer shows it:
  this.flexViewer.DocumentSource = report;
}

When you run your app, the FlexViewer will show the report: FlexReport UWP App That's it: we'e created a UWP app that generates and shows a FlexReport. FlexViewer has built-in functionality that allows to view, print or export the report.

UWP Version Limitations

The current version of FlexReport for UWP has the following limitations compared to the WinForms version:

• The set of supported data sources is smaller than in WinForms version, as described at the beginning of this post.
• RtfFields and RTF text in Fields are not supported.
• ChartFields are not supported.
• Custom fields (including Map custom field) are not supported.

Other Data Sources

In a subsequent post we'll show how to bind a FlexReport for UWP at runtime to an OData Test Service data source using the Simple.OData.Client library installed automatically as a Nuget package.

Download full sources | Download C1Studio Free Trial