none
How to Access/Manipulate Page Webparts Using Javascript ? RRS feed

  • Question

  • I'm new to SharePoint 2013 and trying to use javascript/jquery within it.

    I'm trying to dynamically access and manipulate webparts on a page, and I can't seem to get the webparts collection for my test page to load.

    Can anyone tell me what logic, method calls, or anything else I'm lacking in the code below which is preventing me from being able to retrieve all of the web parts on my test page?

    I've found bits and pieces of code, but so far all of the variations of them that I've tried, have failed.

    Here's a stripped down version of my current javascript code version which I have added to my page using the HTMLFormWebPart(after jquery is loaded):

    var jq = jQuery.noConflict();
    var slctdMember = "";

    function teamMemberChanged()
    {
     //alert(" 'teamMemberChanged' FUNCTION ENTERED. ");
     
     slctdMember = jq("#slctdMember").val().toString();
     
     jq("#sbmtButton").focus();
            jq("#sbmtButton").click();
    }

    function postSelectedMember()
    {
        jq("#tmMember").val(slctdMember);
    }

    function findAllWebParts()
    {
     var theURL = window.location.pathname;
     var ctx= new SP.ClientContext(theURL);
     //var web = ctx.get_web();
     //var site = ctx.get_site();
     var webPartsIdStr = "WebPartIds=";
     var pageFile = ctx.get_web().getFileByServerRelativeUrl(theURL);
     var limitedWebPartManager = pageFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
     var collWebParts = limitedWebPartManager.get_webParts();

     ctx.load(collWebParts);
     ctx.executeQueryAsync(function()
     {
      alert("SUCCESS..."); 
     },
     function()
     {
      alert("Failed to load web part collection");
     });
    }

    jq(document).ready(function()
    {
        //alert("DOCUMENT READY!");
        //findAllWebParts();
        jq(window).load(function()
        {
            RegisterSodDep('findAllWebParts', 'sp.js');
            RegisterSodDep('findAllWebParts', 'sp.runtime.js');
            SP.SOD.executeFunc('sp.js','SP.ClientContext',findAllWebParts);
        });
    });

    Currently I keep getting this alert "Failed to load web part collection" message when the code executes.

    Any help would be greatly appreciated.

    Thanks for the help.

    Henry

    Monday, February 27, 2017 10:28 PM

Answers

  • Hi Henry,

    Please add the following code into a content editor web part in your web part page.

    <script type="text/ecmascript">
    ExecuteOrDelayUntilScriptLoaded(RetrieveWebParts, "sp.js");
    
    function RetrieveWebParts(){		 
    	var serverRelativeUrl=_spPageContextInfo.serverRequestPath;
    	var ctx = new SP.ClientContext.get_current();
    	var web = ctx.get_web();
    	var oFile = web.getFileByServerRelativeUrl(serverRelativeUrl);
    	var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
    	this.collWebPart = limitedWebPartManager.get_webParts();
    	ctx.load(collWebPart);
    	ctx.executeQueryAsync(onSuccess, onFailure);
    }
    function onSuccess() {
    	alert('Web Part Count: ' + collWebPart.get_count());
    }
    function onFailure() {
    	alert('Failure!');
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Tuesday, February 28, 2017 3:13 AM
    Moderator

All replies

  • Hi Henry,

    Please add the following code into a content editor web part in your web part page.

    <script type="text/ecmascript">
    ExecuteOrDelayUntilScriptLoaded(RetrieveWebParts, "sp.js");
    
    function RetrieveWebParts(){		 
    	var serverRelativeUrl=_spPageContextInfo.serverRequestPath;
    	var ctx = new SP.ClientContext.get_current();
    	var web = ctx.get_web();
    	var oFile = web.getFileByServerRelativeUrl(serverRelativeUrl);
    	var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
    	this.collWebPart = limitedWebPartManager.get_webParts();
    	ctx.load(collWebPart);
    	ctx.executeQueryAsync(onSuccess, onFailure);
    }
    function onSuccess() {
    	alert('Web Part Count: ' + collWebPart.get_count());
    }
    function onFailure() {
    	alert('Failure!');
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Tuesday, February 28, 2017 3:13 AM
    Moderator
  • Dennis, Thank  you so much for your reply to my question. It worked like a charm first time when I tried it. Now my ultimate goal is this. I need to be able to touch some, most or all of the available properties of individual webparts, but so far I've had no luck doing this, because up till now I couldn't even get to the web part manager. So since the webpartmanager can get a count then I'm assuming it already has a web part definition collection already attached to it. So since I now have a working example of how to get the webpart manager I'm going to try to access that web part collection, to get the individual web parts as well as each of their individual properties or fields. Are there any common pitfalls or things to look out for when I do this? Let me know when you can. Thanks. Henry
    Friday, March 3, 2017 9:27 PM
  • Hi,

    Here is a similar thread for your reference:

    Reading web part properties using JavaScript Object Model in SharePoint 2013

    If you have new question, I would suggest you post it in a new thread, it would make others easier to focus on one question in one single thread and it will benefit other community members who stuck with the same question.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, March 6, 2017 1:16 AM
    Moderator