Creating the Products page

This page describes how to add the product list page and publish computer specifications on the website.

Creating the product list page

  1. Open the Pages application.

  2. Select the root document (My website).

  3. Click New ().

  4. Choose the Page (menu item) document type.

  5. Type Products as the Page name and choose the Create a blank page option.

  6. Click Save to create the page.

  7. Switch to the Design tab and add the Breadcrumbs web part into zoneA. Leave the default properties for the web part and click OK.

  8. Add the Datalist web part below the breadcrumbs. Set the following properties for the web part:




    Document types

    Configures the datalist to display only documents of the type (created in the Defining a new document type topic).

    ORDER BY expression

    ComputerName ASC

    Sets the SQL ORDER BY clause that the web part uses when loading data. As a result, the datalist displays items in ascending alphabetical order based on the values of the ComputerName field.


    Assigns the transformation that the datalist uses to display the list of computer products.

    Selected item transformation

    When a user selects a specific computer document on the website, the web part displays the details according to the specified transformation.

  9. Click OK.

The page is now ready to display underlying computer documents.

Adding computer documents

Now add documents representing individual computer products:

  1. In the Pages application, select the Products page in the content tree.

  2. Click New () and choose the Computer document type.

    • Computer name: Home PC Dallas
    • Processor type: Athlon
    • RAM (MB): 2048
    • HDD (GB): 160
    • Image: upload an image (you can find images in the sample web template - SampleWebTemplate\Computer_Images)
    • Publish from/Publish to: leave the values blank
  3. Click Save and create another and enter the following values:

    • Computer name: Office PC Houston
    • Processor type: Pentium Core 2 Duo
    • RAM (MB): 4096
    • HDD (GB): 200
    • Image: upload an image (you can find images in the sample web template) - SampleWebTemplate\Computer_Images)
    • Publish from/Publish to: leave the values blank
  4. Click Save.

You can edit the field values of the computer documents at any time by switching to the Form tab in the Pages application.

Editing document fields on the Form tab

If you view the /Products page in Preview mode, you can see a list of the two computer products (formatted according to the transformation).

Previewing the list of products

When you click the title of a specific computer, the page displays the detail view (using the transformation).

Previewing the details of a selected product