These Slides display the definition of MooTools Framework, and How to integrate it with Custom SharePoint 2010 Solutions , also we define most of the issues which appears while integrating Framework and SP2010 and how to solve them.

1. INTEGRATE MOOTOOLS FRAMEWORK
WITH SHAREPOINT 2010
Ahmed Madany
Senior SharePoint Consultant
http://eg.linkedin.com/pub/ahmed-madany/35/80/2b6
http://ahmedmadany.wordpress.com/

2. AGENDA
 What is MooTools framework ?
 The characteristics of MooTools framework?
 What is MooEditable plugin ?
 Integrate SharePoint with MooTools
framework.
 The Issues of the integration between
MooTools and SharePoint and How to solve
them?
 Example

3. WHAT IS MOOTOOLS FRAMEWORK ?
 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.
 MooTools is released under the Open Source
MIT license, which gives you the possibility to
use it and modify it in every circumstance.

4. THE CHARACTERISTICS OF MOOTOOLS
FRAMEWORK?

5. WHAT IS MOOEDITABLE PLUGIN ?
 is a MooTools plugin that instantly converts
a textarea field into a WYSIWYG editor.
 It has a slick interface & comes with only
the frequently used items like text
formatting, lists, inserting images/links &
undo/redo

6. WHAT IS MOOEDITABLE PLUGIN ?
 The plugin can also switch between design
& HTML modes.
 To use Mooeditable tool, use this simple one
$('textarea-1').mooEditable();
//Note that textarea-1 is the id of a textarea
element

7. WHAT IS MOOEDITABLE PLUGIN ?
 Features
 Clean interface
 Customizable buttons
 Tango icons
 Lightweight
 Fully degradable when Javascript disabled
 Works in Internet Explorer 6/7/8, Firefox 2/3,
Opera 9/10 and Safari 3/4

8. INTEGRATE SHAREPOINT WITH MOOTOOLS
FRAMEWORK
 To intgrate Mootools With Custom
SharePoint Solution , you should do next
steps:
 Download Mootools Core File.
 In SharePoint Solution, Add Mootools-
core.JS under Layout Folder, as indicated
Below

9.  Add reference to Mootools-core.JS
 To use Plugins of Mootools Framework , we
will add other Javascript and Css refernces ,
as we will see in next slides.
INTEGRATE SHAREPOINT WITH MOOTOOLS
FRAMEWORK

10. THE ISSUES OF THE INTEGRATION BETWEEN
MOOTOOLS AND SHAREPOINT
 Mootools and jQuery are not compatable out-
of-the-box with eachother
 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

11. HOW TO SOLVE THE ISSUES
 Through my research i found 2 steps i have to do to fix these
issues I should update MooTools-Core.Js to override all of the
issues, as the following
1- Everything is based on Type Class, Replace “Type” in Mootools-
Core.S 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()”
Already, I customized this file you can download it from here
http://ahmedmadany.wordpress.com/2013/07/21/integrate-mootools-
framework-with-sharepoint-2010/

12. EXAMPLE
 Example: Integrate SharePoint WebPart With
MooEditable Plugins.
1- Create Empty SharePoint Project.
2- Add either Visual WebPart or Application page,
whatever your bussiness.
1- Do Steps in Slide 8 & 9 (Don’t forget to use
customized file I refered to in Slide 11).
2- MooEditable plugin writen in Mootools Js, download
plugin CSS and JS files from here.
3- In SharePoint Solution, Add Mootools-core.JS under
Layout Folder, as indicated Below

13. EXAMPLE

14. EXAMPLE
 Add reference Mootools-core.js, MooEditable.js and MooEditable.css as below
 To use MooEditable Text Area in WebPart or Application page , do the following
 Full Blog Post Here

15. REFERENCES
 http://jqueryvsmootools.com/
 https://mootools.lighthouseapp.com/projects/
2706/tickets/1045-asp-net-bug
 http://cheeaun.github.io/mooeditable/
 http://mootools.net/download

16. CONTACTS
 If you have any questions plz Contact Me on
Prog_madany@hotmail.com