Web Application Generator

The Pages tab on the Project Explorer displays a hierarchy of application elements, starting with pages. Pages are composed of containers with data views and custom user controls.

Top-level pages are pages on the first level of the hierarchy.

The examples of top-level pages are Home, Customers, Employees, Categories, Customer Demographics, and Region. The examples of child pages are Orders, Customer Demo, Order Details, Employee Territories, and Products.

Creating a Page

A top-level page is created by clicking on the New Page icon on the toolbar.

This will open the New Page form where page properties can be specified.

The properties Name, Index, and Path effect the creation of a page.

The Name must be a unique sequence of alphanumeric characters that start with a letter.

The Index is an optional numerical order of the page. If it is not specified, then it will be assigned automatically when the page is saved. If it is specified, then the designer will try to position the page in the requested order.

The Path determines the hierarchical location of a page, as well as reflecting the text displayed on the menu to the end user. The vertical bar character “|” is used to separate multiple levels in the hierarchy. If there is no separator, then the page will be placed at the top of the hierarchy.

Below are sample settings for a new top-level page with a specific Index and Path.

The page will be placed in the specified location based on the path and index when created in the Northwind sample.

Here are the properties for a new page with an existing multi-level path.

The page will be placed in the correct location. If the Path includes separators, then any Index is ignored, and the page is placed as the last child of an existing parent.

If there is no matching path, then the missing parent pages will be created.

The parent pages will have a special icon, because the External URL property of the parent pages is set to “about:blank”. Such pages will not have a physical implementation in the application and will simply designate static nodes in the navigation hierarchy.

If a top-level page is created without a specified Index, then the page will be placed at the bottom of the hierarchy.

The framework will automatically handle index allocation after the page is created – it will assign the first page with Index of “1000” and auto-increment by “10” for every succeeding page.

If a page is created without a path, then it will become a system page. This page will not appear on the menu, but can be accessed via URL. The new system page will be added at the bottom of the hierarchy with a different icon. System pages are typically used to provide utility functions in applications and are meant to be presented to users through programmatic commands.

When a page is selected in the Project Explorer, the New Child Page option will be available on the toolbar. It can also be accessed via the context menu of the page node.

Selecting this option will open the New Child Page form in the Designer window with Index and Path properties unavailable.

Specifying a name and creating a child page will add the page as the last child of the parent.

Rearranging Pages

Moving pages in the hierarchy can be accomplished by dragging and dropping the page nodes in the Project Explorer window. Dropping a page onto another page will place it under the hierarchy of the target page.

The page can be moved from one node to another with Cut and Paste commands in the context menu. Use the Cut option on the context menu, and use Paste on the target page.

Holding CTRL while dropping directly onto a page will duplicate the page. If the drop location already has a page with the same name, the duplicated page name will be appended with a number. This can also be done by copying the first page, and then pasting the page in another location.

Dropping a page on the right side of a target page node will place the page after the target. The mouse cursor will indicate where the page will be placed.

Dropping a page on the left side of a target page node will place the page before the target.

Dragging and dropping a page with child nodes will move the child page nodes as well. Cutting or copying a page with children will also move or copy the entire group to the new location.

Multiple pages can be selected by holding CTRL and clicking on pages. Clicking on a page node, holding SHIFT, and clicking another page node will select a range.

Any drag and drop operations will be based on the order of selection. For example, the pages below were selected in the order of Customers, Employees, Categories, Region, and dropped to the right of Home. This resulted in the pages being reordered to Home, Region, Categories, Employees, and Customers.

Deleting Pages

Delete a page by right-clicking on the page and selecting Delete option.

You can also select the page(s) and press Delete on your keyboard.

Renaming Page Nodes

The context menu of page nodes offers Rename option. If the command is activated on a top-level or child page, then the selected segment of the page Path will change. If the command is activated on a system page, then the Title of the page will change. The Path of a system page is always empty.

The following example shows renaming of the Customers / Orders / My New Page page node.

The keyboard shortcut F2 will activate rename command on the selected page node. 

If you need to change the physical Name of the page, then select the page and change the Name property in the Designer window.

Hiding Pages from Navigation Menu

For certain pages, it may not be necessary to place them on the navigation menu. The Include in Menu option will remove the page from the menu.

The page is still accessible via URL.

The property Context Fields can pass values from the current record to the lookup data view. The value is passed in the format LookupFieldName=FieldNameOfThisView as an external filter. Multiple value mappings can be specified.

If LookupFieldName matches a data field in the lookup view, then an automatic “equals” filter will be applied to the lookup. If the LookupFieldName does not match, then the application framework will not perform filtering. A developer can use the passed external filter field value to create a filter expression or business rule implementing custom filtering.

Let’s create a business rule for a lookup view that takes advantage of values passed in the Context Fields property.

Navigate to the Orders page, and select an order. Create a new order detail, and activate the lookup for ProductID. The Northwind database has 77 products. All products will be available for selection in the Products lookup.

Let’s exclude products already associated with order details of the existing order from this view.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Double-click on Products controller node.

Change the Handler property:

Press OK to save the controller. Double-click on OrderDetails / Fields / ProductID field node.

Change the Context Fields property:

Press OK to save the field. On the toolbar, press Exit to close the Project Designer, and click Generate.

When complete, click on the project name, and select Develop to open Visual Studio.

In the Solution Explorer of Visual Studio, double-click on ~\App_Code\Rules\ProductsBusinessRules.cs(.vb) file.

Replace the existing code with the following business rule:

C#:

using System;
using System.Data;
using System.Collections.Generic;
using System.Linq;
using MyCompany.Data;

namespace MyCompany.Rules
{
    public partial class ProductsBusinessRules : MyCompany.Data.BusinessRules
    {
        protected override void EnumerateDynamicAccessControlRules(string Products)
        {
            FieldValue orderId = SelectExternalFilterFieldValueObject(
                "ExistingOrderID");
            if (orderId != null && orderId.Value != null)
                RegisterAccessControlRule("ProductID",
                    "[ProductID] in (select ProductID from [Order Details] " +
                    "where OrderID = @OrderID)",
                    AccessPermission.Deny,
                    new SqlParam("@OrderID", orderId.Value));
        }
    }
}

Visual Basic:

Imports MyCompany.Data
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq

Namespace MyCompany.Rules

    Partial Public Class ProductsBusinessRules
        Inherits MyCompany.Data.BusinessRules
        Protected Overrides Sub EnumerateDynamicAccessControlRules(Products As String)
            Dim orderId As Object = SelectExternalFilterFieldValueObject(
                "ExistingOrderID")
            If (orderId IsNot Nothing AndAlso orderId.Value IsNot Nothing) Then
                RegisterAccessControlRule("ProductID",
                    "[ProductID] in (select ProductID from [Order Details] " +
                    "where OrderID = @OrderID)",
                    AccessPermission.Deny,
                    New SqlParam("@OrderID", orderId.Value))
            End If
        End Sub
    End Class
End Namespace

The business rule tries to locate the external filter field ExistingOrderID. If it is found, and the value is not null, then the business rule will register an access control rule. The access control rule will deny access to products that are matched to the “Order Details”.“ProductID” column if the column OrderID is equal to the value passed in ExistingOrderID filter field.

Save the file, and run the web application.

Navigate to the Orders page, and select an order. Note the number of order details belonging to the order.

Create a new order detail. Click on (select) link in the Product Name lookup.

The Product lookup will open. There will be no products that are already ordered. In the example below, there are only 74 products displayed out of 77 products in the database.