How to print 3 column self-adhesive labels with XtraReports in LightSwitch

Requirement

Print self-adhesive labels from within a Lightswitch project. The labels I need are on pages in A4 size, 70mm wide and 35 mm high, 8 rows of labels and 3 columns of labels.

Prerequisites

1. The DevExpress ExtraReports extension for LightSwitch is installed. to use it in a LS project you need to add the Extension to you project. In the project properties, select the extension tab and check the DeveExpress XtraReports extension.
   
2. Add the XtraReports as a WCF RIA data source.
1. Right click on the Data sources folder, select ‘Add Data Source…’
   
2. Choose WCF RIA Service, then ‘Next’ button.
   
3. Select the XtraReportsService, then click ‘Next’
   
4. Check ‘Entities’ and click ‘Finish’.
   
3. Add a Data Source connected to the AdventureWorks database, I will use the tables Product, ProductSubCategory and ProductCategory. Product is related to ProductSubCategory which is in turn related to ProductCategory.
4. To print the labels I add a query on the Products entity with a filter on the CategoryId, this query is called qryProductsbyCategory. The query uses a Where statement on ProductSubCategory.ProductCategory.ProductCategoryId, wich has to be equal to a parameter ProductCategoryId of type int (not optional).
   

Add the report

1. In the solution explorer select ‘File View’
   
2. In the solution explorer, right click on ‘Server, select ‘Add / New Item…’
   
3. Select the XtraReport Class item, and click Add.
   
4. A c-sharp class XtraReport1.cs and references will be added, a designer window and Xtrareports toolbox windows are opened.
   
5. You can rearrange the Report explorer, Field list and group and sort window.
   
6. In the Solution explorer, right click on XtraReport1.cs and rename it to LabelProductsByCategory.cs
7. Bind the report to the query
1. click the smart tag in the upper left corner of the report design window (see red marker in screenshot). This will open the ‘Report Tasks’ menu.
2. In the DataSource combobox selec qryProductByCategory
   
3. An object called LightSwitchDataSource1 is added at the bottom of the design screen.
8. Design the label report layout
1. Change the units from inches to millimeters (TenthsOfAMillimeter)
   
2. click the smart tag and. In the ‘Report Tasks’ menu, select ‘Design in Report Wizard…’, select ‘Label report’, click ‘Next’
   
3. In the Label Information dialog, you will have to select the proper label for your purpose. For my purpose 3 columns of labels 70mm wide and 8 rows of labels 35 mm high on a sheet size A4, there is the Zweckform type 3422.
   
4. In the next screen you can correct the labels dimensions, as the dimensions are a bit off. 701.04 must be 700, 350.52 must be 350. Click finish.
   
5. In the report design window, we see the report layout ready to add fields.
   
6. First of all, remove the line around the xrPanel1 control, this is the rectangular box that lays over the text ‘Place controls here to keep them together’. To select this panel you need the Pointer tool from the Toolbox, DX11.1 Report controls.
1. select pointer
   
2. select xrPanel1, notice the selection handles.
   
3. In the Properties panel, the Boreders property of xrPanel1 must be set to ‘None’
   
7. Add fields to the Label, from the Field List pane, drag the Name and ProductNumber field on xrPanel1.
   
8. Rearrange the width and height.
   
9. As this is a label, I do not want to make the label grow in height to accommodate the text of a long name. I have made the Name label high enough to accommodate to lines of text. Click on the smart tag of the Name label, uncheck the CanGrow option. WordWrap is left on.
   
10. Change the font size of the Name label. This can be done in the Font properties of the Name label. Click on the button with 3 dots … and in the font dialog set the size to 12 points.
    
11. Sort the report on the productname. In the Group and sort window, click on Add a sort
1. Select the Name field.
   
2. The sort is ascending by default. this can be changed in the same window.
   
12. Save the report, build the solution.

Add a preview screen for the report

1. In Solution explorer, switch back to Logical view.
   
2. Right click on the Screens folder in the LS project. Select Add screen…
   
3. In the Add new screen dialog window, select the Report preview Screen template and change the screen name to LabelProductsByCategory.
   
4. The Application designer window shows the new screen. Click the Write Code button, select LabelProductsByCategory_Activated.
   
5. In the Activated method, a line of code for the reportname is added by default, replace it with the correct name of the report.
   

   partial void LabelProductsByCategory_Activated()

   {

       this.ReportTypeName = "LightSwitchApplication.LabelProductByCategory";

   }

Debug and view the report.

1. The report preview screen shows a parameters numeric updown box (because the parameter is and integer).
   


2. Enter value of 2 to show products of category 2. Click Submit.
   


3. Reminder: As can be seen in the preview: if names are wider than the width of the label control, the name will be continued on a second line. since autogrow is off, the name control does not grow and therefore the number control does not move down to the next adhesive label.

Conclusion

XtraReports for LightSwitch can be used to print self-adhesive labels. It is fairly easy to create such a report in a minimal amount of time.

In a follow-up article I will describe how to add a lookup list with names for the product categories instead of the numeric updown box.