Web Application Generator

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
Web Application Generator
Saturday, November 3, 2012PrintSubscribe
Order Form Sample–Part 26

Let’s rearrange the Order Form page to make it easier for the end user to interact with the data. To do this, we will need to add a custom “Order Form Template” user control to the page.

In the Designer, right-click on OrderForm / c100 node, and press New Control.

'New Control' option in Code On Time Project Explorer

The new control requires you to select a user control. Click on the New User Control icon to the right of the field.

'New User Control' button on the 'New Control' page

Give this user control a name:

Property Value
Name OrderFormTemplate

Press OK to create the User Control. You will return to the New Control page. Leave the rest of the settings as default, and press OK to insert the control into the page container Order Form / c100.

Control added to the Order Form page.

Press Browse on the toolbar to regenerate the application.

The new user control will be generated if it doesn’t exist. If the generator detects that the file exists, then it will not be overwritten – any changes to the file will be preserved between code generation sessions.

Friday, November 2, 2012PrintSubscribe
Navigate Action

The application framework supports Navigate action to allow directing end users to any web resource. This includes internal pages.

For example, the Orders edit form is displayed below. Let’s create a button on the form that will allow viewing the details of the customer that made the order.

Orders edit form created by Code On Time Designer.

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

New Action context menu option for Orders controller.

Assign the following values and save the action:

Property Value
Command Name Navigate
Command Argument Customers.aspx?_controller=Customers&CustomerID={CustomerID}&_commandName=Select&_commandArgument=editForm1
Header Text View Customer Details

The command argument is using data controller URL parameters.

On the toolbar, press Browse.

Navigate to the Orders page, and select an order. Take note of the customer.

Orders edit form with 'View Customer Details' button.

Press the View Customer Details button to navigate to the Customers page. The customer record associated with the order is activated.

The customer relevant to the order has been accessed.

When Insert, Update, Delete, or Cancel actions are activated, the user will be returned to the Orders page. For example, if the user presses Close button, this activates the Cancel action and the client library will return the user to the previous page.

Open in New Window

The Navigate action can also open a new window.

Go back to the Project Designer and change the command argument:

Property New Value
Command Argument _blank:Customers.aspx?_controller=Customers&CustomerID={CustomerID}&_commandName=Select&_commandArgument=editForm1

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

When the user presses the View Customer Details button, the customer will be opened in a new tab or window.

Customers form opened in new tab.

Using Hyperlink Format String

The Hyperlink Format String property of a data field can be used as an alternative to Navigate action.

In the Project Explorer, double-click on Orders / Views / editForm1 / c1 – Orders / CustomerID –> CustomerCompanyName data field node.

CustomerID data field in editForm1 view of Orders controller.

Change the following:

Property New Value
Tool Tip View Customer Details
Hyperlink Format String Customers.aspx?_controller=Customers&CustomerID={CustomerID}&_commandName=Select&_commandArgument=editForm1

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

The Customer Company Name will render as a link.

Orders form with Customer Company Name formatted as a hyperlink.

Clicking on the link will navigate to the details of the customer.

Customer details activated.

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.