Creating Tabbed Web parts in Sharepoint 2010

1. Add any two web parts which needs to be shown in a tabbed manner on a SharePoint page.

2. Add a Content Editor Web Part below the web parts which you want show it in tabs. (Adding content editor web part below the web parts is important as the web parts above content editor web part will only appear in tabbed manner)

3.  Edit newly added Content Editor web part and click on "Click here to add new content".

4. Under Editing Tools tab and Format text sub tab, click on HTML and select "Edit HTML source". This will open a new HTML source window.


5. Add the below code to the window and click OK. 

<style type="text/css">

.et-tab {

PADDING-BOTTOM: 3px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: inline-block; BACKGROUND: url(/_layouts/images/selbg.png) repeat-x; FONT-SIZE: 8pt; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-TOP: 3px

}

.et-activetab {

BORDER-BOTTOM: #0073ae 1px solid; BORDER-LEFT: #0073ae 1px solid; BACKGROUND-COLOR: white; COLOR: #005288; BORDER-TOP: #0073ae 1px solid; BORDER-RIGHT: #0073ae 1px solid

}

.et-inactivetab {

BORDER-BOTTOM: #005288 1px solid; BORDER-LEFT: #005288 1px solid; BACKGROUND-COLOR: #005288; COLOR: #edf4f1; BORDER-TOP: #005288 1px solid; BORDER-RIGHT: #005288 1px solid

}

.et-separator {

BACKGROUND-COLOR: #005288; HEIGHT: 5px

}

.et-tabrow {

WHITE-SPACE: nowrap

}

.et-offscreen {

POSITION: absolute; MAX-WIDTH: 1px; MAX-HEIGHT: 1px; TOP: -9999px

}</style><script type="text/javascript">

/* Easy v 5.0 * Copyright (c) 2009-2010 Christophe Humbert * http://www.pathtosharepoint.com */

(function(){

var AP="",sec=0,Header="none",Split="No",Expand="",Print="";

if (document.forms[0].elements["_wikiPageMode.value"]=="true"||document.forms[0].elements["MSOLayout_InDesignMode"].value=="1"){return;}

var el=document.getElementsByTagName("SCRIPT"),p=el[el.length-1],sT,a,sep,tabRow;

do {p=p.parentNode;sT=p.innerHTML.split("MSOZoneCell_WebPart");}while (sT.length<4 && p.parentNode.id!="MSO_ContentTable")

if (p.getAttribute("contenteditable")=="true"){return;}

if (p.nodeName=="DIV"){sep=document.createElement("div");p.insertBefore(sep,p.firstChild);tabRow=document.createElement("div");p.insertBefore(tabRow,p.firstChild);}

else{sep=document.createElement("td");var sepTR=document.createElement("tr");sepTR.appendChild(sep);tabRow=document.createElement("td");var tabTR=document.createElement("tr");tabTR.appendChild(tabRow);if (p.nodeName=="TBODY"){p.insertBefore(sepTR,p.firstChild);p.insertBefore(tabTR,p.firstChild);}else if (p.nodeName=="TR"){p.parentNode.insertBefore(tabTR,p);p.parentNode.insertBefore(sepTR,p);}else {return;}}

sep.className="et-separator";tabRow.className="et-tabrow";var children=p.childNodes;p=p.parentNode;var etRoot=[],etHeader=[],etTab=[],tabsID=[];

for (var j=0;j<children.length;j++){try{var d=children[j].getElementsByTagName("td");for (i=0;i<d.length;i++) {if(d[i].id.indexOf("WebPartTitle")==0){var WPid=d[i].id.replace(/WebPartTitle/,"");if (d[i].innerHTML.indexOf("(Hidden)")==-1) {var up=d[i];while (up!=children[j]){if (up.parentNode.innerHTML.indexOf('id=WebPart'+WPid+' ')>=0||up.parentNode.innerHTML.indexOf('id="WebPart'+WPid+'" ')>=0){WPid="et"+WPid;etHeader[WPid]=up;etRoot[WPid]=children[j];etTab[WPid]=d[i].getElementsByTagName("span")[0].cloneNode(true);etTab[WPid].id=WPid;etTab[WPid].className="et-tab et-inactivetab";etTab[WPid].onclick=function(){activateTab(this);};tabRow.appendChild(etTab[WPid]);tabsID.push(WPid);break;}up=up.parentNode;}}}}}catch(e){}}

var Tabs=tabRow.getElementsByTagName("span"),TabCount=Tabs.length;

if (Split=="Yes") {var sd=document.createElement("div"),index=Math.floor(TabCount*0.5);tabRow.insertBefore(sd,Tabs[index]);}

if(AP.length && sec>0) {sec=sec*1000;interval="";a=document.createElement("span");a.innerHTML="|>";a.className="et-tab et-inactivetab";a.onclick=function(){if(interval==""){this.innerHTML="||";interval=window.setInterval(function(){Autoplay();},sec)}else{this.innerHTML="|>";window.clearInterval(interval);interval=""}};tabRow.appendChild(a);var Autoplay=function(){for(i=0;i<TabCount;i++)if(Tabs[i].className=="et-tab et-activetab"){var j=(i+1)%TabCount;activateTab(Tabs[j]);break}};if (AP=="Play"){a.innerHTML="||";interval=window.setInterval(function(){Autoplay();},sec)};}

if (Expand.length) {a=document.createElement("span");a.innerHTML=Expand;a.className="et-tab et-inactivetab";a.onclick=function(){for(i=0;i<tabsID.length;i++){etTab[tabsID[i]].className="et-tab et-inactivetab";etRoot[tabsID[i]].className=etRoot[tabsID[i]].className.replace(/et-offscreen/g,"");etRoot[tabsID[i]].style.pageBreakAfter="always";etHeader[tabsID[i]].style.display="";}};tabRow.appendChild(a);}

if (Print.length) {a=document.createElement("span");a.innerHTML=Print;a.className="et-tab et-inactivetab";a.onclick=function(){this.style.display="none";var f=document.getElementById("s4-workspace")||document.getElementsByTagName("body")[0],ed=p.parentNode.insertBefore(document.createElement(p.nodeName),p);f.appendChild(p);for (j=0;j<f.childNodes.length-1;j++) {try{f.childNodes[j].className+=" et-offscreen";}catch(e){}}a=document.createElement("span");a.innerHTML="Back to Page";a.className="et-tab et-inactivetab";a.onclick=function(){this.previousSibling.style.display="inline-block";this.parentNode.removeChild(this);ed.parentNode.insertBefore(p,ed);ed.parentNode.removeChild(ed);for (j=0;j<f.childNodes.length;j++) {try{f.childNodes[j].className=f.childNodes[j].className.replace(/\s*et-offscreen/g,"");}catch(e){}}};tabRow.appendChild(a);};tabRow.appendChild(a);}

function activateTab(t){document.cookie=tabsID.join("_")+"="+t.id+";path=/";for(i=0;i<tabsID.length;i++){etHeader[tabsID[i]].style.display=Header;if(t.id==tabsID[i]){etTab[tabsID[i]].className="et-tab et-activetab";etRoot[tabsID[i]].className=etRoot[tabsID[i]].className.replace(/\s*et-offscreen/g,"");}else{etTab[tabsID[i]].className="et-tab et-inactivetab";etRoot[tabsID[i]].className+=" et-offscreen";}}}var m=GetCookie(tabsID.join("_"))?GetCookie(tabsID.join("_")):tabsID[0];activateTab(etTab[m]);})();</script>​

6. Now the last step is either hide the Content Editor web part(Edit web part--> Layout-->check hidden check box) or set Chrome type to none(Edit web part-->Appearance-->select chrome type to none).

7. Save and Close the page and the web part will have border now as shown below.

Adding Borders to the Web part in a SharePoint Page

Adding Borders to a Web Part in a SharePoint Page :

1. Add a web part to a page.(I have added one of my List as web part{List View Web part}) as shown below.

2. Edit the web part and go to Appearance section.

3. Change the Chrome Type to Title and Border as shown below.(Note : This step is very important!!)

4. Now add a Content Editor web part to the same page where List view web part is residing.

5. Edit newly added Content Editor web part and click on "Click here to add new content" as shown.

6. Under Editing Tools tab and Format text sub tab, click on HTML and select "Edit HTML source". This will open a new HTML source window.

7. Copy and paste the below HTML code and click OK.

     <style>

        .ms-WPBorder 

       {

BORDER-BOTTOM: #005288 2px solid; BORDER-LEFT: #005288 2px solid; BORDER-TOP:             #005288 2px solid; BORDER-RIGHT: #005288 2px solid

       }

    </style>

Note : You can change border width as per your needs.

8. Now the last step is either hide the Content Editor web part(Edit web part--> Layout--> check hidden check box) or set Chrome type to none(Edit web part-->Appearance-->select chrome type to none).

9. Save and Close the page and the web part will have border now as shown below.

Creating Chart webparts and customizing palette colors

Customizing Look and Feel of Chart Web Part:

1. Add a Chart webpart by clicking on “Add a web part” in web part zone and selecting Business Data -->Chart Web Part under Categories and Web Parts respectively as shown below.
2.        Once the Chart web part is loaded, click on Data & Appearance under Chart Web part.
     Then click Customize your Chart to customize look and feel of the chart web part.
   
   
   3.       Click Next in Step1 (Since this example deals with chart webparts, you can go to Next step. In case  you need to change the Chart type, select as per requirement from available ones.)
   
   
   4.     In Step2, under Appearance Themes tab, Select both Theme and transparency to Custom, select Chart Height and Width as per requirement and Click Next.
   
   
   
   5.   In step3, under Title and Legend tab you can select Show chart Title and Show Legend as per your requirement.
   
   
   6. Under Axes and Grid Lines tab, you can set X axis and Y axis Title, Font, Text Color etc as per      requirement.
   
   
   
   7. Under Data Labels and Markers tab, you can check the Show Labels and Show markers if          you need to show the data on each bar of the charts.
   8. Under Hyperlinks and Tooltips tab, you can specify Hyperlink and tooltip for entire chart,                Legend and label. Then click Finish.
   
   
   
   Connecting Data to Chart Web part:
   
   
   1. Click Data & Appearance à Connect Chart to Data wizard.
   2. Click Step1 and select Connect to a List option and Click Next.
   3. In Step2, Select appropriate Site and List you want to showcase in Chart webpart and Click Next.
   4. In Step3, you can filter data if necessary. (Ex: I am filtering so that I can show only open Issues from the list).Once filter are applied click on Preview Data and data will be shown below. Chart shown in the webpart will be based on this data now. Click Next.
   
   
   
   
   
   
   5. In Step4, Select Y axis, X axis and Group by Field and rest of the fields as per your requirement and Click Finish. Note : Y axis can only be numbers and date.
   
   
   
   
    Customizing palette colors without using SP Designer or VS 2010 coding:
   
   
   1. This is how my current chart looks.
   
   
   
   2.  Now in order to customize the color palettes of the chart, we need to export the webpart. To             achieve that, edit the web part.
   
   
   
   3.  Go to Advanced options at the bottom and select Export all data option and click OK.
   
   
   
   4. Click on downward arrow on the extreme right of web part and Click on Export…
   
   
   
   5. Save dialog will be opened and save the web part in your local machine.
   
   6. Open the web part in notepad or Word Pad and search for “PaletteCustomColors”.
   
   
   
   7. There will be 10 different colors by default. We can customize as per our needs. As you can see          that for each color, there are 4 parameters (numbers). First one Transparency and then RGB.
   
   8.  I have modified the first three colors to red, yellow and green.
   
   
   
   9.   Now go to your page, go to Edit pageà add a web part.
   
   10 . Upload the customized web part which is present in your local machine.
   
   11. Now add the uploaded web part. It will be usually present under Imported Web parts.
   
   
   
   
   
   
   12. Finally my Web part looks as below :