Create an Invoice Manually
- 9 minutes to read
This tutorial describes how to create a simple invoice report displaying information about customers and their orders. You can perform similar steps to create various invoice layouts depending on your requirements.
Tip
See the Create an Invoice with a Template topic to learn how to create an invoice report based on a predefined layout.
Note
Watch the Video: Reporting: Creating Invoices (YouTube)
Perform the actions below to create an invoice report:
Create a Reporting Application
To get started with this tutorial, open an existing reporting application or create a new one from scratch. See Adding a Report to Your .NET Application to learn how to create a reporting application on different platforms.
Most of the reports you create are platform-agnostic, which means that you can use them later in applications created for any supported platform.
Bind a Report to Data
Do the following to bind a report to the required data source:
Click the report’s smart tag. In the invoked actions list, expand the XtraReportBase.DataSource property’s drop-down list and click Add Report Data Source.
On the first page of the invoked Data Source Wizard, you can choose the required data source type. Select Database and click Next to proceed.
The following page allows you to specify whether you want to use an existing data connection or create a new one. For this example, select an existing connection to the sample Northwind database and click Next.
On the next page, you can choose which tables, views and/or stored procedures to add to the report.
Obtain data from two different tables to display information about customers and orders at the same hierarchical level in the report. Click the
button for the Queries category to create a custom query. In the invoked Query Builder, add the Customers and Orders data tables to a query and join them based on a key column.
On the same wizard page, select the data view providing order details for listing products included in each order in the invoice. Click the Manage Relations button to specify a master-detail relationship between the queries. In the invoked dialog, connect the required key columns using drag-and-drop.
- Click Finish to complete the wizard.
After these steps, make sure that an appropriate data member is assigned to the report (the Customers query in this tutorial).
Prepare the Master Report Layout
Create the master report layout to display basic information about customers and their orders.
Switch to the Field List and drop the required data fields onto the Detail band. New controls of appropriate types are automatically created and bound to the corresponding fields.
Drop Label controls from the Toolbox onto the band to display static captions for specific data fields.
Double-click the added labels one after another and enter the required text.
Use the Line control to separate data.
Prepare the Detail Report Layout
Perform the following steps to create a detail report and construct its layout to show the order details in a tabular form:
Create a Detail Report Band by right-clicking the report’s surface. In the invoked context menu, select Insert Detail Report, and then, select the master-detail relationship’s name.
Add dynamic content to the detail report. Go to the Field List, select the data fields while holding down CTRL or SHIFT and drag-and-drop them onto the Detail band. This automatically creates a Table control with table cells bound to the corresponding fields.
You should drag-and-drop fields from the category corresponding to the master-detail relationship to correctly generate the detail report’s data.
Add the Group Header band to the detail report to display captions for table columns. Right-click the detail report, and in the context menu, select Insert Band | GroupHeader.
To create column headers, select the same data fields in the Field List and drag-and-drop them onto the Group Header band using the right mouse button.
Click the Detail Report band’s smart tag, and in the invoked actions list, set the Band.PageBreak property to AfterBand to print each order on a separate page.
Create a Calculated Field
This section demonstrates how to create a custom field whose values are calculated using a pre-defined expression.
Do the following to evaluate an extended price based on the price, quantity and discount values obtained from a database:
In the Field List, right-click any item inside the data relationship node, and in the invoked context menu, select Add Calculated Field.
Select the created calculated field, and in the Properties window, change its name to ExtendedPrice. Click the CalculatedField.Expression property’s ellipsis button, and in the invoked Expression Editor, construct the expression based on the UnitPrice, Quantity and Discount fields.
You can use the created calculated field as an ordinary data field. Add a cell to a table in the Detail band and drop the calculated field onto this cell. Additionally, create one more table cell in the Group Header for displaying the corresponding caption.
Specify Data Formatting
The next step is to specify report elements’ value formatting to improve displaying their incoming data.
Note
You can use this approach to format data when the UserDesignerOptions.DataBindingMode is set to DataBindingMode.Expressions or DataBindingMode.ExpressionsAdvanced.
See Format Data to learn about the legacy approach to solving this task.
In the master report’s Detail band, select controls bound to date fields while holding down CTRL or SHIFT. Switch to the Properties panel and click the XRLabel.TextFormatString property’s ellipsis button. In the invoked Format String Editor, activate the DateTime category and select the format, for example, display dates as a month (name) followed by the day (number) and year (four digits).
Select the table cell bound to the Discount data field in the detail report’s Detail band and click its smart tag. Click the Format String property’s ellipsis button, and in the invoked Format String Editor, apply the Percent format. In this case, field values are multiplied by 100 and displayed with a percent symbol.
- In the detail report’s Detail band, select the cells bound to the UnitPrice and ExtendedPrice fields. Invoke the Format String Editor once again and choose the format preset from the Currency category (for instance, c2).
Calculate a Summary
Do the following to calculate a total price for each order as a sum of Extended Price values:
Note
You can use this approach when the UserDesignerOptions.DataBindingMode is set to DataBindingMode.Expressions or DataBindingMode.ExpressionsAdvanced.
See Calculate a Summary to learn about the legacy approach to solving this task.
Add the Group Footer band to the detail report in the same way as the Group Header.
Drop the Label control onto the added band and click its smart tag. In the invoked Label Tasks window, click the Summary field’s ellipsis button.
In the Summary Editor window:
- Set the Summary running property to the Report value to calculate the summary for the entire detail report.
- Set the Summary function property to Sum.
- Set the Argument Expression property to [ExtendedPrice].
Back in the Label Tasks window, use the Format String property to format the summary’s value (for instance, set it to Total: {0:c2}).
Sort Data
Perform the following steps to sort data in the detail report:
Select the Detail band in the detail report and switch to the Group and Sort Panel. Click Add a Sort, and in the invoked drop-down window, select the Product Name field.
Use the Sort Order drop-down list to define the sort order.
Customize the Report Appearance
Do the following to customize the report and its elements’ appearance:
Click the gray area around the design surface to select the report, and in the Properties window, specify the font settings. These settings are distributed to all report elements.
You can adjust a control’s font independently from its parent (for instance, make summary values bold).
Change specific controls’ (bound to date fields, price fields, etc.) text alignment using the XRControl.TextAlignment property.
Create a global visual style to apply it afterwards to multiple controls. Right-click the Styles node in the Report Explorer and choose Add Style.
Select the created style and specify its settings in the Properties window (the fore color in this example).
Apply a style to a report element by dragging the style form the Report Explorer onto the element.
You can provide different appearances to alternating (odd and even) table rows in the detail report. Select the table and expand the XRControl.Styles property in the Properties window. Invoke the drop-down list for the EvenStyle property and select New.
Specify the created style’s appearance settings (for example, background color).
Add Additional Information
Do the following to provide additional information to your invoices, such as the report name, company logo and current date:
- Add the Page Header band to the master report to display the required information on each invoice page.
Drop the Label control from the Toolbox onto the Page Header, double-click the control and type “Invoice“. Specify the required appearance settings (font, foreground color, etc.).
Add the Page Info control to the Page Header band to display system date in the report.
Click the control’s smart tag, and in the invoked actions list, set the XRPageInfo.PageInfo property to DateTime.
- Click the XRPageInfo.TextFormatString property’s ellipsis button, and in the invoked Format String Editor, select a date format as in the Specify Data Formatting section above.
Drop the Picture Box control onto the Bottom Margin band to print a company logo at the bottom of the invoice page.
Click the control’s smart tag, and then click the XRPictureBox.ImageSource property’s ellipsis button. In the invoked Open dialog, select an image to display.
Set the XRPictureBox.Sizing property to ZoomImage to proportionally resize the image to fit the control.
View the Result
The invoice report is now ready. Switch to the Preview tab to view the result.