CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Preview With the increase of ECMAscript use in SharePoint 2010, lotof SharePoint OOTB UI elements made use of javascript(ECMAScript) and nowcustom solutions are recommended by Microsoft to use javascript wheneverpossible. To better manage javascript files rather than loading all andbloating up the page size and thus affecting page load time, SharePoint SODframework comes handy. <o:p></o:p> Youâ??ll register your custom javascript file with itâ??s key tobe loaded only on demand and when you need it, youâ??ll call some methods in SODframework.<o:p></o:p> This basically involves 3 steps.<o:p></o:p> SODify(modify) your custom script:<o:p></o:p> SODifyâ?¦ !!! I sounded figuratively to mean modify yourcustom script(The script that you wanna load on demand) to make it part of SODframework.<o:p></o:p> This is quite simple. Just add the following line to the endof your custom script.<o:p></o:p> SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs(key);<o:p></o:p> Registering custom script : <o:p></o:p> SP.SOD.registerSod(key,url);<o:p></o:p> key (string) â?? The same key used in the script file.<o:p></o:p> url (string) â?? relative/absolute url to the file itself.<o:p></o:p> This method is the one which is solely responsible to notload it on page load but on demand.<o:p></o:p> Load the script on demand :<o:p></o:p> SP.SOD.executeFunc(key,functionName,fn);<o:p></o:p> Loads the file registered with the â??keyâ?? and ensuresjavascript object named â??functionNameâ?? is loaded(remember functions are firstclass objects in javascript) and executes function â??fnâ??.<o:p></o:p> Thereâ??s a much better way to load a script on demand bycreating a wrapper function that brilliantly makes use of the two functionsabove(Not exactly.Thereâ??s a small change.Youâ??ll see that when we really discussthis). This saves us from some weird script errors that might occur sometimes. <o:p></o:p> Letâ??s do some coding<o:p></o:p> Now we know how to use SOD for on-demand loading of scripts;so letâ??s get started with real coding. <o:p></o:p> Let me tell you the scenario I want to implement. Iâ??ll writea SODified custom javascript file and will upload it to /SiteAssets/BlogSOD.Iâ??ll write a html page where this script is registered to be loaded on demandand the script is loaded finally. Iâ??ll reference the html page in a contenteditor webpart.<o:p></o:p> greet.js<o:p></o:p> function sayHello () {<o:p></o:p> alert&#40;’HelloMr. SharePointeer â?¦. welcome to the beautiful world of SOD ‘&#41;;<o:p></o:p> }<o:p></o:p> SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs(“first.js”);<o:p></o:p> Watchthe above line thatâ??s the one which SODifies your script.<o:p></o:p> Letâ??swrite another Javascript file which is non SODified (You can SODify this too. Iam not doing that to keep the things simple.) Inside this file I do the othertwo following jobs (By this time, you know what they are).<o:p></o:p> loader.js<o:p></o:p> <o:p> </o:p> function loader() {<o:p></o:p> <o:p> </o:p> SP.SOD.registerSod(“first.js”,_spPageContextInfo.siteServerRelativeUrl + “SiteAssets/BlogSOD/first.js”);<o:p></o:p> <o:p></o:p> SP.SOD.executeFunc(“first.js”,”sayHello”, function callback_func() {<o:p></o:p> <o:p></o:p> alert&#40;”Congratsdude. Your SOD trial is working. Long way to go J “&#41;;<o:p></o:p> sayHello();<o:p></o:p> }); <o:p></o:p> }<o:p></o:p> <o:p> </o:p> loader();<o:p></o:p> Nowletâ??s write an html page that references loader.js and give this as contentlink to CEWP.<o:p></o:p> HtmlStuff.html<o:p></o:p> <!DOCTYPE html><o:p></o:p> &lt;html lang=”en”&gt;o:p></o:p> &lt;head&gt;&lt;o:p></o:p> &lt;meta charset=”utf-8” /&gt;&lt;o:p></o:p> &lt;title&gt;&lt;/title><o:p></o:p> [removed][removed]<o:p></o:p> &lt;/head&gt;&lt;o:p></o:p> &lt;body&gt;&lt;o:p></o:p> <o:p> </o:p> &lt;/body&gt;&lt;o:p></o:p> &lt;/html&gt;&lt;o:p></o:p> Donâ??tgo nuts plsâ?¦ I know that the above markup is not the puristic one to be placedin CEWP.<o:p></o:p> Ifyou have followed all these steps, you should be seeing the results of your SODhands-on. If you havenâ??t, please check if you have missed out anything. Trytroubleshooting the things that really helps understand concepts better and youwill love that accomplished feeling at the end.<o:p></o:p> Ifyou guys remember, I promised to tell you a better approach to executeFunc()method. Iâ??ll do that now. I wanna introduce you to another popular method fromSOD framework. <o:p></o:p> SP.SOD.executeOrDelayUntilScriptLoaded(fn,key);<o:p></o:p> fn â??callback function<o:p></o:p> keyâ?? The key used for a SODified custom javascript.<o:p></o:p> Thisworks a little different from executeFunc(), This method doesnâ??t load thescript; It just waits till the script is loaded and executes the callback afterthat. One thing you gotta understand here, if the script is not loaded, thecallback never executes as this method really doesnâ??t load the script whileexecuteFunc loads the script. Thewrapper method that uses the two methods mentioned and works like a charm iswritten below. Credit should be given to Waldek Mastykarz (http://blog.mastykarz.nl/dynamically-loading-javascript-sandbox/) <o:p></o:p> var LoadAndExecuteSodFunction = LoadAndExecuteSodFunction || function (scriptKey, fn) {<o:p></o:p> if (!ExecuteOrDelayUntilScriptLoaded(fn, scriptKey)) {<o:p></o:p> LoadSodByKey(NormalizeSodKey(scriptKey));<o:p></o:p> }<o:p></o:p> };<o:p></o:p> executeFuncinternally calls LoadSodByKey. Pleasefind below loader.js modified with this wrapper.<o:p></o:p> loader.js<o:p></o:p> var LoadAndExecuteSodFunction = LoadAndExecuteSodFunction || function (scriptKey, fn) {<o:p></o:p> if (!ExecuteOrDelayUntilScriptLoaded(fn, scriptKey)) {<o:p></o:p> LoadSodByKey(NormalizeSodKey(scriptKey));<o:p></o:p> }<o:p></o:p> };<o:p></o:p> <o:p> </o:p> function loader() {<o:p></o:p> <o:p> </o:p> SP.SOD.registerSod(“first.js”,_spPageContextInfo.siteServerRelativeUrl + “SiteAssets/BlogSOD/first.js”);<o:p></o:p> <o:p> </o:p> LoadAndExecuteSodFunction(“first.js”, function callback_fun() {<o:p></o:p> alert&#40;”callbackfunction executed”&#41;;<o:p></o:p> sayHello();<o:p></o:p> });<o:p></o:p> <o:p></o:p> }<o:p></o:p> <o:p> </o:p> loader();<o:p></o:p> <o:p> </o:p> <o:p> </o:p> <o:p> </o:p> <o:p> </o:p> xHTML Code Output Forum BBCode Output Switch On/Off WYSIWYG Mode WYSIWYG – Rich Text Editor Decrease Editor Size Increase Editor Size Font NameFont SizeFont ColorHighlightClear FormattingBold (Ctrl-B)Italic (Ctrl-I)Underline (Ctrl-U)Align Text LeftCenterAlign Text RightJustify Delete AllCut (Ctrl-X)Copy (Ctrl-C)Paste (Ctrl-V)Undo (Ctrl-Z)Redo (Ctrl-Y)Insert Hyperlink (Ctrl-K)Insert Email LinkRemove HyperlinkStrikethroughSubscriptSuperscriptHorizontal LineBulletsNumberingDecrease IndentIncrease Indent Insert ImageInsert ClipartInsert WordArtInsert your emotionsUpload your own PhotoInsert FlashInsert YouTube VideoInsert Google VideoInsert Yahoo VideoWrap
Wrap Wrap [PHP][/PHP]Wrap [HTML][/HTML]Insert TableView Calendar / World ClockInsert SymbolOpen Virtual Keyboard HTML Preformatted TextWrap Code GLOWWrap Code SHADOWWrap Code MOVEInsert FTP LinkTeletype HotEditor Powered by www.eCardMAX.com DEMO Insert HTML (or Text) to HotEditor – Click icons below
