0

I wrote a custom JSOM script that uses SPServices to read list items from a list with 2430 items and 11 fields\columns. The scripts reads all list items and loads them in to JavaScript object. It is necessary to load all 2430 items in to JavaScript object because, users want to apply filters (applied via dropdown menu selection).

Because of this the page in which script runs takes more than 30 seconds to load for the first time. And definitely users will not be happy. Applying “CAMLRowLimit” will not work because I have to load all items into JavaScript object before it’s available for users to filter data.

How can I get it down to 4 seconds? Any ideas OR reference’s on the web are appreciated.

Below is part of my script:-

$().SPServices({  
webURL: '/teams/SharePoint360',
operation: 'GetListItems',
async: true,
//CAMLRowLimit: 500,
listName: 'SupplierItems',
CAMLViewFields: '<ViewFields Properties="TRUE">\
                <FieldRef Name="Title" />\
                <FieldRef Name="Supplier_x0020_Name" />\
                <FieldRef Name="Name_x0020_in_x0020_Local_x0020_" />\
                <FieldRef Name="Preferred_x0020_Supplier" />\
                <FieldRef Name="Partner_x0020_Status_x0020__x002" />\
                <FieldRef Name="ID_x0020_Number" />\
                <FieldRef Name="Effective_x0020_Date" />\
                <FieldRef Name="signed" />\
                <FieldRef Name="Area" />\
                <FieldRef Name="Country" />\
                <FieldRef Name="FinalResult" />\
            </ViewFields>',
CAMLQueryOptions: '<QueryOptions><IncludeMandatoryColumns>FALSE</IncludeMandatoryColumns></QueryOptions>',
completefunc: function (xData, Status) {
    if (window.K360WaitScreen) {
        window.K360WaitScreen.close();
        delete window.K360WaitScreen;
    }

    $(xData.responseXML).SPFilterNode('z:row').each(function () {
        var $this = $(this);

        EnsureCollectionItem(Supplier, $this.attr('ows_Supplier_x0020_Name'));
        EnsureCollectionItem(areas, $this.attr('ows_Area'));
        EnsureCollectionItem(locations, $this.attr('ows_Country'));
        EnsureCollectionItem(psp, $this.attr('ows_Preferred_x0020_Supplier'));
        EnsureCollectionItem(SupplierID, $this.attr('ows_Title'));

        //Loading items in to Javascript object for latter filtering (How can we load 2430 items in to 
        //this object effectively so that laod time can be drastically reduced from 30 seconds to 4 seconds)
        items[$this.attr('ows_ID')] = {
            id: $this.attr('ows_ID'),
            title: $this.attr('ows_Title'),
            supplierName: $this.attr('ows_Supplier_x0020_Name'),
            psp: $this.attr('ows_x002f_Preferred_x0020_Supplier'),
            area: $this.attr('ows_Area'),
            Country: $this.attr('ows_Country'),
            partnerStatus: $this.attr('ows_Partner_x0020_Status_x0020__x002'),
            idNumber: $this.attr('ows_ID_x0020_Number'),
            Signed: $this.attr('ows_signed'),
            finalResult: $this.attr('ows_FinalResult'),
            effectiveDate: $this.attr('ows_Effective_x0020_Date')
        };
    }); //end $(xData.responseXML).SPFilterNode('z:row').each(function ()       

   }//end completefunc: function (xData, Status)
 });//end service call

Thanks

1 Answer 1

3

In order to speed up the processing, you are going to have to pass dynamic filtering via a CAML query to the script after the users have selected their values.

I would build the UI so it has all the of the filters and their values defined, then based on their selection, build the CAML necessary to fecth the requested filter and load those into your UI.

If you have to do it this way, then as soon as you can in the page lifecycle, initiate your async call to start fetching data as all the other information is being loaded. Realistically though you should not pull down a full data set, instead allow the users to tell you what they need, then go get it.

3
  • Sounds like a good Idea. Will try that.
    – user117048
    Jun 15, 2015 at 16:30
  • Unfortunately I can't use the above approach because, All the 5 dropdowns options for user filters are dynamically populated from List columns from all list items.
    – user117048
    Jun 15, 2015 at 18:55
  • Then an alternate approach would be to utilize those as site columns, then you could still dynamically pull the drop down references to allow users to set their filters, then pass that into the CAML and fetch your items. Jun 15, 2015 at 19:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.