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 :-)

11 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. 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
  9. +tripwire

    +AnonymousAugust 13, 2013 at 4:45 PM
    There is a better way without touching any core SharePoint files. I'm using this approach http://stackoverflow.com/a/18199201/132599



    i agree modifying SharePoint's core files is poor solution.

    but neither of your solutions will work because Info-Path Form is rendered without a master page or as an iFrame. JavaScript cannot modify elements that are not on the same page as the Script Tag

    ReplyDelete


  10. My name is Leah Brown, I'm a happy woman today? I told myself that any loan lender that could change my life and that of my family after having been scammed separately by these online loan lenders, I will refer to anyone who is looking for loan for them. It gave me and my family happiness, although at first I had a hard time trusting him because of my experiences with past loan lenders, I needed a loan of $300,000.00 to start my life everywhere as single mother with 2 children, I met this honest and God fearing online loan lender Gain Credit Loan who helped me with a $300,000.00 loan, working with a loan company Good reputation. If you are in need of a loan and you are 100% sure of paying the loan please contact (gaincreditloan1@gmail.com)

    ReplyDelete