User Interface

A common practice in data sheets is to “freeze” a column so that essential information is always displayed for each row. The second generation data sheet allows both freezing columns at run-time, as well as configuring a column to be frozen at design-time.

Freezing at Run-Time

Create a sample Northwind web application. Browse the site, and navigate to the Order Details page. On the action bar, press Actions | Show in Data Sheet.

Activate the column header dropdown for Product Name, and press Freeze.

All columns up to the frozen column will change color. When the data sheet is scrolled to the right, the frozen columns will continue to be displayed.

Columns can be added or removed from the freeze by activating the Freeze option for that column. You may unfreeze the column by activating the column header dropdown and pressing Unfreeze.

Freezing at Design-Time

Start the Project Designer. In the Project Explorer, double-click on Customers / Order Details / container1 / view1 (OrderDetails, grid1) / grid1 / ProductID –> ProductProductName data field node.

Assign a tag.

Press OK to save the field. On the toolbar, press Browse. On the action bar, press Actions | Show in Data Sheet.

When the data sheet loads, the Product Name column will be frozen by default.

The frozen columns can still be changed by the user using the method described in the previous section.

The “When View” property allows controlling the visibility of an action based on the current view.

For example, let’s create a custom action that will display the extended price of an order detail. This action will be available on editForm1 and grid1 by default. Let’s prevent the action from being displayed on grid1 by using When View property.

Creating the Action and Business Rule

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

Assign the following values.

Press OK to save. Right-click on OrderDetails / Business Rules node, and press New Business Rule.

Use the following configuration:

var extendedPrice = [UnitPrice] * (1 - [Discount]) * [Quantity];
alert(String.localeFormat('{0:c}', extendedPrice));

Press OK to save.

On the toolbar, press Browse. Navigate to the Order Details page. The Extended Price button will be present on the action bar. When you select a row and activate the button, the extended price will be displayed in an alert.

Select a record – the action will also be available on editForm1.

Note that the action is not available on createForm1. This is because the When Last Command Name property of the action is blank (which is equivalent to “Select”). View createForm1 is activated by triggering the “New” action, resulting in the Extended Price action being hidden.

Specifying “When View”

Let’s restrict display of the Extended Price action to editForm1 using the When View property.

In the Project Explorer, double-click on OrderDetails / Actions / ag3 (ActionBar) – New / a100 – Custom, ShowExtendedPrice | Extended Price action node.

Change the When View property:

Press OK to save.

Viewing the Results

On the toolbar, press Browse. Navigate to the Order Details page. Note that the action is no longer displayed in grid1.

Select a record. The action will be available in editForm1.