Loading and displaying data on websites

Once you prepare the data structure of your website using document types and/or custom tables, add components (web parts or ASP.NET controls) onto pages to load and display the content. The following steps outline the general process:

1. Use a data source to load the required data
2. Prepare transformations to define how the data appears on the website
3. Place a listing component onto the page, which displays the items from the data source according to the assigned transformations

Many listing components contain a built-in data source. For example, the Repeater provides a data source for loading Kentico documents. If you wish to connect a separate data source to such web parts, the type must match the internal data source. So in the case of the Repeater web part, you need to connect a Documents data source.

To display items from any type of data source, use the Basic repeater, Basic datalist or Basic universal viewer. The basic listing web parts do not load data on their own and you always need to connect a separate data source.

You can also add optional functionality to lists of data:

• Filters - allow users on the live site to limit which data is displayed
• Paging - separates lists of data into multiple pages and provides navigation between the pages

For more information, see Filtering and paging data.

Example - Displaying blog posts (document data)

The following example shows how to display a list of blog posts using a Repeater web part. The Repeater combines both a document data source and listing functionality. You can use the same approach whenever you need to display the content of your website’s documents.

Note: The example works with data from the sample Corporate site.

1. Open the Pages application.

2. Use the content tree to select the page where you want to display the data.

3. Open the Design tab.

4. Add the Repeater web part onto the page.

5. Set the web part’s properties:

   • Path: /Community/Blogs/%
   • Document types: CMS.BlogPost
   • Transformation: CorporateSite.Transformations.BlogPosts

6. Click OK.

The Repeater loads data from the blog post documents in the specified section of the website, and displays the information in the format defined by the transformation.

Example - Displaying user profiles (object data)

The following example demonstrates how to create a list of content editor user profiles. To display user data, you need to connect two separate web parts — a data source and a basic listing web part.

1. Open the Pages application.

2. Use the content tree to select the page where you want to display the data.

3. Open the Design tab.

4. Add the Users data source web part onto the page.

5. Set the following properties for the web part:

   • Web part control ID: EditorUserSource
   • Where condition: UserIsEditor = 1

6. Click OK.

7. Add the Basic repeater web part onto the same page with the following properties:

   • Data source name: EditorUserSource
   • Transformation name: CorporateSite.Transformations.MembersList

8. Click OK.

The User data source loads all users who have the Editor privilege level (i.e. have access to the administration interface). The Web part control ID and Data source name properties bind the data source to the Basic repeater, which displays the user data according to the specified transformation.