Home > Development, SharePoint Server 2010 > Integrate MooTools FrameWork With SharePoint 2010

Integrate MooTools FrameWork With SharePoint 2010

Here i’m talking about integrating MooTools FraweWork with Sharepoint 2010 , firstly let me describe and define what is Mootools FraweWork ??

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

The Stats

MooTools Core
Library Size 64.3K
License MIT
DOM Utilites yes
Animation yes
Event Handling yes
CSS3 Selectors yes (a subset)
Ajax yes
Native Extensions (excluding Element) about six dozen for Array, Object, String, Function, and Number
Inheritance Provided with Class constructor
Other Considerations
plug-ins Roughly 4 dozen official plug-ins available at mootools.net/more. Unofficial plugin directory at mootools.net/plugins.
Official UI library no

so we can do nice tasks with MooTools FrameWork, here going to display Create SharePoint 2010 web part using MooToolsEditable, The SharePoint 2010 web part should allow a user to add the web part to a page where a small html editor will appear.

The editor should be like the one on this page:


but integrating SharePoint with Mootools framework will raise many issues, especially with Out of the Box Javascriopt files , Script Manager on MasterPage, and Microsoft Ajax .

one of the exception which you may face is ” sys.res.enumreservedname’ is null or not an object” , this is error occuered becuase of a conflict between ScriptManager in Sharepoint Master Page and MooTools Javascript files.

Through my research i found 2 steps i should to do in MooTools.Js to override all of the issues, as as the following

1- Everything is based on Type Class, Replace “Type” in JS File with “mooType”. don’t forget to rename the “this.Type” to “this.mooType” too, then do a search for “new Type(” and replace with “new mooType(“, then do a search for “Type.” and replace with “mooType.” .

2- Function.implement “hide: function(){” renamed to “hide2: function(){” and global replace “hide()” to “hide2()”

Attached here, updated Version 1.3 of MooTools.js File after above steps.

Next Article, will be an example with MooTools FrameWork

mootools-core.js (After Downloading The file, change the extension from JPG to JS)




  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: