Integrate MooTools framework with SharePoint 2010


Published 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 and SP2010 and how to solve them.

Published in: Technology, Education
  • 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

No notes for slide

Integrate MooTools framework with SharePoint 2010

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