In SPEAK a list  is fed with data through a data source. For example to get data into a ListControl the Items rendering parameter on the ListControl has to be bound to a collection on a datasource.

When the items model attribute changes, that is when the datasource changes, then the ListControl automatically refreshes and shows the new data.

SPEAK ships with 3 different data sources which are all made for Sitecore items.

These are fine for working with Sitecore items but I really miss a simple data source just for JSON data.

So during the Sitecore Hackathon we needed exactly this for a chat application.

Creating a JsonDataSource

First I created a custom SPEAK component with the following cshtml

And the following client side implementation.

This implementation is extremely simple.

We bind the model attribute json with the rendering parameter Json. Then we have an add function for pushing new objects into the json array.

Notice that we reconstruct the json array on each add. The reason for this is a bit strange. Usually in JavaScript adding to an array is easy. Just call <array>.push(newObject) to add the object to the end of the array. But calling this method changes the array into an object with array as prototype.

For some reason the SPEAK ListControl do not like this. We need the array to be a real array, I cannot give you a clear explanation for this but it took quite some time and headache to figure out.

Also the add method adds to the beginning of the array so newest added is on top.

Next we need to register the rendering in Sitecore. First we create a Speak-Renderings folder in the application where we need the datasource and then we create a View Rendering item in this folder called JsonDataSource.

Next thing is to create the rendering parameters. This is done by creating a template item beneath the JsonDataSource view rendering item.

On the template we create one field called Json with bindmode=read and then we set the ComponentBase rendering parameters template as a base template.

Finally we point the rendering parameters field on the view rendering to the rendering parameters template.

Now we can bind a ListControl items parameter to the Json parameter of the JsonDataSource.

That was almost it.

Important

There is one small glitch though which I hope will be fixed in later versions of SPEAK.

The ListControl expects that all the json objects have a property called itemId, if it does not then it ignores the row.

Just add a property called itemId containing any value and it works just fine.

In a later post I will show some more about the ListControl and how it is configured.

Here is a working example for calling add on the datasource:

 Note that it is also possible simply to add JSON directly to the items attribute on a ListControl but I prefer this binding approach for separating responsibility.