---
title: Creating the Products page (ASPX)
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

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

## Preparing the ASPX source file for the products template

1. Edit your web project in Visual Studio.
2. Right-click the **CMSTemplates/MySite** folder in the Solution Explorer and click **Add -> Add New Item**.
3. Create a **Web Form** named _**ProductList.aspx**_ and check **Select master page**.
4. Click **Add** and choose the _**MyMaster.master**_ page from the **CMSTemplates/MySite** folder.
5. Drag the following controls inside the **** element of the product list page:
   - CMSBreadCrumbs
   - CMSDataList
6. Set the properties of the **CMSDataList** control according to the table below:

   | Property                       | Value                   | Description                                                                                                                                                                     |
   | ------------------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   | ClassNames                     | custom.computer         | Configures the datalist to display only pages of the custom.computer type.                                                                                                      |
   | OrderBy                        | ComputerName ASC        | Sets the SQL ORDER BY clause that the control uses when loading data. As a result, the control displays items in ascending alphabetical order based on the ComputerName values. |
   | TransformationName             | custom.computer.preview | Assigns the transformation that the datalist uses to display the list of computer products.                                                                                     |
   | SelectedItemTransformationName | custom.computer.default | When a user selects a specific computer page on the website, the control displays the details according to the specified transformation.                                        |
   | RepeatColumns                  | 2                       | Configures the datalist to display 2 items per row in list mode.                                                                                                                |
7. Switch to the code behind of the product list page (**ProductList.aspx.cs**) and add a reference to the **CMS.UIControls** namespace:

   ```csharp

   using CMS.UIControls;

   ```
8. Change the class definition so that it inherits from the **TemplatePage** class:

   ```csharp

   public partial class CMSTemplates_MySite_ProductList : TemplatePage

   ```
9. Save the files.

## Registering the page template

The source files of the products page are ready. Now you need to register the page template in Kentico.

1. Switch to the Kentico administration interface in your browser.
2. Open the **Page templates** application.
3. Select the **My website** category.
4. Click **New template** and type _**Product list**_ into the **Template display name** field.
5. Click **Save**.
6. Set the following values on the **General** tab:
   - **Template type**: ASPX page
   - **File name**: \~/CMSTemplates/MySite/ProductList.aspx
7. Click **Save**.
8. Switch to the **Sites** tab and assign the page template to **My website**.

## Adding the products section

1. Open the **Pages** application.
2. Select the root of the content tree (**My website**).
3. Click **New** ().
4. Choose the **Page (menu item)** page type.
5. Type in _**Products**_ as the **Page name** and choose the **Use existing page template** option. Select the **My website** category and the **Product list** page template.
6. Click **Save** to create the page.
7. Select the **Products** page in the content tree.
8. Click **New** () and choose the **Computer** page type.
9.  Fill in the computer page 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 images in the sample web template - **SampleWebTemplate\Computer\_Images**)
   - **Publish from/Publish to**: leave the values blank
10. 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
11. Click **Save**.

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).

![Previewing the list of products](https://docs.kentico.com/docsassets/k82tutorial/creating-the-products-page-aspx/Products_List.png "Previewing the list of products")

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

![Previewing the details of a selected product](https://docs.kentico.com/docsassets/k82tutorial/creating-the-products-page-aspx/Products_Detail.png "Previewing the details of a selected product")