Blog

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
Wednesday, April 3, 2013PrintSubscribe
Data View Refresh

Data views are only automatically refreshed by the client library when data is inserted, updated, or deleted. The user can force a refresh using the Refresh icon in the bottom right corner of every data view. In addition, the Refresh Interval property can be configured to refresh the data view based on a timer.

image

Certain situations require a refresh based on different conditions. For example, suppose that there are multiple tabs displaying similar data.

Multiple tabs displaying different lists of Orders.

The user may change the value of a record in one of the views.

Order date of an order is changed.

However, when the user switches to another view showing the same record, the old value will be displayed.

The order date is not updated for the same record in a different tab.

Let’s add a custom user control that will contain some custom JavaScript. This code will refresh the data view when the tab is changed in order to ensure that the data visible to the user is always fresh.

Creating Views

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Orders / Views / grid1, and press Copy. Right-click on Orders / Views node, and press Paste to duplicate the view.

Copying view 'grid1' of Orders controller.     image

Do this one more time to create three grid views. Double-click on Orders / Views / v100.

Copied view 'v100' of Orders controller.

Make the following changes:

Property New Value
Id OrdersToShip
Label Orders To Ship
Filter Expression
OrderDate is null

Press OK to save. Double-click on Orders / Views / v101.

Copied view 'v101' of Orders controller.

Make the following changes:

Property New Value
Id HighFreight
Label High Freight
Filter Expression
Freight > 30

Press OK to save.

Setting Up the Page

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

Adding a page to the project.

Assign a name to the page:

Property New Value
Name Filtered Orders

Press OK to save. Drop the new Filtered Orders page node to the right of Home page node.

Dropping 'Filtered Orders' page node on the right side of 'Home' page node.     Page 'Filtered Orders' is now second in the menu.

Right-click on Filtered Orders page, and press New Container.

Adding a container to a page.

Keep the defaults and press OK to save. Right-click on the new container and press New Data View.

Adding a data view to container 'c101'.

Assign the following values:

Property Value
Controller Orders
View grid1
Tag Orders
Activator Tab
Text Orders

Press OK to save. Create another data view with the following properties:

Property Value
Controller Orders
View OrdersToShip
Tag Orders To Ship
Activator Tab
Text Orders To Ship

Create one more data view.

Property Value
Controller Orders
View HighFreight
Tag High Freight
Activator Tab
Text High Freight

Save the data view.

Adding User Control

Right-click on Filtered Orders / c101 container node, and press New Control.

Adding a new control to container 'c101'.

Next to the User Control property, click on the New User Control icon.

Creating a new user control.

Assign a name:

Property Value
Name RefreshDataView

Press OK to save the user control and insert it into the property. Press OK again to save the control.

On the toolbar, press Browse to generate the web application and user control. When complete, right-click on Filtered Orders / c101 / control1 – RefreshDataView node, and press Edit in Visual Studio.

Edit the user control in Visual Studio via the context menu option in the Project Explorer.

The custom user control file will open in Visual Studio. Replace the content after the <%@ Control %> element with the following:

<script type="text/javascript">
    Sys.Application.add_load(function () {
        $('div.TabBar td.Item').click(function () {
            var linkText = $(this).find('a').text();
            var tag = linkText;
            var dataView = Web.DataView.find(tag, 'Tag');
            if (dataView) {
                if (dataView._isBusy == false && dataView.get_isDisplayed())
                    dataView.refresh();

            }
        });
    })
</script>

Viewing the Results

Save the file, and switch to the web app open in your browser window. Navigate to the Filtered Orders page. The page will have three tabs displaying different filtered lists of orders. Note the Order Date of the first record.

Three tabs displaying different lists of orders.

Switch to the High Freight tab. Edit the first record, and change the Order Date.

Changing the Order Date of an order.

Save the change, and switch back to the first tab. Note that the data view refreshes and the updated data is displayed.

The data view has been refreshed - the record is showing the latest changes.

Sunday, March 31, 2013PrintSubscribe
When Last Command Name

Actions in the Code On Time user interface are displayed based on several conditions. When the conditions are fulfilled, the action is displayed. The When Last Command Name condition will only display an action when the previous action matches the specified command name. If When Last Command Name is null, the action will be displayed if Select action or no action is performed and the other conditions are matched.

For example, when a Customers record is selected, the Edit, Delete, and Close actions are displayed. New Customers action is available on the action bar, as well as Actions and Report dropdowns.

Edit, Delete, and Close actions displayed when a record is selected.

When the Edit action is activated, the buttons are replaced by OK, Delete, and Cancel. The action bar only has one dropdown, Record.

OK, Delete, and Cancel actions displayed when a record is edited.

Note that all reporting actions have been hidden. Let’s add another Report action what will only be displayed after Edit action has been performed.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Customers / Actions / ag7 (ActionBar) – Report node, and press New Action.

Creating a new action for Customers controller.

Assign the following values:

Property Value
Command Name Report (PDF)
Header Text Create a report
When Last Command Name Edit
Description Creates a PDF report when editing a record.

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

Navigate to Customers page and select a record. The new Report action is not displayed.

The new Report action is not yet displayed on the action bar.

Start editing the record. The new action will appear as the only option in the Report dropdown.

When Edit action is triggered, the new Report action is displayed.

Sunday, March 31, 2013PrintSubscribe
Auto Hide Data Views

The Auto Hide property is used to hide child data views or containers when a master record has not been selected.

Self

Let’s create a page that will contain two data views: Customers and Orders. The orders will be filtered by the selected customer.

Start the Project Designer. In the Project Explorer toolbar, click on the New Page icon.

Creating a new page.

Assign a name to the page.

Property Value
Name Auto Hide Test

Press OK to save the page. In the Project Explorer, drop the new page node on the right side of Home node to place it second in the menu.

Moving Auto Hide Test page.

Switch to the Controllers tab. Hold down Ctrl key, and click on Customers and Orders data controller nodes. Right-click, and press Copy.

Copying Customers and Orders data controller nodes.

Switch back to the Pages tab. Right-click on Auto Hide Test page, and press Paste. The controllers will be instantiated as data views in individual containers.

Pasting onto 'Auto Hide Test' page.     Two data views instantiated from the pasted data controllers.

Double-click on Auto Hide Test / c102 / view2 (Orders) node. Make the following changes:

Property Value
View grid1
Filter Source view1
Filter Field #1 CustomerID
Auto Hide Self

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

Navigate to the Auto Hide Test page. Note that only a list of customers is visible on the page.

Only master data views is visible on the page.

When a customer is selected, the filtered list of orders is displayed underneath.

When master record is selected, the child view is displayed.

Container

When there are multiple child data views in a single container or tabs, it is advisable to hide the whole container instead.

In the Project Explorer, double-click on Auto Hide Test / c102 / view2 (Orders, grid1) –> view1 node.

Node view1 in container c102 of page Auto Hide Test.

Change the following values:

Property New Value
Activator Tab
Text Orders

Save the data view. Browse the web app – notice that the tab element is not hidden when no customer is selected.

The tab element is not hidden.

The data view will appear when a master record is selected.

Data view is shown when master record is selected.

Switch back to the Project Designer, and change Auto Hide to “Container”.

Property New Value
Auto Hide Container

Press OK to save, and press Browse. The tab element will now be hidden.

Tab element is now hidden.

Note that if the master view is in the same container as the child view, an Auto Hide of “Container” will hide both views.