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 page (My website).

3. Click New ().

4. Choose the Page (menu item) page 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 Save & Close.

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

   Property	Value	Description
   Class types	custom.computer	Configures the datalist to display only pages of the custom.computer type (created in the Defining a new page 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.
   Transformation	custom.computer.preview	Assigns the transformation that the datalist uses to display the list of computer products.
   Selected item transformation	custom.computer.default	When a user selects a specific computer page on the website, the web part displays the details according to the specified transformation.

9. Click Save & Close.

The page is now ready to display underlying computer pages.

Adding computer pages

Now add pages representing individual computer products:

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

2. Click New () and choose the Computer page 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 pages at any time by switching to the Form tab in the Pages application.

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

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