Create a Swiss QR Bill

This tutorial demonstrates how to design a bill report with the QR payment part and receipt implemented according to Swiss guidelines v2.0. Follow the steps below to create a report based on the Swiss QR Bill demo from the DevExpress Demo Center.

SwissBill-Result

Add a Report

To get started with this tutorial, open an existing reporting application or create a new application (the Add a Report to Your .NET Application section explains how to create a reporting application on different platforms).

  1. Add a new blank report to your application.

  2. Select the report on the Report Designer's surface and switch to the Properties grid. Set the following properties:

    SwissBill-Report-Settings

    • Set the report's PageSettings | PaperKind property to A4.

    • Set the report's Behavior | ReportUnit property to TenthsOfAMillimeter.

    • Set the report's Margins | Left, Bottom and Right properties to 0.

Add the QR-bill Payment Part and Receipt

  1. Add the Report Footer band to the report.

    SwissBill-AddReportFooter

  2. Set the Report Footer band's PrintAtBottom property to true to display the band's content at the bottom of the report's pages.

    SwissBill-ReportFooterSettings

  3. Add the XRPanel control to the Report Footer band's bottom right-hand corner. The panel's and report page's right and bottom borders should coincide.

    SwissBill-AddPanel

  4. Set the panel's Size | Height property to 1050 and the Size | Width property - to 1480. This size corresponds to A6 format.

  5. Add one more XRPanel control to the Report Footer band's bottom left-hand corner. The panel's and report page's left and bottom borders should coincide.

    SwissBill-AddPanel

  6. Set the panel's Size | Height property to 1050 and the Size | Width property - to 620.

  7. Set the panels' Behavior | CanGrow property to false to fix the panels' size regardless their content.

Prepare Data Source

The QR payment part and receipt should contain account, creditor and debtor information. To provide data for these sections, include it in the report's data source.

The Swiss QR Bill demo uses the BillDS business class as the report's data source. Copy the SwissQRReportDataSource.cs/SwissQRReportDataSource.vb file with this class from the C:\Users\Public\Documents\DevExpress Demos 18.2\Components\Reporting\CS\DevExpress.DemoReports\SwissQRCode folder to your project to use this tutorial.

SwissBill-AddDataSourceFile

Save the project and build the solution.

Run the Data Source Wizard to bind the report to the added class' data.

Add Report Controls

The receipt and QR payment part should include the following sections:

SwissBill-Sections

Use the following report controls for these sections:

Section Control
Title XRLabel
Swiss QR Code XRBarCode
Information XRTable
Amount XRTable
Acceptance point XRLabel

Arrange these controls on the report's panel and apply font settings according to the QR bill guidelines.

Bind the table cells to the data source fields.

SwissBill-AddDataSourceFile

Do the following to set up the XRBarCode control:

  • Bind the XRBarCode control (set its Text property) to the demo data source's [QRBillData].[QRCodeData] field. This field provides data prepared in code.

  • Set the Size | Width and Height properties to 470. The guidelines recommend 46 x 46 mm. You should set 47 * 47 mm to add the quiet zone to the QR code.

  • Set the following properties in the Behavior category:

  • Set the QRCode-specific properties in the Symbology group:

Get the Result

Switch to Preview to see the result:

SwissBill-Preview