JQuery UI in Visual Webpart for Office 365

As we know developing a visual webpart for Office 365 is quite irritating due to many restrictions. Last month while I was working on Office 365, I created a visual webpart with the default asp.net controls. But during the demo of that webpart, my Boss didnot liked the design of the webpart and he told me to use fancy controls for the Office 365 webpart. Long story short, I had to find a way to use JQuery UI with Office 365 as Ajax was not allowed by office 365.
The following are the series of steps that you can follow for using JQuery UI with Office 365;

Step a) Setting up the Project 1. Create a Empty Share point project(Sand boxed).
2. Add a new Visual web part(Sand boxed).
3. Right click your project. Goto Add->New Item and select 'Module' and name it 'JQueryDeploy'.
4. Now module consist of 'Elements.xml' and a txt file. You can delete the txt file.
5. Download the JQuery UI package with theme of your choice from http://jqueryui.com/. In my case i was working with 'jquery-1.8.2.js'.
6. Extract JQuery files from JQuery package and add those files in the module 'JQueryDeploy'.
Step b) Change Elements.xml for SiteAssests Library
7. You will notice that Elements.xml will be updated and will contain the paths of all the files.
8. Open Elements.xml and change module name as 'JQueryDeploy'. 
9. Add Url Property to 'SiteAssets' in module tag.
10. In File tag add Type=”GhostableInLibrary”. 
(The purpose of these settings is to upload the JQuery UI files into the SiteAssets library when the webpart is uploaded.)

In my case I want two fancy calendor controls and buttons. I added two text boxes for calendor controls and two asp.net buttons.
Step c) Render Controls using Javascript
Now as we have the asp.net controls, we have to load the load the JQuery UI style sheets and javascript files which will be present in the SiteAssests library once the webpart will be uploaded.
To accomplish this, we will write code by overriding the 'RenderContents' method in .net.

       
protected override void RenderContents(HtmlTextWriter writer)
        {
            StringBuilder js = new StringBuilder();

            js.AppendLine("var added = false");     
            js.AppendLine("if(!added)");
            js.AppendLine("{");
            js.AppendLine("  var head = document.getElementsByTagName(\"head\")[0];");
            js.AppendLine("  if(document.createStyleSheet)");
            js.AppendLine("  {");
            js.AppendLine("    document.createStyleSheet('" + SPContext.Current.Site.Url + "/SiteAssets/jquery-ui-1.9.0.custom.css" + "');");
            js.AppendLine("  } else {");
            js.AppendLine("    var css = document.createElement('link');");
            js.AppendLine("    css.type = 'text/css';");
            js.AppendLine("    css.rel = 'stylesheet';");
            js.AppendLine("    css.href = '" + SPContext.Current.Site.Url + "/SiteAssets/jquery-ui-1.9.0.custom.min.css" + "';");
            js.AppendLine("    head.appendChild(css);");
            js.AppendLine("  }");
            js.AppendLine("}");
            js.AppendLine("$(document).ready(function(){");
            js.AppendLine(" $('#" + FromDate.ClientID + "').datepicker({");
            js.AppendLine(" onSelect: function (dateText, inst) {");
            js.AppendLine(" var dateAsString = dateText;");
            js.AppendLine(" var dateAsObject = $(this).datepicker('getDate');");
            js.AppendLine(" }");
            js.AppendLine("  });");
            js.AppendLine(" $('#" + BisDate.ClientID + "').datepicker({");
            js.AppendLine(" onSelect: function (dateText, inst) {");
            js.AppendLine(" var dateAsString = dateText;");
            js.AppendLine(" var dateAsObject = $(this).datepicker('getDate');");
            js.AppendLine(" }");
            js.AppendLine("  });");
            js.AppendLine("$(\"input[type=button]\").button();");
            js.AppendLine("$(\"input[type=submit]\").button();");
            js.AppendLine("});");
            base.RenderContents(writer);
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
            writer.AddAttribute(HtmlTextWriterAttribute.Src, SPContext.Current.Site.Url + "/SiteAssets/jquery-1.8.2.js");
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.RenderEndTag();
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
            writer.AddAttribute(HtmlTextWriterAttribute.Src, SPContext.Current.Site.Url + "/SiteAssets/jquery-ui-1.9.0.custom.js");
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.RenderEndTag();
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
            writer.AddAttribute(HtmlTextWriterAttribute.Src, SPContext.Current.Site.Url + "/SiteAssets/jquery-ui-1.9.0.custom.min.js");
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.RenderEndTag();
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.WriteLine(js.ToString());
            writer.RenderEndTag();  }  
 

Now we have completed all the ingrediants and you will come up with following result once you run or deploy your webpart in Office 365;