Web Application Generator

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
Web Application Generator
Friday, May 11, 2012PrintSubscribe
Configuring a Three-Level Master-Detail Page

Master-detail relationships are present in all database web applications. Code On Time automatically generates two-level master-detail page layouts from your database.

You can also create three or more levels of master-detail relationships. For example, view the diagram from the Northwind database below. Order Details table references Orders table, which references Customers.

Customers, Orders, and Order Details table relationships in the Northwind database.

Let’s create a master-detail page that allows the user to select the customer, the order, and then view the order details.

Create a Northwind web application. Start the Project Designer. In the Explorer, right-click on Home page node and choose New Page option.

'New Page' option in Code On Time Project Explorer.

Give this new page the following properties:

Property Value
Name ThreeLevelMasterDetail
Index 1005
Title Three-Level Master-Detail
Path Three-Level Master-Detail
Style Miscellaneous
About This Page

This page will demo a three level master-detail data layout.

Roles (blank)

Press OK to save the page.

Let’s add containers to hold the master and detail data views. In the Project Explorer, right-click on Three-Level Master-Detail page node, and select New Container.

'New Container' option for 'Three-Level Master-Detail' page in Project Explorer.

Give this container the following properties:

Property Value
Flow New Row

Press OK to save the container. Create two more containers:

Property Value
Flow New Row
CSS Style Properties padding-top:8px;

Property Value
Flow New Row
CSS Style Properties padding-top:8px;

Let’s add a data view in each container. Right-click on Three-Level Master-Detail / c100 container node, and select New Data View option.

'New Data View' option for 'c100' container in the Project Explorer.

Give the new data view the following properties:

Property Value
Controller Customers
View grid1
Text Customers
Show in Summary True
Page Size 5

Press OK to save the data view. Right-click on Three-Level Master-Detail / c101 container node, and choose New Data View.

'New Data View' option for 'c101' container in the Project Explorer.

Give the data view the following properties. The Filter Field is a field in the child view that match the primary key of the master view.

Property Value
Controller Orders
View grid1
Text Orders
Page Size 5
Show View Selector False
Filter Source dv100
Filter Field #1 CustomerID
Auto Hide Container

Press OK to save. Create one more data view by right-clicking on Three-Level Master-Detail / c102 container node and selecting New Data View.

'New Data View' option for 'c102' container in the Project Explorer.

Use the following properties:

Property Value
Controller OrderDetails
View grid1
Text Details
Page Size 5
Show View Selector False
Filter Source dv101
Filter Field #1 OrderID
Auto Hide Container

Press OK to save the data view. On the tool bar, press Browse to generate the application.

When it opens in your default browser, navigate to the Three-Level Master-Detail page.

Select a Custom from the list on the Three-Level Master-Detail page.

First, select a Customer from the list. A child data view will open underneath, showing Orders.

Upon selecting a Customer from the list, Orders data view will be displayed.

Select an Order, and a list of Order Details will appear below.

All three data views visible in the master-detail relationship on the Customers page.All three data views visible in the master-detail relationship on the Customers page.

Friday, May 11, 2012PrintSubscribe
Activating a Stored Procedure With a Custom Search Bar

Application users can input parameters of a stored procedure or web service in a modal confirmation search dialog. This approach works best if a custom result set may be produced with default parameter values. Application automatically prepopulates the output cache table. Users can  adjust parameter values on demand by activating Search action with a modal confirmation.

For example, an application can use a stored procedure or a web service to produce the most recent data records without asking a user for an input. A user may need to review the historical records and will activate the search action on their own.

If the application users are always searching for data, then a more natural method of providing the input parameters for the output caching script is via an inline search bar.

Right-click the Region / Cust Order Hist Cache / container1 node in Project Explorer and choose New Data View option.

Adding a new data view to a page container of a Code On Time web appliction

Enter the following properties and press OK button to create the new data view.

Property Value
Controller CustOrderHist_Params
Sequence 1
Show Action Bar No
Show Action Buttons None
Startup Action Command Name New

Select Region / Cust Order Hist Cache / container1 / view1 (CustOrderHist_Cache, grid1) data view and change its properties as shown next.

Property New Value
Sequence 2

Save the changes. The Project Explorer tree will look as follows.

The sequenced data views in a page container of a Code On Time web application

The data controller CustOrderHist_Cache has already been configured to use the confirmation data controller CustOrderHist_Params when Search action is activated. The client library of application framework will detect the inline confirmation data controller instance and will use its values as parameters of the Search action.

Click Browse on the Project Designer toolbar and navigate to Cust Order Hist Cache page.

The startup action of the dv100 data view has its Startup Action Command Name set to New. This allows selecting a customer without any extra effort. The data view is also configured to hide the action bar and the form view action buttons.

A confirmation data controller CustOrderHist_Params is displayed 'inline' in a data view above the CustOrderHist_Cache data view

Select a customer and click on the search activator icon. The enhanced output caching script will detect the parameter value and use it to cache the output produced by the stored procedure CustOrderHist.

The output of the search action with an 'inline' confirmation data controller

Application users can perform Quick Find, adaptive filtering, paging and sorting of the search result without causing any additional stored procedure activity. The output caching script will automatically detect if the data has been cached for longer than 30 seconds and call the stored procedure to refresh the cached custom record set.

The data view dv100 (CustOrderHistCache_Params) #1 is configured to have no action buttons at runtime when forms are rendered. If you set the value of its Show Action Buttons property to Bottom, then the presentation of the form view will change.

The first data view display a form with automatically configured actions 'Insert when New' and 'Cancel when New' actions at the bottom. The actions are labeld 'OK' and 'Cancel'.

Buttons OK and Cancel are the actions Insert when New and Cancel when New. The actions are automatically created by the application framework since there are no action groups explicitly defined in the data controller CustOrderHist_Params.

Right-click the Region / Cust Order Hist Cache / container1 / dv100 (CustOrderHist_Params) #1 / Actions node in Project Explorer and  choose New Action Group option.

image

Create a new action group with the scope of “Form”.

Add an action to the action group ag100 (Form) with the following properties.

Property Value
Command Name Search
When Last Command Name New

The Actions node of the data view dv100 (CustOrderHist_Params) #1 will look as in the next screenshot.

A standalone 'Search' action configured in a confirmation data controller

Expand the node view1 (CustOrderHist_Cache, grid1) #2 and locate the action node a100 – Search .

Action 'Search' in an output cache data controller is configured to use another data controller to collect input parameters

Change its properties as follows.

Property New Value
Confirmation

_controller=CustOrderHist_Params
_shortcut=false

Note that you can also delete the _shortcut parameter. Its default value is false.

Generate the application and navigate to Cust Order Hist Cache page.  You will immediately notice the Search button below the parameter form. The Search action shortcut on the left of the Quick Find is gone. It has been replaced with the standard Advanced Search Bar activator.

The 'Search' action is rendered in a form view of an 'inline' confirmation data controller

The Search action defined in CustOrderHist_Params data controller does not have a confirmation. If the action is activated, then the client library of the application will contact every data view on the page with instruction to perform search. The data views will perform search if they do have an action that uses CustOrderHist_Params as a confirmation.

The Search action without a confirmation broadcasts the need to perform a search to all “interested” parties.

Now that the shortcut is hidden, it is possible for end users to take advantage of the advanced search bar to further refine the custom result set produced by the stored procedure CustOrderHist.

Advanced search bar allows further refinement of the custom result set produced by 'Search' action

Thursday, May 10, 2012PrintSubscribe
Activating a Stored Procedure With a Custom Search Dialog

Let’s create a confirmation data controller to allow selecting a Customer ID. The value will be passed to the enhanced output caching script as a parameter.

Click on the Home link in the bread crumbs displayed under the toolbar at the top of the Project Designer. Select Controllers tab and choose New | New Controller option on the action bar.

Create a new data controller in Project Designer of Code On Time web application generator

Enter the following properties and click OK button to create the controller.

Property Value
Controller Name CustOrderHist_Params

Right-click CustOrderHist_Params / Fields node in Project Explorer and select New Field option.

Adding a new field to a data controller in Project Exporer

Enter the new field properties as follows.

Property Value
Name CustomerID
Type String
Length 5
Label Customer
Items Style Lookup
Data Value Field CustomerID
Data Text Field CompanyName
Lookup window description Select a customer
Search by First Letter Yes

Click OK button to create the field.

The field node in the Project Explorer will look as follows.

The confirmation data controller with a single lookup input field in a Code On Time web application project

Now it is time to define a Search action in the output cache controller CustOrderHist_Cache . The action will display the confirmation data controller CustOrderHist_Params to a user and cause the CustOrderHist_Cache controller to refresh the data with the collected parameter CustomerID.

Right-click the CustOrderHist_Cache / Actions / ag5 (ActionBar) – Actions  node in Project Explorer and select the New Action option.

Adding a new action to an action group in Project Explorer of Code On Time web application generator

Enter the properties of the action and click OK button to save the changes.

Property Value
Command Name Search
Confirmation

_controller=CustOrderHist_Params
_width=500
_title=Select a Customer to View History
_shortcut=true

Click Browse on the Project Designer toolbar and navigate to Cust Order Hist Cache page.

The new action can be accessed under Actions option of the action bar.

Notice that the Search action has replaced the standard search bar activator icon on the left of the Quick Find on the action bar. The icon will activate the Search action.

If you click the refresh icon in the bottom right corner of the grid view then this will also activate the first available Search action.

Action 'Search' replaces the standard search bar activator icon located on the left side of the Quick Find on action bar

Activate the Search action with any of three methods listed above. The application framework will create a modal confirmation data controller.

A modal confirmation data controller activate to confirma 'Search' action

Select a customer in the lookup window.

Selecting a customer in lookup window with the 'Search by First Letter' feature enabled

Click OK button in “Select a Customer to View History” modal popup. This will confirm the Search action and will the pass the selected Customer ID to the output caching script.

Confirming an action with a modal confirmation data controller

The enhanced output caching script will detect that the parameter @Parameters_CustomerID is not null and will use its value as a filter.

The enhanced output caching script uses the value of @Parameters_CustomerID parameter as a filter