Friday, April 13, 2012

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.
    image
  2. Add the XtraReports as a WCF RIA data source.
    1. Right click on the Data sources folder, select ‘Add Data Source…’
      image
    2. Choose WCF RIA Service, then ‘Next’ button.
      image
    3. Select the XtraReportsService, then click ‘Next’
      image
    4. Check ‘Entities’ and click ‘Finish’.
      image
  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).
    image

Add the report

  1. In the solution explorer select ‘File View’
    image
  2. In the solution explorer, right click on ‘Server, select ‘Add / New Item…’
    image
  3. Select the XtraReport Class item, and click Add.
    image
  4. A c-sharp class XtraReport1.cs and references will be added, a designer window and Xtrareports toolbox windows are opened.
    image
  5. You can rearrange the Report explorer, Field list and group and sort window.
    image
  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
      image
    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)
      image
    2. click the smart tag and. In the ‘Report Tasks’ menu, select ‘Design in Report Wizard…’, select ‘Label report’, click ‘Next’
      image
    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.
      image
    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.
      image
    5. In the report design window, we see the report layout ready to add fields.
      image
    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
        image
      2. select xrPanel1, notice the selection handles.
        image
      3. In the Properties panel, the Boreders property of xrPanel1 must be set to ‘None’
        image
    7. Add fields to the Label, from the Field List pane, drag the Name and ProductNumber field on xrPanel1.
      image
    8. Rearrange the width and height.
      image
    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.
      image
    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 dotsand in the font dialog set the size to 12 points.
      image
    11. Sort the report on the productname. In the Group and sort window, click on Add a sort
      1. Select the Name field.
        image
      2. The sort is ascending by default. this can be changed in the same window.
        image
    12. Save the report, build the solution.

Add a preview screen for the report

  1. In Solution explorer, switch back to Logical view.
    image
  2. Right click on the Screens folder in the LS project. Select Add screen…
    image
  3. In the Add new screen dialog window, select the Report preview Screen template and change the screen name to LabelProductsByCategory.
    image
  4. The Application designer window shows the new screen. Click the Write Code button, select LabelProductsByCategory_Activated.
    image
  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).
    image

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

  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.

3 comments:

Unknown said...

louis vuitton outlet, sac longchamp, ralph lauren pas cher, replica watches, louboutin outlet, louboutin shoes, christian louboutin outlet, prada outlet, ugg boots, longchamp pas cher, tiffany and co, louis vuitton, louboutin, air jordan pas cher, tory burch outlet, cheap oakley sunglasses, nike outlet, polo ralph lauren outlet, ray ban sunglasses, polo ralph lauren outlet, louis vuitton outlet, nike air max, replica watches, louis vuitton, air max, longchamp outlet, michael kors, oakley sunglasses, chanel handbags, nike free, nike roshe run, oakley sunglasses, burberry, tiffany jewelry, ray ban sunglasses, kate spade outlet, prada handbags, oakley sunglasses, nike air max, louis vuitton, louboutin pas cher, uggs on sale, ray ban sunglasses, oakley sunglasses, longchamp, jordan shoes, gucci outlet, ugg boots, nike free, longchamp outlet

Unknown said...

lancel, celine handbags, jimmy choo shoes, bottega veneta, nike roshe, asics running shoes, gucci, giuseppe zanotti, nike huarache, mcm handbags, herve leger, hollister, hollister, new balance, ray ban, p90x workout, soccer shoes, babyliss, longchamp, mac cosmetics, nike trainers, chi flat iron, mont blanc, vans, vans shoes, ghd, iphone cases, nike air max, hollister, ferragamo shoes, ralph lauren, louboutin, nike air max, beats by dre, valentino shoes, converse outlet, lululemon, north face outlet, instyler, soccer jerseys, birkin bag, insanity workout, baseball bats, north face outlet, abercrombie and fitch, timberland boots, reebok shoes, nfl jerseys, oakley, wedding dresses

Unknown said...

hollister, louis vuitton, canada goose outlet, moncler, pandora jewelry, swarovski, louis vuitton, bottes ugg, coach outlet, moncler, supra shoes, montre pas cher, moncler, ugg,uggs,uggs canada, ugg,ugg australia,ugg italia, canada goose, links of london, pandora jewelry, karen millen, doudoune canada goose, juicy couture outlet, moncler, pandora charms, marc jacobs, swarovski crystal, moncler, ugg pas cher, thomas sabo, louis vuitton, moncler outlet, moncler, canada goose, canada goose uk, canada goose outlet, ugg boots uk, juicy couture outlet, wedding dresses, moncler, canada goose, toms shoes, louis vuitton, replica watches, sac louis vuitton pas cher, pandora charms, canada goose