Display companies and contacts: Nested Repeated Region

Here you will create a listing of all companies and their associated contacts. Next to each entry, you will add links for updating or deleting an item.

Since the list will be created in the site's main index page, open the file in Dreamweaver.

There are four steps to complete:

  1. Create the page design using Dreamweaver's tools.
  2. Use the Nested Repeated Region wizard to display the data.
  3. Add new, update and delete links next to each page.
  4. Save the page and preview it in the browser.

 

To easily display the companies and their associated contacts, you will use the Nested Repeat Region wizard provided by MX Looper. Click at the end of the first row in page, after the title, and access this command from the MX Kollection tab of the Insert bar.

Configure the user interface that opens as follows:

  1. In the first step, define the tables and fields to use:
    ·      In the Connection drop-down menu select the database connection you've created at the beginning of this tutorial: connContacts.
    ·      In the Master table drop-down menu select the table that contains the main (master) elements: company_com.
    ·      In the Primary key drop-down menu select the master table's primary key: id_com.
    ·      In the Display Value drop-down menu select the master table's field storing the labels that will be displayed on page: name_com.
    ·      In the Detail table drop-down menu select the table that contains the detail elements: contact_con.
    ·      In the Foreign key drop-down menu, select the field storing the association between the two tables: idcom_con.
    ·      In the Display Value drop-down menu select the detail table's field storing the labels to display: name_con.


     

  2. In the second step, decide what Repeat style to use:
    ·      Sub-table - each detail element is displayed in a separate row, with indentation. This is the one to select.
    ·      List - this displays the detail elements as a comma separated list.

 

When you're done configuring the wizard, hit the Finish button to close it and add all elements to the page: the HTML table, the recordsets and the server behaviors.

If you save and preview the page in the browser at this point, it will display the list of companies, and for each, the existing contacts.

 

 

Now, add a new column at the end of the generated table. In the second row's cell type the link names: Update - Delete. You will have to turn each of them into links to the actual update and delete pages.

To do so, follow the next steps:

  1. Select the update text, and click on the Make link options from the right-click menu.
  2. For the page file, select the update file in the contact folder (e.g. contact/update).
  3. You will also need to pass it the contact unique identifier. Click on the Parameters button and add a parameter named id_con to the link. For its value, use the lightning icon and select the id_con field of the detail2contact_con recordset:


                  
  4. At this point, the Make link dialog box should look as follows:

 

Repeat the same steps for the delete link, but remember to point the link to the delete page, instead of the update one (e.g. contact/delete.php).

Now, the table has a nice addition, allowing it to actually perform management actions on the contacts:

 

 

As you already noticed when you opened this page from the zip package, there are two links that will allow you to manage companies and contacts. The Manage companies link points to the company/index file, and the Manage contacts link points to the contacts/index file.

Another small improvement for the overall design of the page, is to remove the border surrounding the generated table. To do so, select the table in design view, and, in the Property Inspector, set the Border to 0.

Now, when you preview the page in the browser, it will look like the following image:

 

 

When you click on the Update or Delete links next to each contact, the update and delete pages will open.

Now the listing page is completed, and you can start putting content into the company and contact's insert, update and delete pages.

In the next topic you will create the company insert page using one of MX Kollection 3's new features: the wizards.