Integrate MooTools framework with SharePoint 2010

Uploaded on

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 …

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.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. INTEGRATE MOOTOOLS FRAMEWORK WITH SHAREPOINT 2010 Ahmed Madany Senior SharePoint Consultant
  • 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.
  • 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 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   2706/tickets/1045-asp-net-bug  
  • 16. CONTACTS  If you have any questions plz Contact Me on