Sitecore SPEAK For Beginners – Part 5 – Display The Data

This is part 5 of the blog series Sitecore SPEAK for beginners.

In our last post we used Sitecore SPEAK’s SearchDataSource component  to fetch items from master database.

In this post we will learn how we can render those items on our page with the help of another Sitecore SPEAK component called ListControl.

Let’s start with adding the ListControl component to the Design Layout of our SPEAK app’s  ListPage:

Jobs_Listing_26
As the name suggests, ListControl is used to display the list of items.

Let’s update ListControl component’s, placeholder to ApplicationContent.Main: so it renders at the right place on the page.

Jobs_Listing_33

ListControl will always require a datasource to render items.It has Items property to bind to the datasource.

Now open the Properties dialog of the ListControl component & look for Items property.
We can see a list if we click the arrow(in the right side) on the Items property .

Jobs_Listing_27

These options listed here are nothing but properties of the other SPEAK components, which are present on the page (e.g. Header or SearchDataSource component).

Sitecore SPEAK provides this nice way to bind property of one component to the other component.

We configured the SearchDataSource to fetch items from the master db & it hold those items in it’s items property,so let’s bind ListControl now.

Select {Binding DataSource.Items} option from the list.

Jobs_Listing_32

Save the DesignLayout & open the ListPage in the browser & it should look something like this:

Jobs_Listing_28

At the moment ListControl should render empty rows only even if it has items to render.

Let’s create the Rendering Parameters for ListControl so it renders the data.
I added a new item of type ListControl – Parameters under the PageSettings item(named it ItemList-Parameters):

Jobs_Listing_30

Copy ItemList-Parameters’s item id into the datasource property of the ListControl.

Jobs_Listing_34
We would also need to add ColumnField items under the just created ItemList-Parameters item.

The ColumnField item is used to map the Sitecore field as well as to define the Column name for the ListControl’s table(remember the empty table?).

I’m adding 2 ColumnFields items which I will use to display the item’s name & description.

To add the ColumnField item under the ListControl-Parameters, press CTRL+A & type columnfield to filter the results:

Jobs_Listing_31

Since it will map to the item’s name field, I named it as ItemNameColumn.

We can define the column’s heading in the HeaderText field.
Let’s put column’s heading as Item Name.
And to map the item’s “Title” field with this column, I’ll put text “Title” in the DataField.

Jobs_Listing_35

I added another column for item’s description & put the ‘Item Description‘ in HeaderText & ‘Text‘ in the DataField.

When I refresh the ListPage in browser, I see a 2-column list of items:

Jobs_Listing_38

Alright finally we were able to render the items from master db to our SPEAK app’s ListPage.
I know the header title is not making sense for now as we are rendering Sitecore items & not Sitecore jobs :-).

Did you notice, we haven’t wrote a single line of code yet.

I hope I was able to walk you through with the basics of Sitecore SPEAK in all these posts.

If you face any issue or have questions/feedback,please write in comments.
You can also tweet me at https://twitter.com/vsrathore2

In next post I’ll show how we can create a custom component to list Sitecore Jobs.

Sitecore SPEAK For Beginners blog series:
In part 1  Create SPEAK Application.
In part 2 SPEAK Components.
In part 3 Rendering Parameters.
In part 4 Getting Data.
In part 5 Display The Data.
In part 6 Custom SPEAK Component.
In part 7 Rendering Parameters for Custom Component
In part 8 Initialize & Bind Rending Parameter Using Knockout.js
In part 9 Getting Data For Custom SPEAK Component.

If you any question/suggestion, please write in comments.
You can also connect with me on Twitter.