Home > SharePoint > Core.js customization

Core.js customization

2010/12/09

SharePoint 2010 uses heavily javascript, and core.js contains the implementation for many tasks, especially the context menus .

These menus have standard items : sometimes there are items that are not needed for our solution, because the customer could be confused or the actions of the items could cause inappropriate changes; or you need some other item for custom actions.

At this point the solutions are:

  • Implement a redefinition of the javascript functions, inserting at the bottom of the page (editing the page in the browser interface) an HTML Form Web Part
  • Create a custom core.js , use it in a custom master page

The second approach is more difficult but it is needed if is necessary to apply the changes in our entire solution.

For the first thing you must not edit the original file , otherwise your changes will be applied to every site collection of the server, and in every case is not an recommended approach.

You could find for example this article in MSDN , but is not complete!

I have created an custom master page named mymaster.master , and this is my core.js customization:

<SharePoint:ScriptLink language=”javascript” name=”CORE.js” Defer=”true” runat=”server”/>

<SharePoint:ScriptLink language=”javascript” name=”corespezia2.js” Defer=”true” runat=”server”/>

Note that by default is used OnDemand=”true” instead of Defer, in order that the customization works is needed:

  • Use Defer verb for both ScriptLink , if you leave OnDemand for core.js (which is the default) the customization does not work
  • Use both the two ScriptLink, if you use only the call to the customized CORE (in my case corespezia2.js) the call to core.js is made anyway , after the customization call so the customizations are lost

In my specific case i have a Document Library , where there are some first level folders and then into every folder pdf and word documents; the folder structure was required to be fixed, that is the final customer must not change the folder names or delete them.

Tipically in a site collection you have one or more Owners user , and the Members; the user in this group normally have the rights for change a folder name or delete it; i cannot use users int the group Visitors because my users needs to upload documents even manually.

So i have created a copy of core.js , and start to make changes, in my case in a first try i was attempting to hide the “Delete” item for the context menus when my item is a folder ; and after a short search i have understood that for Document Libraries the menu is generated by the AddDocLibMenuItems function , then in my copy of core.js (named corespezia2.js) i have commented out the section (in AddDocLibMenuItems function):

/*
if (HasRights(0x0, 0x8) && !systemCheckout)
{
strDisplayText=L_DeleteDocItem_Text;
var isCopy=”false”;
………………
menuOption=CAMOpt(m, strDisplayText, strAction, strImagePath, null, 1190);
menuOption.id=”ID_DeleteDocItem”;
CUIInfo(menuOption, “Delete”, [“Delete”]);
}
*/

But at runtime the Delete item was still in place….at this point i have tried to understand what was happening by using Fiddler, i have noticed that the js files was in the debug version (for example core.debug.js) and the core.js debug version was called AFTER my customcore, so the functions definitions was resetted to the default.

So i have remembered that in site collection web.config i was setting debug=true, the web.config point is:

<compilation batch=”false” debug=”true” optimizeCompilations=”true”>

changing the debug to false (the default) voilà , Delete item disappeared.

This is the fiddler dump of the working customization:


In practice if you need to customize core.js:

  • Start with copying core.debug.js (a lot more easy to understand….) to a new .js , for example corespezia2.js , but remember that if you are working with debug=true in the site collection web.config you must create a debug version, in this case corespezia2.debug.js
    For avoid confusions is better to leave debug=true and create a debug.js version; in every case when your solution seems ok create a compressed version with some javascript compressor and rename it, in our example corespezia2.js : so if you change the debug configuration in the site collection web.config your menu customizations are not lost at runtime.
  • The core.js tipically is in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\CORE.js : remember that 1033 is the location for the English version, if you install a Language Pack you have another folder; for example installing the Italian language pack you will have a 1040 folder (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1040\CORE.js) so verify that your js customizations are in sync in every language folder , especially if your users can change the language used for the interface.

You can conditionally execute the loading of a menu item verifying for the rights , in our case the Delete item verify the rights HasRights(0x0, 0x8) but we can change it using the perms table, an reference is at the address http://msdn.microsoft.com/en-us/library/dd304243%28PROT.13%29.aspx where you can find that 0x8 is the Delete perm on a List.

But if we would to add an menu item ? in the core.js file you can find the methods AddListMenuItems and AddDocLibMenuItems; these methods are called when a context menu (called ECB, Edit Control Block) should be built for a List item or Document.

It is possible to modify the functions directly in the core.js, but it is not recommended.

In the AddListMenuItems function you can read (the AddDocLibMenuItems function contains similar code):

if (typeof(Custom_AddListMenuItems) !=”undefined”)
{
if (Custom_AddListMenuItems(m, ctx))
return;
}

The Javascript function verifies if there is a function named Custom_AddListMenuItems, if exists this function is called. The return value of this function (true or false) determines if the rest of the AddListMenuItems function is executed; then the default menu items are added or not.

By default the Custom_AddListMenuItems/AddDocLibMenuItems are not existing, you can write them in the customized core.js or ,better, implement them in a HTML Form Web Part.

For example you can write in the HTML Form Web Part

<script type=”text/javascript”>

function Custom_AddDocLibMenuItems(m, ctx) {
if (HasRights(1073741824, 0)){
CAMOpt(m, “Test”, “window.alert(‘Test’);”, “/_layouts/images/icont.GIF”);
CAMSep(m);
}
}
</script>


The first line calls the CAMOpt function (present in core.js) to create a new menu item.

The CAMOpt function can have 7 parameters (the first 3 are required):

  • a reference to an ECB, typically passed by the caller of Custom_AddListMenuItems
  • the text to display
  • the Javascript function to execute, in this sample a simple alert
  • the URL of an icon for the menu item
  • the HTML alt attribute value of the icon
  • the HTML description attribute value of the icon

The CAMSep function renders a menu separator; there is no return value so by default the other ECB menu items are showed.

In our example the menù Test appears only for the users that have Manage Web perms; you can test even for a specific list template:

if(ctx.listTemplate != 10002)
{
….

Or a specific List / Document library:

if(ctx.listName != “{D262B042-A2C0-47FA-ABE7-F08AB304C3BE}”)
{
…..
In AddDocLibMenuItems you can even verify the extension of the file:

var strExt = GetAttributeFromItemTable(itemTable, “Ext”, “FileType”);
if(strExt != “txt”) ….

Advertisements
Categories: SharePoint
%d bloggers like this: