Code On Time: Application Builder

Thursday, December 20, 2012Print Subscribe

A new Report action must be configured in the Orders data controller. The action will produce a PDF output using the custom report template from the “order details” data set filtered by a selected order ID.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Orders / Actions / ag2 (Form) and press New Action.

Assign the following values:

Property	Value
Command Name	Report
Header Text	Order Report
Data	_controller=OrderDetails _view=editForm1 _template=OrderDetails_report1.rdlc _sortExpression=OrderID,ProductProductName OrderID=OrderID
When Key Selected	Yes

Press OK to save.

The highlighted parameters will instruct the reporting engine of application framework to use a specific data controller and report template.

The last expression is the filter that will limit OrderDetails data set by the order ID that was selected on the client in the data view of Orders when action has been activated.

In the Project Explorer, drop Orders / Actions / ag2 (Form) / a100 – Report | Order Report to the left side of a1 – Edit action node to place it first in the action group.

On the toolbar, press Browse. Navigate to the Order Form page, and select an order. Click on Order Report button to see the printable report with a content formatted according to the template.

If you were to click on the Print icon in the top or bottom row of action buttons, then a standard report with a list of order fields will be produced on the server.

Click on the Edit button. Notice that the Order Report button disappears.

Let’s make sure that a click on the Print icon will yield the customized Order Report, and that the same report is also accessible in edit mode.

Configuring “Print” Icon

The Print icon always activates the first “Report” action in any group with “Action Bar” scope.

In the Project Explorer, hold down Ctrl key and drop a100 – Report | Order Report node onto Orders / Actions / ag7 (ActionBar) – Report action group node.

Next, drop a100 – Report | Order Report node on the left side of a1 – ReportAsPdf action node to place it first.

The Print icon will now trigger Orders / Actions / ag7 (ActionBar) – Report / a100 – Report | Order Report action.

Order Report Action in Edit Mode

While holding Ctrl key, drop Orders / Actions / ag2 (Form) / a100 – Report | Order Report onto ag2 (Form) action group node to duplicate the action.

Drag a101 – Report | Order Report on the left side of a4 – Update when Edit to place it before the target.

Double-click on a101 – Report | Order Report node, and make the following change:

Property	New Value
When Last Command Name	Edit

Press OK to save. This action button Order Report will now appear when the form is in edit mode.

Labels: Application Builder, Designer, Reports, User Interface, Web Application Generator

Thursday, December 20, 2012Print Subscribe

Order Form Sample–Part 36

If the report was created at this time, it will look like the picture below.

There are still a few things to change:

Right-align field labels in the second column.
Format Unit Price, Extended Price, Subtotal, Freight, and Total as currency.
Format Order Date, Required Date, and Shipped Date on the left side, and hide the time.
Format Discount as percentage.

Right-Align

In Visual Studio report designer, select all field labels in the right-hand column by clicking on them while holding Ctrl key. On the toolbar, press the Align Right icon.

Format as Currency

Right-click on the cell containing Unit Price, and press Text Box Properties.

Switch to the Number section, and select “Currency” from the list.

Press OK to save. Perform the same operation on Subtotal, Freight, Total, and Extended Price text boxes.

Format As Date

Select the three date fields: Order Date, Required Date, and Shipped Date. Press the Align Left button on the toolbar.

Right-click on the first field, Order Date, and press Text Box Properties.

Switch to Number section, and make the following changes.

Property	Value
Category	Date
Type	*Monday, January 31, 2000

The screen will look like below:

Press OK to save. Make the same changes to Required Date and Shipped Date fields.

Format as Percentage

Right-click on Discount field, and press Text Box Properties.

Switch to the Number section, and select Percentage from the list.

Press OK to save. Make sure to save the report file as well.

Finalized Report

Now that the minor imperfections have been removed, the report will look more like the picture below.

The next step will be to add an action that will activate the report.

Labels: Application Builder, Reports, Web Application Generator

Thursday, December 20, 2012Print Subscribe

Order Form Sample–Part 35

Let’s add header and footer elements that will display information about the order.

Header

Drag the Text Box item from the Toolbox into the center of the header area.

Double-click on the text box and type in “Order #[OrderID]”. The bracketed statement will automatically be replaced by an expression that evaluates as the OrderID of the first order detail at run-time.

Select all the text. On the toolbar, set the Font Size to “20”. Make the text bold and underlined. Using the handles on the textbox, expand the box so that all the text is visible on one line.

Drag two more Text Box elements onto the left side of the header. Insert the following text:

Text

Customer:

[OrderCustomerCompanyName]

Bold the text in the first box, and expand the second text box.

Configure a few more text boxes shown next.

Employee:	[OrderEmployeeLastName]
Order Date:	[OrderOrderDate]
Required Date:	[OrderRequiredDate]
Shipped Date:	[OrderShippedDate]

This is how the header may look in the report designer.

Create five more pairs of text boxes in the next column.

Address:	[OrderShipAddress]
City:	[OrderShipCity]
Region:	[OrderShipRegion]
Postal Code:	[OrderShipPostalCode]
Country:	[OrderShipCountry]

For reference, see the next picture.

Footer

Insert the following text box pairs in the left side of the footer area:

Ship Name:	[OrderShipName]
Ship Via:	[OrderShipViaCompanyName]

On the right side of the footer, add placeholders for Subtotal, Freight, and Total.

Subtotal:
Freight:	[OrderFreight]
Total:

The footer will look as in the following screenshot:

The Subtotal and Total fields need to be calculated. Right-click on the text box to the right of “Subtotal”, and press Expression.

Specify the following expression:

Property	Value
Expression	=Sum(Fields!ExtendedPrice.Value, "OrderDetails")

Press OK to insert the expression into the text box.

Right-click on the text box next to “Total”, and press Expression. Specify the following expression:

Property	Value
Expression	=Sum(Fields!ExtendedPrice.Value, "OrderDetails") + First(Fields!OrderFreight.Value, "OrderDetails")

Press OK to save.

The last step is to perform some minor changes to the rendering of data.

Labels: Application Builder, Reports, Web Application Generator