Is this really the version you are looking for? Kentico Xperience 8.1 Tutorial is no longer updated. Use the switcher in the header to choose your product version.
This page describes how to add the product list page and publish computer specifications on the website.
Open the Pages application.
Select the root page (My website).
Click New ().
Choose the Page (menu item) page type.
Type Products as the Page name and choose the Create a blank page option.
Click Save to create the page.
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.
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. |
Click Save & Close.
The page is now ready to display underlying computer pages.
Now add pages representing individual computer products:
In the Pages application, select the Products page in the content tree.
Click New () and choose the Computer page type.
Click Save and create another and enter the following values:
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).