Put JSON data in your SearchDataSource and bind it to SearchableDroplist – Sitecore SPEAK

droplist

Hello guys, I have been working with SPEAK for a while and some of the controls I’ve been using a lot are:
SearchDataSource and SearchableDropList(SPEAK 2 control)

The SearchableDropList is a droplist with search, the datasources you can use are:
QueryDataSource
SearchDataSource

If you have less than 100 items then QueryDataSource is OK(since it’s using Sitecore Query or Sitecore Fast Query) but if you have more, then use the SearchDataSource(using good old index).

An extremely cool thing regarding SearchDataSource is that you can add JSON data to it. Just create a JSON array and add it like this:

(function (Speak) {

	Speak.pageCode({


		initialized: function () {
			
			var self = this;
			
			self.BindJsonDataToMyCoolSearchDataSource();


		},
        BindJsonDataToMyCoolSearchDataSource: function() {
			var self = this;

			var customJsonData = [];

			for (var i = 0; i < 10; i++) {

				var data = {};
				data["Value"] = i;
				data["Text"] = i + " some text"; 
				customJsonData.push();
			}


			self.MyCoolSearchDataSource.Items = customJsonData;

		}

	});
})(Sitecore.Speak);

To add the JSON data we just set the Items property on the SearchDataSource:
self.MyCoolSearchDataSource.Items = customJsonData;

Then in your SpeakLayout you will connect the SearchDataSource to your control, in this case the SearchableDropList:
speaksearch
To set the datasource for the SearchableDropList, we will use DynamicData. Here we point(bind) to the SearchDataSource:
{Binding MyCoolSearchDataSource.Items}

Next we will set DisplayFieldName to the JSON field “Text” and finally we set ValueFieldName to the JSON field “Value”.

Now you you will have a searchable droplist where you can search in your custom JSON data:
droplist

By the way the new version(Version 2) of Sitecore Rocks is so much faster and it has some very new nice features. It truly rocks 😉

That’s it and keep doing some good SPEAK stuff out there

That’s all for now folks 🙂


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.