Blog: Posts from March, 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 March, 2012
Saturday, March 31, 2012PrintSubscribe
Data View Refresh Interval

Certain types of applications require automatic refreshing of data presented on screen at predefined intervals. For example, applications supporting various surveillance and monitoring activities must pro-actively update the contents of the user interface screens.

Web browsers can be instructed to reload the fresh copy of the page from the server. Unfortunately the page flickering will be quite irritating if one has to stare at an application screen for a few hours every day.

Code On Time web applications offer smooth partial page refresh when users interact with the page.

For example, a data view can be refreshed without causing the entire page to reload if you click on the Refresh icon in bottom right corner of a grid view.

Data view refresh can be manually activated by clicking on the 'Refresh' icon in the bottom right corner of a grid view

A data view can also refresh itself if a user is not interacting with it for awhile.

Open your project in Designer and activate the properties of the data view on the page.

Master data view on the 'Products' page displayed in the Project Explorer

Set property Refresh Interval to 30. The duration of the interval is expressed in seconds.

Data view property 'Refresh Interval' displayed in Project Designer

Save the data view properties and generate your application. Navigate to the page and observe that the Refresh icon is briefly replaced with the progress indicator every 30 seconds.

Data view refresh is in progress as indicated by the 'wait' icon displayed in place of the 'Refresh' button in the bottom right corner of the grid view

If you actively interact with the data view, then the refresh interval is always restarted from the moment of the last interaction.

Saturday, March 31, 2012PrintSubscribe
Auto Select in Data Views

Complex master/detail pages in Code On Time web applications are hiding detail records until a specific master record is selected.

For example, this is the initial state of the Suppliers page in the Northwind sample. This page is capable of rendering a list of suppliers with their respective products. If a master supplier is not selected then the Products child data view is not visible.

The initial state of the master/detail page 'Suppliers' without a selected master record.

Users can click on a link in the first column to activate the Suppliers form view. This will result in the linked products displayed at the bottom of the page below the form.

You can configure an application data view to simulate a click on a link in the first column of the first row as soon as a page loads in the web browser.

Start web application generator, select the project name, and activate the Project Designer.

Select Suppliers / container1 / view1 in Project Explorer.

Page data view selected in the Project Explorer

Enable property “Auto Select First Row” under Presentation section of the data view properties and click OK to save the changes.

Data view property 'Auto Select First Row' in the Project Designer

Click Browse on the tool bar and navigate to the Suppliers page. The very first row in the master view of suppliers will be selected. Products from the selected supplier are displayed beneath the form view.

Property 'Auto Select First Row' causes automatic execution of the first action in the action group with the 'Grid' scope.

Setting the Auto Select First Row property to True causes automatic execution of the first action in the action group with the “Grid” scope.

The default configuration of this action group in shown next. As you can see the first row will be selected in the form view editForm1 if a user clicks on a link in the first column. The same effect is caused by Auto Select First Row property when page loads in the web browser.

Action group with scope 'Grid' expanded in Project Explorer

Right-click action group ag1 and select Show All Actions option.

Context menu of the action group in Project Explorer

Select the action group ag2 in Project Designer and click Up on the tool bar.

Changing the order of actions in the action group

The hierarchy of nodes in Project Explorer will change. Action a2 with command name Edit is now the first action in the action group ag1 with the scope of “Grid”. Note that this action does not have a view specified as the command argument.

Modified action group in Project Explorer

Click Browse button on the tool bar of Project Designer and navigate to the Suppliers page once more. The first row is selected and presented in edit mode.

'Edit' action executed without an argument on a page with the master data view that has its property  'Auto Select First Row' set to 'True'

Saturday, March 31, 2012PrintSubscribe
Auto Highlight in Data Views

The following screen shot shows the automatically generated page Suppliers from the Northwind sample. If you navigate to the page and sort or filter records then only the master data view Suppliers is visible.

Standard master/detail page 'Suppliers' in the 'Northwind' sample created with Code On Time web application generator

Click on any data row and it will become highlighted. Linked detail records will be displayed at the bottom of the page.

Linked 'Products' are displayed if a user clicks on a master row of 'Suppliers' view

Sometimes it may be desirable to highlight the first row in the master view automatically.

Start the application generator, click on the project name, choose Design, and select the master data view of the page in Project Explorer.

Data view selected in Project Explorer

Check the box labeled “Auto Highlight First Row” under the Presentation section of the data view properties and click OK.

'Auto Highlight First Row' property of a data view

Click Browse button on the tool bar to view the page in the web browser.

The very first visible row will be automatically highlighted. Linked details will be displayed as well.

The initial state of the page loaded in a web browser if 'Auto Highlight First Row' property of the master view is enabled