Development / Project Designer

  Adding a Table to a Project

Table of Contents
Development / Project DesignerPrint||
Adding a Table to a Project

Let’s add a new table of contacts to the Northwind database. This table will store contacts associated with each record in the Shippers table.

New 'Contacts' table linked to Shippers

Use the following SQL script to create the table “Contacts” in the Northwind database.

CREATE TABLE [dbo].[Contacts](
    [ContactID] [int] IDENTITY(1,1) NOT NULL PRIMARY KEY,
    [ShipperID] [int] NOT NULL,
    [FirstName] [nvarchar](50) NOT NULL,
    [LastName] [nvarchar](50) NOT NULL,
    [HomePhone] [nvarchar](50) NULL,
    [MobilePhone] [nvarchar](50) NULL,
    [Email] [nvarchar](100) NULL

ALTER TABLE [dbo].[Contacts] ADD  CONSTRAINT [FK_Contacts_Shippers] FOREIGN KEY([ShipperID])
REFERENCES [dbo].[Shippers] ([ShipperID])

Start Code On Time web application generator, click on the project name, and select the Refresh option. Toggle the checkbox next to the new dbo.Contacts table, and press Refresh. Choose Yes to confirm the project refresh.

Refresh to add the dbo.Contacts table to the application

Select Generate to regenerate the web application. It will open in your default web browser.

If you have not made any page modifications to your web application in the Project Designer , then Contacts will be added seamlessly to the application. The Shippers page will be moved onto the first level of the menu, with Contacts page underneath. If you navigate to Shippers page, there will be a Contacts child data view present underneath the Shippers master data view.

Contacts data view and page added to the baseline web application

However, if you have modified the application pages, then the generator will not make any changes to the design of application pages. The Contacts page will not change the site map, and will be placed under a “New Pages” menu option after Membership.  There will be no Contacts child data view on the Shippers page.

Contacts page added under 'New Pages' and no data view added under Shippers

In this situation, you will need to manually add the child data view to the Shippers page. If you need a global list of all shipper contacts easily accessible to the end user, then you will need to rearrange the site map on your own. Both tasks are explained next.

Adding Data View to the “Shippers” Page

Switch to the web application generator, click on the project name, and access the Project Designer. In the Explorer, right-click on Region / Shippers / container2 node, and select New Data View.

New Data View added to container2 of Shippers page

Use the following settings:

Property Value
Controller Contacts
View grid1
Activator Tab
Text Contact List

Press OK to save the data view. The Project Explorer will look similar to the picture below.

New Contact List grid view added to Shippers page

On the tool bar, press Browse to generate the web application.

When it opens in your web browser, navigate to Shippers page. Select a shipper, and you will see that the Contacts data view has been added to the page as a child.

Contacts child data view added to Shippers page

Moving the “Contacts” Page in the Site Map

Let’s move the Shippers and Contacts pages in a more prominent position in the site map. Switch back to the Project Designer. In the Explorer, double-click on New Pages / Contacts page node.

Contacts page node in Project Explorer

Change the following settings:

Property New Value
Index 1065
Title Contact List
Path Shippers | Contact List

Press OK to save the page. Using the Project Explorer, double-click on Region / Shippers.

Change the following settings:

Property New Value
Index 1064
Path Shippers

In the Explorer, right-click on New Pages page node, and select Delete.

Delete New Pages page node in Explorer

Press OK to confirm the delete operation. The Explorer tree will look like the picture below.

New 'Shippers' and 'Contact List' page arrangement

Press Browse to generate the project.

On the menu bar of the web application, the Shippers and Contact List pages will now be displayed between Employees and Categories options.

Shippers and Contact List menu options moved in the site map