Blog: Posts from November, 2012

Labels
AJAX(112) App Studio(7) 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(183) 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
Posts from November, 2012
Saturday, November 3, 2012PrintSubscribe
Creating an Edit Page

Data views are instances of data controllers placed on pages. The application generator automatically configures data views to start presentation with a list of records. Each data controller defines grid1 view to render a list of records.

Customers grid view.

If business requirements call for a single record to be visible to an end user, then the grid view becomes unnecessary.

A developer can specify that the form view editForm1 for the data view on the page. The form will be displayed initially. The data view will switch back to grid1 as soon as user initiates Insert, Update, Delete, or Cancel actions. The action state machine of data controllers does not define specific actions that must follow any of these commands. The client library will simply display the first view of the data controller.

The first view in Customers data controller is 'grid1'.

View ‘grid1’ happens to be first, and users will see a list of data records.

The developer has the option to add multiple actions that would select editForm1 after Insert, Update, Delete, or Cancel actions. The easiest solution is to move editForm1 to the first position.

To preserve the default functionality of the data controller on other pages, you may want to clone the controller, and have the clone configured to display data in the form view editForm1.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Customers controller node, and press Clone.

Clone context menu option for Customers controller.

A clone of Customers will be created and named “Customers1”. Drop Customers1 / Views / editForm1 node on the left side of grid1 node to place it first in the hierarchy.

Dropping editForm1 view node on the left side of grid1 view node.     View 'editForm1' is now first in the hierarchy.

Enter the following Filter Expression to display a specific record:

Property Value
Filter Expression CustomerID = 'BONAP'

Press OK to save. This expression will filter data to a specific CustomerID. The filter expression can also be configured to use a parameter returned by a business rule.

Right-click on Customers1 node and press Copy.

Copying Customers1 controller using the context menu option.

Switch to the Pages tab. On the toolbar, press the New Page icon.

New Page context menu option on Project Explorer toolbar.

Assign the page a name:

Property Value
Name My Account

Press OK to save. The page will be added to the bottom of the hierarchy of pages. Drop My Account page node on the right side of Home page node.

Dropping 'My Account' page node on the right side of Home page.     My Account page is now second in the hierarchy.

Right-click on My Account node, and press Paste.

Paste context menu option for My Account page node.

This will instantiate Customers1 controller in a new container on My Account page.

Customers1 controller instantiated as a data view on My Account page.

On the Project Designer toolbar, press Browse. When the My Account page loads, the data view will open in edit form.

My Account page opened in edit form.

Saving changes to the record, pressing Close, or creating a new record will keep the user in the edit form.

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.

Continue to URL Parameters