none
Exporting and Customizing the Table Of Contents Webpart

    Question

  • We have a site with Managed Metadata enabled. In that we have Term sets and 2 levels of Terms and every one has a unique page associated with it.

    Building 1
    ====Floor 1
    ====Floor 2
    ========House 1
    ========House 2
    ========House 3
    Building 2
    ====Floor 3
    ========House 4
    ========House 5
    ========House 6
    ====Floor 4
    ========House 7
    Building 3
    ====Floor 5
    ========House 8
    ========House 9

    Buildings - Level 1.

    Floor - Level 2.

    House - Level 3.

    Now my requirement is : To show the name of Floors under it, if I am viewing any Building Page ; show the name of Houses under it, if I am viewing a floor page.

    For Example, If I am viewing, Building 2, i should be able to see the links of floor pages for that building, (i.e) Floor 3 and Floor 4.
    If I am viewing Floor 5 page, I have to see the House 8 and House 9 links there.

    I went for the approach of using Table of Contents webpart. I am able to statically fulfill the requirement by giving the Full url on the "start with location" text box, when i edit the webpart.
    Now i need to do it dynamically. (i.e) wherever this webpart is been placed, it should get the URL and pass it as a value to the"start with location" parameter.

    First I tried with Page Layouts approach, I added this webpart using snippet gallery, and tried to customize it. Inside the page layout, I have to pass the page's url to the "AnchorLocation" parameter of the webpart.

    Generally , Through javascript I can get the url of the page. But I am not able to do inside page layouts. My javascript function was not called, also i was not aware of the format(syntax)to pass value to the "AnchorLocation".

    Then i tried exporting the webpart. I did that and I opened the .webpart file in visual studio. Here also I have to give value to the "AnchorLocation". I am not sure how to call my javascript and to pass value to the "AnchorLocation".

    Any help would be much appreciated, Please let me know, if my explanation is not clear. 


    • Edited by no-nerd Friday, June 10, 2016 6:05 AM
    Thursday, June 9, 2016 8:26 PM

Answers

  • Hi,

    You do not need to export the web part and customize it. You can just add JavaScript to master page and it will check the web parts added on each page. If there is a Table Of Contents web part(same title), then set the AnchorLocation property.

    To set the “AnchorLocation” of the Table Of Contents we part using JavaScript, please check the demo below(please change the "newLocation" in the script based on your need):

    var newLocation="/sites/team/team/building1";
    var clientContext = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
    var oFile = clientContext.get_web().getFileByServerRelativeUrl(_spPageContextInfo.serverRequestPath); 
    var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
    var collWebPart = limitedWebPartManager.get_webParts();
    clientContext.load(collWebPart);
    clientContext.executeQueryAsync(function () 
    {
        for (var x = 0; x < collWebPart.get_count(); x++) {
            var temp = collWebPart.get_item(x);
            var webPartProperties = temp.get_webPart().get_properties();
            clientContext.load(webPartProperties);
            clientContext.executeQueryAsync(function () 
            {
                var webpartprops = webPartProperties;
                var title=webpartprops.get_item('Title');
                //console.log(webpartprops.get_item("Title"));
                if(title=="Table Of Contents")
                {
                    console.log(webpartprops.get_item('AnchorLocation'));
                    webpartprops.set_item("AnchorLocation", newLocation);
                    temp.saveWebPartChanges();
                    clientContext.load(temp);
                    clientContext.executeQueryAsync(function () 
                    {
                        console.log("WebPart properties saved.");
                    },
                    function() 
                    {
                        console.log("Failed save WebPart Properties"); 
                    });
                }
            }, 
            function () 
            { 
                console.log("Failed to load web part properties"); 
            });
        }
    
    }, 
    function () 
    { 
        console.log("Failed to load web part collection"); 
    });

    Best Regards,

    Victoria

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


    Friday, June 10, 2016 6:57 AM
    Moderator

All replies

  • Any suggestions?
    Friday, June 10, 2016 6:03 AM
  • Hi,

    You do not need to export the web part and customize it. You can just add JavaScript to master page and it will check the web parts added on each page. If there is a Table Of Contents web part(same title), then set the AnchorLocation property.

    To set the “AnchorLocation” of the Table Of Contents we part using JavaScript, please check the demo below(please change the "newLocation" in the script based on your need):

    var newLocation="/sites/team/team/building1";
    var clientContext = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
    var oFile = clientContext.get_web().getFileByServerRelativeUrl(_spPageContextInfo.serverRequestPath); 
    var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
    var collWebPart = limitedWebPartManager.get_webParts();
    clientContext.load(collWebPart);
    clientContext.executeQueryAsync(function () 
    {
        for (var x = 0; x < collWebPart.get_count(); x++) {
            var temp = collWebPart.get_item(x);
            var webPartProperties = temp.get_webPart().get_properties();
            clientContext.load(webPartProperties);
            clientContext.executeQueryAsync(function () 
            {
                var webpartprops = webPartProperties;
                var title=webpartprops.get_item('Title');
                //console.log(webpartprops.get_item("Title"));
                if(title=="Table Of Contents")
                {
                    console.log(webpartprops.get_item('AnchorLocation'));
                    webpartprops.set_item("AnchorLocation", newLocation);
                    temp.saveWebPartChanges();
                    clientContext.load(temp);
                    clientContext.executeQueryAsync(function () 
                    {
                        console.log("WebPart properties saved.");
                    },
                    function() 
                    {
                        console.log("Failed save WebPart Properties"); 
                    });
                }
            }, 
            function () 
            { 
                console.log("Failed to load web part properties"); 
            });
        }
    
    }, 
    function () 
    { 
        console.log("Failed to load web part collection"); 
    });

    Best Regards,

    Victoria

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


    Friday, June 10, 2016 6:57 AM
    Moderator
  • Thanks for the reply Victoria. I will check it right away.
    Friday, June 10, 2016 10:56 AM
  • It worked :)

    Thank you very much for your help.

    Instead of injecting that in my master page, I will try to add that in my page layout. 

    Again thanks for your help... :)

    Friday, June 10, 2016 11:52 AM
  • Hi,

    I am glad that your issue is resolved.

    If you think my reply is helpful, you can mark it as answer and it will help others who meet the same issue in this forum.

    Best Regards,

    Victoria


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

    Friday, June 10, 2016 1:14 PM
    Moderator