How to find number of webparts in a page

Sep 1, 2011 at 2:24 PM

Hi,

Is it possible to find number of webparts in a webpart page or some page in SharePoint using our SPServices ?

Please guide me on this.

Thanks in advance !...

-

Rao

Sep 1, 2011 at 3:15 PM

From a quick glance it looks like all webparts have a ,<td> and <table> tag that follows a format like this:

<td id="MSOZoneCell_WebPartWPQ4" valign="top" class="s4-wpcell-plain"><table class="s4-wpTopTable" border="0" cellpadding="0" cellspacing="0" width="100%">

You should be able to count the occurrences of the <table> "class" or <td> "id" using just javascript (or jquery for less code).

 

Colin

Sep 1, 2011 at 3:22 PM

You could also try doing a count on <td class="ms-wpTdSpace">, then dividing the result by 2 (each webpart has two).

 

Example: In my webpart page I have 5 webparts, when searching through the html source I find 10 occurrences of <td class="ms-wpTdSpace">.

 

Hope this helps.

 

Colin

Sep 1, 2011 at 3:45 PM

Hi advacomp,

Thanks for your quick response !...

I did the same before. But after finding the number of webparts I need to find the ID of the TD or Closest DIV tag for my requirement.

I found the solution for finding the webparts, after this I'm struggling for finding the ID of the TD tag for a perticular webpart. Once I get ID then I have to append these webparts dynamically to a

perticular region. Any suggestion for finding the ID of the TD for a perticular webpart which we got from for each loop?

Thanks in advance !...

-

Rao.

Sep 1, 2011 at 3:58 PM

This should get you heading down the right path. If your having trouble finding something in common between the exact <td> tag your looking for you could try finding what you need from the child node and then reference a value in the parent node.

 

<script type="text/javascript">

var inputs = document.getElementsByTagName('td');

for(var i=0; i<inputs.length; i++)
{

     if(inputs[i].getAttribute('class')=='ms-WPHeaderTd')
     {
        var holder = inputs[i].getAttribute('id');

        alert(holder);
     }
}

</script>

Sep 1, 2011 at 4:22 PM

I think 'ms-WPHeaderTd' and 's4-wpTopTable'  are available in SP 2010.

But in SP 2007 the TD tag contains <"td title="Some Name" id="WebPartTitleWPQ7" style="width:100%;">"

Possible can you please check it for SP 2007. Mean while I will apply your logic to SP 2007 for findin the ID of the TD.

Thanks !...

Sep 1, 2011 at 4:30 PM

I do not have an instance of 2007 to test on at this time. I would go deeper then the <td> tag. Go through the HTML source and find something unique for webparts in 2007 (like the class of a tag), then using the code I posted above, key in on that element, then reference its parentnode, or if needed the parentnode of the parentnode, etc., you can keep climbing up or down the node tree using parentnode and childnode.

Check out this link for more informatoin on parentnode and childnode:

http://reference.sitepoint.com/javascript/Node/parentNode

 

Also you could modify the if statement in the code above to match on (id begins with "WebPartTitleWP")

 

 

Colin

Sep 1, 2011 at 4:42 PM

Yeah !..

I found one logic. Each TR contains class "ms-WPHeader".

I trying to find the this class TR from here I'm trying to find closet TD and his attribute as ID.

I will try and update you ...

-

Rao

Sep 1, 2011 at 4:51 PM
Edited Sep 1, 2011 at 4:57 PM

if the <td> tag your looking for is above this <tr> tag use parentnode, if it is below it, use firstChild. Something along the lines of this: (this is not tested just giving you an idea of how to do it).

 

<script type="text/javascript">

var inputs = document.getElementsByTagName('tr');

for(var i=0; i<inputs.length; i++)
{

     if(inputs[i].getAttribute('class')=='ms-WPHeader')
     {
        var holder = inputs[i].firstChild.getAttribute('id');

        alert(holder);
     }
}

</script>

Sep 1, 2011 at 5:04 PM

thnx for the code snipet.

I used below jQuery for single td - id value.

var id = $('.ms-WPHeader').closest('td').attr('id');

But no luck !..

I tried your code. May be I need to change a bit. I ll let u know the progress !...

 

Rao.

Sep 1, 2011 at 5:06 PM

If I try to hide, I mean to say if I changed the code a bit like the below one it is working fine (It is hiding that perticualar TD tag)

$('.ms-WPHeader').closest('td').hide();

-

Rao

Sep 1, 2011 at 5:06 PM

I made an update to my code above (changed childnode to firstChild). Please try it again if you used my original post.

Sep 1, 2011 at 5:20 PM

inputs[i].getAttribute('class')

Taking null value.

-

Rao

Sep 1, 2011 at 5:43 PM
Edited Sep 1, 2011 at 5:47 PM

Sorry .getAttribute('class') doesnt work in IE, only in FireFox. Use this code, it will work in any browser. I spun up a 2007 instance and have tested it myself and it works like a charm.

 

<script type="text/javascript">

var inputs = document.getElementsByTagName('tr');

for(var i=0; i<inputs.length; i++)
{

     if(inputs[i].className=='ms-WPHeader')
     {
        var holder = inputs[i].firstChild.getAttribute('id');

        alert(holder);
     }
}

</script>

 

 

Colin

Sep 1, 2011 at 5:59 PM

Yes Colin.

The above code really working like a charm !..

Thanks for your valuable time and support.

Till now I finished my 50 % of work. If I find any problem in remaining work then I ll share here...

Once again thnx alot for your support.

-

Rao.

Sep 5, 2011 at 8:11 PM

Hi Colin,

I'm back with new task. :)

Actually till now we found all the web parts in a page and did some logic.

But Now I'm planning to get particular web parts available in a Specific Zone.

I'm bit confused for traversing the parent one. Can you please guide me on this...

Right now I'm in SP 2010. I added the code snippet...

<td id="WPZone1" colspan="2" valign="top" width="100%"> 
					<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td id="MSOZoneCell_WebPartWPQ3" valign="top" class="s4-wpcell" onkeyup="WpKeyUp(event)" onmouseup="WpClick(event)"><table class="s4-wpTopTable" border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr>
				<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
					<tr class="ms-WPHeader">

Here I need to find all the web parts which are their in ID=WPZone1.
Please help me regarding this.

-
Rao.