Hello kind readers…
At times comes situation when you are building a large scale application (often it comes right :P) and there are a lot of pages based on layouts and requirements and what not and on top of that there could be a LARGE number of end users involved in adding web parts on the pages with some specific layouts… now of course you would want to make sure that no body misses out the consistency and that web parts are added at the right zone and all plus only the indented web part are added on the layout…
Now how do you confirm that and make sure it all remains consistent and friendly for the user…
Now SharePoint has some fantastic JavaScripting inside the box and have loads of options which can be leveraged to our benefit… Now lets see how it works…
When you click on that "edit web part page" button the page goes in edit mode with webpart zones showing up, nothing fancy, then you click the "Add a webpart" link on the zones.. This is when the WPADDER.JS is loaded on the page…. But how does that help you.. Hmmm glad you asked…lets dive in some code to see how things would work for you… on your custom JS file or master page or whatever your choose we need to add this code…
//to make sure your code is only called after the respective file is loaded
ExecuteOrDelayUntilScriptLoaded(someFunc,"wpadder.js");
Then define the someFunc (could be any name for the function)
Function someFunc()
{
//get the add button from the web part adding panel
Var btnAdd = $("div.ms-wpadder-buttonArea button:first-child");
//remove the inline click event handler
btnAdd.removeAttr('onclick');
//juice it up with your own event handler using the sweetest weapon of all JQUERY!!
btnAdd.click(function() {
//get the webpart of object, this comes from the wpadder.js, where the WPAdder object instance is found giving all //properties on the selected webpart item
var selectedWp = WPAdder._getSelectedItem();
//using the same object instance you can get the selected zone id, the zone you have selected for adding the webpart
Var zoneId = WPAdder._getZoneSelect().value
//you can check the title of the selected webpart for whatever name you want
//u can also use id of the web part
if(selectedWp.title == 'Content Query')
{
//if the webpart is the one you don't want user to add in specific location, check the zone next
If(zoneId == 2)
{
//if the zone is not where the web part should be, give the message and return
alert('not allowed here');
return false;
}
}
else
{
//else if all is correct just let the webpart be added to the page gracefully!!
WPAdder.addSelectedItemToPage();
return false;
}
});
}
This is all you need to have the checks in place. Now this functionality can be used in many ways, you can also stop users for adding the web part to the page at all if its not some specific page or site, to have some validations. Conditions can be any depending on your requirement.
This is just an example of how you can use the inbuilt libraries of SharePoint with combinations of your preferred JS libraries to give a very flexible user experience. There are many more things you can do with the web parts on client side but m not going to talk about all right now but I hope this give you a direction… and if you already know about this then its already cool :) … thanks anyways for hitting this road…and hope this helps someone!
- "T"