Kentico CMS 7.0 Tutorial  

Page template

Page template

Previous topic Next topic Mail us feedback on this topic!  

Page template

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

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

 

Creating the product list page

 

1. Go to CMS Desk -> Content.

 

2. Select the root document (My website) and click New.

 

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

 

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

 

tutorial_clip0130

 

5. Click Save Save to create the page.

 

6. Switch to the Design tab and add the Navigation -> Breadcrumbs web part into zoneA. Leave the default properties for the web part.

 

7. Add the Listing and viewers -> Datalist web part below the breadcrumbs. Set the following properties for the web part:

 

Property

Value

Description

Document types

custom.computer

Configures the datalist to display only documents of the custom.computer 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.

Transformation

custom.computer.preview

Assigns the transformation that the datalist uses to display the list of computer products (as defined in Writing transformations).

Selected item transformation

custom.computer.default

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

 

The page is now ready to display underlying computer documents.

 

Adding computer documents

 

Now add documents representing individual computer products:

 

1. Select the Products page in the content tree, click New and choose the Computer document type.

 

2. Fill in the computer document fields with the following values:

 

Computer name: Home PC Dallas

Processor type: Athlon

RAM (MB): 2048

HDD (GB): 160

Image: upload an image (you can find sample images in the <Kentico CMS installation>\CodeSamples\SampleWebTemplate\Computer_Images folder)

Publish from/to: leave the values blank

 

3. Click SaveAndAnother 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 sample images in the <Kentico CMS installation>\CodeSamples\SampleWebTemplate\Computer_Images folder)

Publish from/to: leave the values blank

 

4. Click Save Save.

 

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

 

tutorial_clip0131

 

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

 

tutorial_clip0132

 

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

 

tutorial_clip0133