Setting up a Sitecore SPEAK ListControl

The ListControl in SPEAK is made as a generic control for showing lists. Data is fed into the list using a datasource component as shown in my previous post here.

In this post I will show how to define the columns in a ListControl and setup the rendering on a SPEAK page. It is kind of similar to how it was done in the “old” version of SPEAK which has been used for ECM 2 (as one of the only concepts which has been kept in the new version).

Defining the list

To define a list we start by creating a folder under PageSettings called Lists. In this folder we create a ListControl item as shown below.

 

Messages List

 

On this item we can set some basic properties of the list we want to show.

Beneath the ListControl item we then create ColumnField items for each column we want to show in the list.

Column field

 

On each column field you need to set the header text for the column and the name of the json property to show. This is actually just the field name if you use any of the out-of-the-box datasources which returns Sitecore items as json.

It is also possible to write another json property / field name for sorting the column and to provide a formatter for dates etc.

Inserting the list on a page

Now open the presentation details for the page on which the list should be shown.

First add a DataSource rendering to the page if it is not there already and then add the ListControl rendering.

On the ListControl rendering set the datasource to the ListControl item which you created before and then set the Items parameter to bind with the collection on the datasource rendering.

List Control Rendering Parameters

Notice that the datasource parameter is the datasource for the ListControl definition and not for the data shown in the list. The data shown in the list is set in the Items parameter, not the datasource. Obvious for Sitecore developers, but a bit confusing to write about.

And here is how the list looks which I took these screenshots from.

Finished List control

 

No coding needed but a nice looking list came out with sorting capabilities and what not.

Retrospective

The ListControl in SPEAK is extremely easy to use with the built in datasources. You can have an advanced list up and running in less than five minutes if it is just showing data from items.

The ListControl in 7.1.130926 seems like an early version of what is to be in the future. It misses a lot of parameters for control how each column is rendered, for example width, line break behaviour etc.

The formatter concept works fine for each column but could be easier if it was made as a dropdown of available formatters. The alignment dropdown is empty so not sure what it is meant to do.

I really hope that Sitecore will extend this control in the coming versions of SPEAK. Otherwise I will need to make my own version very soon, I need it for the Hackathon chat application asap.

 

Anders Laub

Anders Laub Christoffersen

Anders has been working with Sitecore for over a decade and has in this time been the lead developer and architect on several large scale enterprise solutions all around the world. Anders has been nominated a Sitecore Technical MVP three years in a row for 2014, 2015 and 2016. Anders is now working as a Sr. Solutions Architect at Sitecore in Copenhagen.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
Website