Skip to main content
3 of 8
Simplified question and give output showing sample data
eat-sleep-code
  • 1.7k
  • 11
  • 25

JavaScript example of populating list in experience profile page

I am setting up a custom tab with custom facet data in the Experience Profile. I am successfully returning text values to the screen.

Now, I want to populate data into a list control. Are there any examples of this.

In my AdditionalInfoPanel I have a GenericDataProvider and a ListControl. My list has three columns -- for Sent, ContactType, and Message.

My javascript file looks like this...

define(["sitecore", "/-/speak/v1/experienceprofile/DataProviderHelper.js", "/-/speak/v1/experienceprofile/CintelUtl.js"], function (sc, providerHelper, cintelUtil) {
        var app = sc.Definitions.App.extend({
            initialized: function () {
                var localUrl = "/customfields/";
                providerHelper.setupHeaders([
                    { urlKey: localUrl }
                ]);
    
                var url = sc.Contact.baseUrl + localUrl;
                var communicationData;
                var $that = this;
                providerHelper.initProvider(this.AdditionalInfoDataProvider, "", url, this.AdditionalInfoTabMessageBar);
                providerHelper.getData(this.AdditionalInfoDataProvider,
                    $.proxy(function (jsondata) {
                        cintelUtil.setText($that.CompanyValue, renderUrl(jsondata.Company, jsondata.CompanyUrl), true); /* working correctly */
                        cintelUtil.setText($that.IndustryValue, jsondata.Industry, true); /* working correctly */
                        cintelUtil.setText($that.SubIndustryValue, jsondata.SubIndustry, true); /* working correctly */
                        cintelUtil.setText($that.RevenueRangeValue, jsondata.RevenueRange, true); /* working correctly */
                        cintelUtil.setText($that.IsKnownExecutiveValue, jsondata.IsKnownExecutive, true); /* working correctly */
                        cintelUtil.setText($that.IsKnownCustomerValue, jsondata.IsKnownCustomer, true); /* working correctly */
                        cintelUtil.setText($that.IsKnownBlogUserValue, jsondata.IsKnownBlogUser, true); /* working correctly */
                        cintelUtil.setText($that.OptInValue, jsondata.OptIn, true); /* working correctly */
                        communicationData = JSON.stringify(jsondata.Communications);
                        console.log(communicationData); /* SEE NOTE 1 FOR THIS OUTPUT */
                        providerHelper.initProvider(this.AdditionalInfoCommunicationDataProvider, "", url, this.AdditionalInfoCommunicationMessageBar);
                        providerHelper.getListData(this.AdditionalInfoCommunicationDataProvider, communicationData); /* SEE NOTE 2 FOR ERROR */
                    }));
            }
        });
    
        function renderUrl(text, url) {
            if (url !== null && url.length > 0)
            {
                return "<a href=\"" + url + "\" target=\"_blank\">" + text + "</a>";
            }
            else
            {
                return text;
            }
        }
    
        return app;
    });

NOTE 1: The output of this console.log is: [{"Sent":"2016-10-18T17:25:36.831Z","ContactType":"Product Information","Message":"Looking to get information about software","IsEmpty":false}]

NOTE 2: The resulting error is: caught TypeError: Cannot read property 'set' of undefined / DataProviderHelper.js:74

I am trying to figure out how to correctly bind the data in jsondata.Communications to the ListControl.

I am using Sitecore 8.1 Update 2

eat-sleep-code
  • 1.7k
  • 11
  • 25