Designer

Labels
AJAX(112) App Studio(9) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(178) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(184) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(3) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Designer
Thursday, December 20, 2012PrintSubscribe
Order Form Sample–Part 37

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.

Creating a new action in 'ag2' of Orders controller.

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.

Dropping action 'a100' on the left side of 'a1'.     Action 'a100' placed first in the heirarchy.

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.

'Order Report' action is now present on the order form

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.

'Order Report' action is not present in 'edit' mode.

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.

Copying action 'a100' into action group 'ag7'.     Action 'a100' duplicated in action group 'ag7'.

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

Dropping 'a100' action on the left side of action 'a1'.     Action 'a100' placed first in action group 'a100'.

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.

Duplicating action 'a100' in the same action group.    Duplicate of 'a100' created.

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

Dropping action 'a101' before action 'a4'.     Action 'a101' placed before action 'a4'.

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.

Thursday, December 6, 2012PrintSubscribe
“Report Label” Property

The “Report Label” property allows specifying the header text displayed at the top of a report.

By default, the name of the controller will be displayed. The picture below shows the default header text of a report created from Customers “grid1” view.

Customers report with default header text of 'Customers' at the top of the page.

Let’s change the label of the report.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Double-click on Customers / Views / grid1 node.

View 'grid1' of Customers controller.

Change the following:

Property New Value
Report Label List of Customers

Press OK to save. On the toolbar, press Browse.

Navigate to the Customers page. On the action bar, press Report | PDF Document.

Printing a PDF Report from Customers grid view.

Open the PDF file that was downloaded to your hard drive. The report will have the specified text displayed at the top of the page.

Customers report with customized header text of 'Report of All Customers' at the top of the page.

Thursday, November 29, 2012PrintSubscribe
Calculating Read-Only Fields with JavaScript

When storing personal information, it is common practice to enter first and last name separately into the database. However, it is easier to quickly read and analyze data that combines the two fields into one.

Let’s create a Full Name calculated field in the Employees controller that will concatenate First Name and Last Name field values.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Employees / Fields node, and press New Field.

New Field context menu option for Employees controller in the Project Explorer of web application designer.

Give this field the following settings:

Property Value
Name FullName
Type String
Length 80
Allow Null Values true
The value is calculated by a business rule expression true
Label Full Name
Values of this field cannot be edited true

Press OK to save the field.

In the Project Explorer, drag Employees / Fields / FullName (String(80), read-only field node and drop it onto Employees / Views / createForm1 to create a data field.

Dropping 'FullName' field node onto 'createForm1' view.     FullName data field created in 'createForm1' view.

Right-click on Employees / Fields / FullName (String(80), read-only node, and press Add JavaScript Converter.

'Add JavaScript Converter' context menu option for FullName field node.

Double-click on Employees / Fields / FullName (String(80), read-only node, and change the Context Fields property:

Property Value
Context Fields FirstName, LastName

The new business rule will open in the Project Browser. Replace the default script with the following:

Property New Value
Script
if ([FirstName] != null && [LastName] != null) {
    [FullName] = [FirstName] + ' ' + [LastName];
}

Press OK to save the business rule. On the Project Browser toolbar, press Browse to generate the web application.

Navigate to the Employees page, and create a new employee. The Full Name field is displayed at the bottom of the form, and is read-only. If a value is entered into First Name, the field will not be updated.

Full Name field is present at the bottom of New Employees form.

Enter a value in both First Name and Last Name, and press Tab key to shift focus. Full Name field will automatically be calculated.

When first and last name are entered, Full Name field value is calculated.