The following is a step-by-step tutorial that will show you how to display a list that contains all smartphones, laptops and tablets (CMS.Smartphone and CMS.Laptop documents) from the products section of the sample Corporate Site using the CMSDataList control:

 

1. Create a new Web form somewhere in your website installation directory.

 

2. Switch to its Design tab, drag and drop a CMSDataList control from the toolbox onto the form and set its following properties:

 

•ClassNames: cms.smartphone;cms.laptop

•OrderBy: SKUName

•Path: /products/%

•RepeatColumns: 4

•TransformationName: ecommerce.transformations.Product_SimplePreview

•SelectedItemTransformationName: ecommerce.transformations.Product_Default

 

This tells the control which document types to read, sets the OrderBy value, specifies the Path to the products section (the default setting of /% would also display all products, but it is more effective to read only a section of the site), determines the amount of displayed columns and assigns the transformations that should be used to display products.

 

3. Switch to the Source tab. The code of the CMSDataList control should look like this:

 

 

It's not necessary to define the standard ItemTemplate elements of the DataList control since the transformation names have already been specified.

 

4. Save the changes to the web form. Now right-click it in the Solution explorer and select View in Browser. The resulting page should display a list like this: