Slideshow with hover effect - Demo

.

Wednesday, September 22, 2010

Add JQuery to Browser enabled Infopath forms in SharePoint - Ritesh Udupa K

Hi Guys,

This is my first time blogging and i am excited.
 I have seen so many guys out there trying to bring in JQuery to browser enabled infopath forms in Sharepoint. Is this even possible?
The answer is YES.

Steps:

 1). There is a core.js file loaded when you open your browser enabled infopath form. This is our key to success. Location of the file for me is http://sitename/_layouts/inc/core.js and may differ for you guys.

 2). Get the head tag of the page.
      
   var head = document.getElementsByTagName('head')[0];

 3). Including jquery in head tag.
      
      var script1 = document.createElement('script');
   script1.type = 'text/javascript';

   script1.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'; 
   head.appendChild(script1);

4). Include one more .js file in head where you can write your jquery code.
     
       var script2 = document.createElement('script');
   script2.type = 'text/javascript';
   script2.src = '/_layouts/inc/customjs.js';
   head.appendChild(script2);


5). Include .css file for styling in the head section.
      var style1 = document.createElement('link');
   style1.rel = 'stylesheet';
   style1.type = 'text/css';
   style1.href = '/_layouts/inc/CustomCss.css'; 

   head.appendChild(style1);

6). Verify whether your jquery document ready works by writing the following in customjs.js file
       
        $(function(){
          alert('It Works');
    });


 7). IMPORTANT - Your infopath form is loaded to browser after the document ready function is called hence your controls in infopath are still undefined.
    Solution:     
      window.onload = function() {
         window.setTimeout(readyCall, 1000);
   }

      function readyCall(){
        alert('It works');
   }


 readyCall is a function which is called after a delay of 1 second  and within that time your infopath form should be loaded else increase the delay. Now there is no need to write JQuery's document ready. Write all your code in the function you call after window.setTimeout.

8). WARNING!! - The core.js file is loaded for all your infopath forms in your site hence including customjs.js file might create serious problems. So, before including the customjs.js file, verify your url first and include the file.
            Use this in core.js file to check your URL
       if(window.location = "/*URL of infopath form*/")
       {
          //include jquery, javascript and css file.
       }

Now you can use jquery to make ajax calls to get data into your forms or add fading effects, animations etc. The use is endless. Remember, Use this only if you cannot get something to work in infopath the normal way.

Please do let me know if there is a better way to do this.
Happy to receive your suggestions and comments. Happy Coding :-)

10 comments:

  1. hey nice to see ur blog.. appreciate ur work.. good job. keep posting.. :)

    ReplyDelete
  2. Where in core.js file you add these?

    ReplyDelete
  3. The first few lines of my Core.js file looks like this.
    ________________________________________________
    function UserAgentInfo() {}
    //Custom code begins here
    var head= document.getElementsByTagName('head')[0];
    var body= document.getElementsByTagName('body')[0];
    var script1= document.createElement('script');
    script1.type= "text/javascript";
    script1.src= "/_layouts/inc/jquery.min.js";
    head.appendChild(script1);
    var script2= document.createElement('script');
    script2.type= "text/javascript";
    script2.src= "/_layouts/inc/customjs.js";
    head.appendChild(script2);
    //Custom code ends here
    UserAgentInfo.strBrowser = 0;
    function CrossBrowserLibrary() {}
    CrossBrowserLibrary.GetScrollY = function()
    {var intScrollY = 0;
    _______________________________________________

    Thats all the modifications I made to that file.

    Here is the link to my modified Core.js file for SharePoint 2007
    http://dl.dropbox.com/u/15169961/Core.js

    ReplyDelete
  4. There is indeed a better way to do this that does not involve customising SP system files.

    Create a jQuery feature and activate it for the site collection. Inlcude a custom.js ref in your masterpage and put the URL check and other required jQuery in there.

    ReplyDelete
  5. There is a better way without touching any core SharePoint files. I'm using this approach http://stackoverflow.com/a/18199201/132599.

    ReplyDelete
  6. Thanx:) works for me

    ReplyDelete
  7. Hi Ritesh, can you tell the step by step process to add the custom.js .I am new to sharepoint

    ReplyDelete
  8. Your style is very unique compared to other people I have read stuff from. I appreciate you for posting when you have the opportunity.
    website design

    ReplyDelete
  9. Grateful to check out your website, I seem to be ahead to more excellent sites and I wish that you wrote more informative post for us. Well done work.

    ReplyDelete