Code On Time: User Interface

Blog

User Interface

Friday, October 26, 2012Print Subscribe

Let’s add a Subtotal field to the order. This field will sum up the extended prices of all order details.

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

The new field’s settings will be:

Property	Value
Field Name	Subtotal
Type	Currency
The value of this field is computed at run-time by SQL Expression	True
SQL	select sum(UnitPriceQuantity(1-Discount)) from "Order Details" where "Order Details".OrderID = Orders.OrderID
Label	Subtotal
Values of this field cannot be edited	True
Data Format String	c

Press OK to save the field.

Your application will incorporate this SQL Formula in the SELECT statements composed at runtime. This statement will look similar to:

select *, 
   (
   select sum(UnitPrice*Quantity*(1-Discount)) from "Order Details"
   where "Order Details".OrderID = Orders.OrderID
   ) Subtotal
from 
   "Orders" Orders

This is the output produced when the statement is executed in SQL Management Studio. The actual statement will look more complex, and may include user-defined sorting, filtering, and paging parameters.

We’ll need to bind this field to views, so that the end user can see the field value.

Drop Orders / Fields / Subtotal field node onto Orders / Views / grid1 node.

Drop Subtotal field node onto Orders / Views / editForm1 node.

Drop Subtotal field node onto Orders / Views / createForm1 view node.

Regenerate the application, and select any order on the Order Form page. You will see the Subtotal field showing the sum of extended prices.

Labels: Designer, Tutorials, User Interface, Web Application Generator

Friday, October 26, 2012Print Subscribe

Order Form Sample–Part 20

The Order Details grid view displays several unnecessary reference fields, such as Order Customer Company Name, Order Employee Last Name, and Order Ship Via Company Name. We will get rid of these redundant fields. Let’s also display the average Unit Price, total Quantity, average Discount, and total sum of Extended Price at the bottom of the grid.

In the Project Explorer, expand to Order Form / c100 / dv101 / grid1 node. Highlight the data fields OrderCustomerCompanyName, OrderEmployeeLastName, and OrderShipViaCompanyName. Right-click and press Delete.

Now that the redundant data fields have been removed, let’s assign aggregates. Double-click on Order Details / Views / grid1 / UnitPrice.

Change the Aggregate Function property:

Property	New Value
Aggregate Function	Average

Press OK to save the data field.

Next, double-click on Quantity data field.

Change the following value:

Property	New Value
Aggregate Function	Sum

Save the data field, and double-click on Discount.

Change Aggregate Function to “Average”.

Property	New Value
Aggregate Function	Average

Press OK, and double-click on ExtendedPrice.

Change Aggregate Function to “Sum”.

Property	New Value
Aggregate Function	Sum

Press OK to save Extended Price data field.

Generate the application, and navigate to Order Form page. Select any order. You will see that the list of order details will not display redundant order information, and displays aggregates at the bottom of the grid.

Labels: Designer, Tutorials, User Interface, Web Application Generator

Monday, October 8, 2012Print Subscribe

Feature: Extending Apps With Build-in Application Server

Code On Time applications may include a built-in application server. The application server components of a generated app allow extending web apps with custom clients implemented on virtually any modern platform. The clients issue REST requests to the application server to perform CRUD operations when allowed by the web app configuration.

For example, one can create a static HTML page that allows submission of application data by anonymous users.

An HTML form configured to POST data to web app created with Code OnTime

A desktop application implemented as a Native Windows Client can browse and search data of a web app.

A native Windows Client allows searching and browsing product data managed by a web app created with Code On Time

A custom user control can be jQuery-enabled to perform CRUD request to the web app. This provides ultimate flexibility when implementing custom user interface.

A jQuery-enabled User Control can interact with the application server built-in the web app for ultimate flexibility when implementing custom user interface

The application sever supports cross-domain CRUD operations. This makes possible creating an entire data access layer with business rules and dynamic access control rules in the foundation of an application. The user interface of the app can be completely custom made and reside on different server if needed.

Labels: Application Factory, Business Rules/Logic, Features, User Interface, Web Application Generator