User Interface

Labels
AJAX(112) App Studio(8) 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(177) 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(2) 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
User Interface
Thursday, November 1, 2012PrintSubscribe
URL Parameters

Data views on the page can detect and use certain parameters specified in the URL in the address bar of the web browser.

Filter By Field

The picture below shows an unfiltered list of customers.

Unfiltered list of customers.

A URL parameter will act as a filter for any data view on the page if the filter name matches to the name of a data field in the view. Data rows with field values unequal to the filter value will be eliminated from the data view.

For example, the following parameter will show only customers that reside in the country of “Belgium”.

Parameter Value
Country Belgium

http://demo.codeontime.com/Northwind/Pages/Customers.aspx?Country=Belgium

Customers grid view with a field filtered. The filtered field has been hidden.

The data view will hide the filtered column to prevent display of duplicate values.  The column can be shown using the “_display” parameter.

Parameter Value
Country Belgium
_display Country

http://demo.codeontime.com/Northwind/Pages/Customers.aspx?Country=Belgium&_display=Country

The filtered field has been displayed with the URL parameter 'display'.

Any combination of filters can be applied using URL parameters. Multiple fields can be listed in a comma-separated list for the “_display” parameter.

Parameter Value
Country Belgium
City Bruxelles
_display Country,City

http://demo.codeontime.com/Northwind/Pages/Customers.aspx?Country=Belgium&City=Bruxelles&_display=Country,City

Customers grid view with two filters applyed using URL parameters.

Select Record

A record can be selected using URL parameters that specify the “Select” command, a command argument to specify the view, and the primary key of the record. The specified field will be hidden on the form. When the _commandName and _commandArgument parameters are used, all controllers will perform the action unless the controller is specified using “_controller”.

Parameter Value
_commandName Select
_commandArgument editForm1
ProductID 1
_controller Products

http://demo.codeontime.com/Northwind/Pages/Products.aspx?_commandName=Select&_commandArgument=editForm1&ProductID=1&_controller=Products

URL parameters used to select a record in edit form.

Edit Record

A record can be edited with URL parameters similar to selecting a record. The only difference is the use of “Edit” command name instead of “Select”.

Parameter Value
_commandName Edit
_commandArgument editForm1
ProductID 1
_controller Products

http://demo.codeontime.com/Northwind/Pages/Products.aspx?_commandName=Edit&_commandArgument=editForm1&ProductID=1&_controller=Products

URL parameters to open a record in edit mode.

Note that successfully performing any action in form view will navigate to the previous page, instead of going back to the grid. This behavior makes it easier to build a logical workflow for users without having to write redirection logic.

Create New Record

URL parameters can be used to open the form in new mode by specifying the “New” command and correct view.

Parameter Value
_commandName New
_commandArgument createForm1
_controller Orders

http://demo.codeontime.com/Northwind/Pages/Orders.aspx?_commandName=New&_commandArgument=createForm1&_controller=Orders

New record form opened using URL parameters.

Initial values can be specified for each field. These fields will also be hidden by default, and require “_display” parameter to be shown.

Parameter Value
_commandName New
_commandArgument createForm1
_controller Orders
ShipName John
_display ShipName

http://demo.codeontime.com/Northwind/Pages/Orders.aspx?_commandName=New&_commandArgument=createForm1&_controller=Orders&ShipName=John&_display=ShipName

New record form opened with initial values specified in the URL.

When specifying an initial value for a lookup, both the lookup field and the alias field must be specified.

Parameter Value
_commandName New
_commandArgument createForm1
_controller Orders
ShipName John
CustomerID AROUT
CustomerCompanyName Around the Horn
_display ShipName,CustomerID,CustomerCompanyName

http://demo.codeontime.com/Northwind/Pages/Orders.aspx?_commandName=New&_commandArgument=createForm1&_controller=Orders&ShipName=John&CustomerID=AROUT&CustomerCompanyName=Around the Horn&_display=ShipName,CustomerID,CustomerCompanyName

New record form opened with initial values specified in the URL and foreign key fields specified.

Friday, October 26, 2012PrintSubscribe
Order Form Sample–Part 21

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.

New Field context menu option for Orders data controller.

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(UnitPrice*Quantity*(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.

Simplified statement of 'Subtotal' SQL Formula calculation in SQL Management Studio

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.

Dropping Subtotal field node onto 'grid1' view node.     Subtotal data field node has been created in 'grid1'.

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

Dropping Subtotal field node onto 'editForm1' view node.     Subtotal data field node has been created in 'editForm1'.

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

Dropping Subtotal field node onto 'createForm1' view node.    Subtotal data field node has been created in 'createForm1'.

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

Subtotal data field is present in editForm1 of Orders.

Friday, October 26, 2012PrintSubscribe
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.

Order Form details for a selected order. The order details grid view below contains redundant fields.

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.

Deleting three data fields from 'grid1' view of OrderDetails controller.

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

UnitPrice data field node in 'grid1' view of OrderDetails controller.

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.

Quantity data field node in 'grid1' view of OrderDetails controller.

Change the following value:

Property New Value
Aggregate Function Sum

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

Discount data field node in 'grid1' view of OrderDetails controller.

Change Aggregate Function to “Average”.

Property New Value
Aggregate Function Average

Press OK, and double-click on ExtendedPrice.

ExtendedPrice data field node in 'grid1' view of OrderDetails controller.

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.

Order Form page with details of an order displayed. The order details grid view now displays less redundant data fields as well as several averages and sums.