Embedding Sharepoint Web Part in Java Script

Question

I've deployed a sharepoint web page and added a custom webpart that visualized data the way customers want to see it. The problem with the webpart is that we cannot scale, modify, or hide it when the user wants to. We thought to embed the Sharepoint webpart in a Java wrapper. Typically this would be easy on a standard HTML page. The question is how do I embed a webpart inside a java wrapper in Sharepoint?

I want to add 2 html buttons, one to show the webpart and one to hide the webpart. The challenge is finding the webpart ID that I can pass to either button to execute the hideMe or showMe java script.

The webpart header:

<WebPartPages:WebPartZone runat="server" Title="loc:FullPage" ID="FullPage" FrameType="TitleBarOnly"><ZoneTemplate>
<WpNs0:Trend runat="server" __MarkupType="xmlmarkup" WebPart="true" __WebPartId="{AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A}" >

The code (so far)

<button onclick="HideWebpart('AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A')">Hide Me</button>
<button onclick="ShowWebpart('AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A')">Show Me</button>

<script>
function HideWebpart(AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A)
{
    var wp=document.getElementById(AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A);
    wp.className = "hidden";
}

function ShowWebpart(AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A)
{
    var wp=document.getElementById(AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A);
    wp.className = "";
}
</script>

Elliot Wood Elliot Wood · Accepted Answer · 2013-02-07T05:25:49

Ok so you can give the WebPart an id="mywebpart", then simply use a JavaScript function to hide it.

Example:

<style type="text/css>
    .hidden { display:none; }
</style>
<script>
function HideWebpart(id_of_webpart)
{
    var wp=document.getElementById(id_of_webpart);
    wp.className = "hidden";
}

function ShowWebpart(id_of_webpart)
{
    var wp=document.getElementById(id_of_webpart);
    wp.className = "";
}
</script>
<WebPartPages:WebPartZone>
..The SVG WebPart... <--Add WebPart with id here
</WebPartPages:WebpartZone>

<button onclick="HideWebpart('PASS WEB PART ID IN HERE')"/>

I believe the problem is you want to use the "__WebPartId=" attribute when getElementById will only look for the "id=" attribute. so go find an element by a custom attribute you will need to use the following instead of getElementById:

function getElementByAttribute(attr, value, root) {
    root = root || document.body;
    if(root.hasAttribute(attr) && root.getAttribute(attr) == value) {
        return root;
    }
    var children = root.children, 
        element;
    for(var i = children.length; i--; ) {
        element = getElementByAttribute(attr, value, children[i]);
        if(element) {
            return element;
        }
    }

Usage:

getElementByAttribute("__WebPartId",'PASS WEB PART ID IN HERE');

Note: It will be much slower compared to getElementById because you cannot make use of any index

Or if you can use the jQuery library you can use simply $('[__WebPartId="PASS WEB PART ID IN HERE"]')

Embedding Sharepoint Web Part in Java Script

1 Answers