Originally posted on: http://geekswithblogs.net/djacobus/archive/2013/11/17/154639.aspx
I was looking at codeplex and saw some tabbed web parts and a zone tab web part. One was really good except it had display issues and the documentation was weak! The issue of course is that a zone tabs JQuery UI solution needs a SharePoint page layout to set up the web parts zones on the layout! In thinking about the solution I thought about the JQuery and JQuery UI JavaScript Where should be load the scripts? Master Page, Page Layout, Web Part, or clever Delegate Control. Nowadays we can be pretty sure that JQuery will already be loaded on the master page so I went with that solution. The page layout will have the JQuery UI CSS and JQuery UI and our specific implementation JavaScript! In Addition, I am using all the scripts loaded into the SharePoint site collection root vice a layouts folder!
In Summarry, here is what we will do:
1. Create an empty SharePoint project in Visual Studio.
2. Add Folders and Modules for housekeeping.
3. Get the JQuery UI artifacts, JavaScript, images and CSS. Add these artifacts to the solution.
4. Create the Page Layout.
5. Build the test page in code!
6. add the code to codeplex
Above is the Zone Tabs Solution where I am using the web part title for the tabs text (JQUery Goodness). Okay, lets get to a complete solution with all the artifacts in the correct places and a working page with some built-in web parts to show how it works.
Create an empty SharePoint project in Visual Studio. I am using VS2013, however, the same steps can be used in VS2010-VS2013.
Where I am naming the project Demo.ZoneTabs, Create it as a sandboxed solution. The next steps are housekeeping adding folders, etc.. Create a Folder : Modules
Right click on the modules folder and we will be adding modules: CSS, Script, MasterPage, Images
Now that we have the three modules added we need to get the artifacts which will make this solution work. Go to JQuery UI and download a themed Library for this demo I just used the default lightness theme. You can roll your own to match your sites theme.
this will download the JQuery UI widgets we need for this application in a zip file. we will unzip this file on the desktop, so we can drag and drop it into our solution: Open the downloaded zip file and your project from the documents folder:
Open up the CSS folder from the zip file mine has the entire folder ui-lightness and drag it to the css folder it is important to just leave everything in the folder as is. Open the JS folder and drag the files to the Scripts Folder. In visual Studio click the show all files button on the tools above the solution explorer. This will show the JavaScript and CSS Folder we just added. Hold the control key and then right click and include in project!
Now that we have the JQuery artifacts in our project we need to look at the elements file for these two modules. Lets look at the CSS Module elements file:
Delete the sample.txt file in each of the modules, we won’t need them.
what is of interest here is the Path and Url properties. Path is the physical path in our solution and Url is the relative path from the site collection root in our site. I will leave the CSS folder alone; However, if you thin it is possible that end users may need to edit these files then by all means change CSS to something like “Style Library/Demo/…” The same idea goes for the JS files in the Scripts Module, I will put them in a Scripts folder at the site collection root.
Okay, enough housekeeping lets build our page layout. Lets look what is required for tabs from the JQuery UI site:
Okay we have the header with the JQuery UI being loaded. a wrapper div called tabs a ul which are the tab names and links to the to nested divs within the tabs div. We can add this same structure to a page layout I am using 4 web part zones within the top of the page layout. These 4 web part zones will drive the addition of web parts into our tabs solution. I left the other zones there from a previous project. In addition, look at the CSS Registration and Script Links, These allow me to add the CSS and scripts relative to the site collection root. I am not adding JQuery itself here as I think it belongs on the master page.
Okay, we have a page layout and we need to add it to our Master Page Module. Click on the Master Page Module and add a new item, choose HTML page but rename it to TabsPageLayout.aspx before you save it. Copy and paste the code from the link inside it (TabsPageLayout html) Okay, we need to change the elements for the Master Page module to get the PageLayout into the correct place.
here we are telling SharePoint to put the page layout into the master page gallery and a preview image into the preview images folder. We now need another module to place our images into our site. Add another module to the modules folder and call it images. Download this image and add it to the images module, change the elements file to put the image where it belongs in our SharePoint Site:
change it to this:
Here we are putting the image into the catalogs master page preview folder.
Okay, we are now at the point where we need to add our custom JavaScript which you can infer from our page layout is called WebPartTabs.js here is the code which will make our tabs. which is really quite simple! Thanks, to JQuery! Add a new item to the scripts module call it WebPartTabs.js and copy and paste the follwing code into it:
What I am doing here is getting the text of the web parts title so we can name the tabs appropriatley instead of One—Four which is on the Page Layout! Then if we are not in design mode we activate the tabs! If we did nothing else at this point you could deploy the solution, build your tabs page and add web parts to it by hand as long as JQuery is on the master page. However, SharePoint publishing would come into play and we would see that the page layout is in draft mode and the user would have to check it in and approve it! If you had read my previous blog about building pages in code, I didn’t mention it but the code I provided checked these items in! I got this tidbit from another blog a few years ago and have forgot the authors name but whomever you are thank you! so lets add this functionality now so our page etc. are provisioned checked in! We need to add a feature receiver. Our feature which was created when we added our first module by Visual Studio just need to be renamed to JQUeryTabs and then right click and add feature receiver!
Change the feature scope to site and rename the Feature title and Description .
add the following code at the bottom of the class:
Basically, we are going to read an XML file at the root of the site collection which lists all the files in the solution which need check-in. how does this file get created? By adding a module to those elements which need checked in. In our case it is the Master Page Module. Which now look like this:
If we had anything going into the style library we would also add the check-in module here. Now lets call our checkin code from our feature receiver:
This is the complete event receiver with an added extensions class in a folder called Code
<![CDATA[csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*whit