Sunday, June 12, 2016

Handling NameValueList field types in Sitecore SPEAK

It was a  tedious task to handle NameValueList field type while I was working on building a Sitecore SPEAK application and one of my template had a NameValueList field type as an expected input from content authors which was the basis as list of parameters to pass it to my application. I had to keep it dynamic and hence I decided to use NameValueList as this can be configured for each item independently as key value pairs.

The problem I faced is to read this list of key value pairs and provide it as items to be bound to ListControl on my SPEAK page.

Natively, Sitecore stores NameValueList field as shown below (you can see this when you enable raw values)

NameValueField-Sitecore Content Editor View

NameValueField-Sitecore Raw Values View

I had to write two functions to deal with this field value in Sitecore SPEAK application, one to get list of json objects from this tokenized field value and another one to send it back to Sitecore in the format desired (tokenized string) from the list of json objects.

Snippet of the first function (to get list of Json objects as string) :

        GetJobDataMapJson: function (jobDataMap) {
            var jsonJobDataMap = [];
            var arrKeyValue = jobDataMap.split("&");

            if (arrKeyValue != null && arrKeyValue.length %gt; 0) {
                for (i = 0; i < arrKeyValue.length; i++) {
                    var arrKeyValuePair = arrKeyValue[i].split("=");

                    var newJobDataMap = {
                        "itemId": arrKeyValuePair[0],
                        "Key": arrKeyValuePair[0],
                        "Value": arrKeyValuePair[1]


            console.log('Json Job Data Map as string : ' + JSON.stringify(jsonJobDataMap));
            return jsonJobDataMap;

Please note the json property "itemId" that is being set as the same value as key. This is important if you are binding this json data to controls such as ListControl otherwise your events such as selectedItem etc will not work without having itemId

The second function (to translate json objects into namevalue string expected by Sitecore)

        GetJobDataMapString: function (jsonJobDataMap) {
            console.log('In GetJobDataMapString with ' + jsonJobDataMap);
            if (jsonJobDataMap != null && jsonJobDataMap.length > 0) {
                var jobDataMapString = "";
                for (i = 0; i < jsonJobDataMap.length; i++) {
                    jobDataMapString = jobDataMapString + jsonJobDataMap[i].Key + "=" + jsonJobDataMap[i].Value;

                    if (i < jsonJobDataMap.length - 1)
                        jobDataMapString = jobDataMapString + "&";
                return jobDataMapString;

Finally the code for your ListControl to bind with this json data and your events to work

                   var jsonJobDataMap = app.GetJobDataMapJson(entity.JobData);
                   app.ListControl.set("items", jsonJobDataMap);

Hope this helps to someone trying to do something similar.