IE7 & IE8 calibri font blurry Sharepoint jQuery

Using jQuery in Sharepoint became a second nature to me. I was using a div with fadeIn(), nothing special and everything went well on our development environment and integration environment. Until we went to UAT and received lots of complains from users saying that the fonts look pixelated and blurry. I went down on site and saw that the fonts was indeed very blurry (especially true on their screens).

Bad news for me as I had a 7 level depth of div and span tags, not to mentioned it was in a webpart and Sharepoint corev4.css had this div.ms-WPBody that likes to screw my styles up.

After deep investigation, since safari, chrome and IE9 didn't had any blurry fonts, I downgraded my IE9 to IE8 and managed to replicate the issue. Hours past and I did a side-by-side comparison between chrome and IE8. Then I saw something within the top level div which I used the fadeIn() effect. div id="divContainer" style="filter: alpha bla bla bla,....."

It caught my attention and I used IE developer tools and went straight to the CSS tab and looked for the "filter". I turned it off by clicking on the checkbox. The fonts immediately sharpened. Hmm, http://blogs.msdn.com/b/e7/archive/2009/06/23/engineering-changes-to-cleartype-in-windows-7.aspx


So I've read up a lot and found out that jQuery might actually add in the filter somehow. I managed to solve it by putting:

document.getElementById('divContiner').style.removeAttribute('filter');

But I later found out that it only work for IE8. After some more frustrating hours, I discarded the fadeIn() effect and the fonts were sharp and crisp :)

Facebook detect movement before loading new feeds

If you are eagle-eyed enough, you would have noticed that facebook actually doesn't poll unnecessarily from the server. Somehow it knows that you are away for sometime and when you are active and start to move your mouse, newer feeds starts loading.


<script type="text/javascript">
  document.onmousemove = (function() {
    var onmousestop = function() {
      $('h1').css("color", "white");
    }, thread;
    return function() {
      $('h1').css("color", "red") clearTimeout(thread);
      thread = setTimeout(onmousestop, 200);
    };
  })();


Read more on this: Closures
I've embedded this scrip into the blog -> Blue H1, so don't panic if you see the h1 starts turning blue :)

Mimic wikipedia for SharePoint 2010 search

Recently, there was a user requirement for customizing SharePoint 2010 Enterprise wiki search control. 

Objective: Mimicking Wikipedia search box functionality, whereby when a user enters a wiki page title, if there is an exact hit, we should redirect the user to the page, instead of displaying SharePoint's default result page. (Less the autocomplete)

Using jQuery & a bit of digging into SP.js, i found that internally, SharePoint actually uses a javascript function called "SubmitSearchRedirect", which actually redirects the user to "/_layouts/searchresults.aspx" and appending the search keyword as the querystring. 

So a seemingly difficult request was actually completed in less than 10 mins.

function applyCustomSearch() {

            $("#onetIDGoSearch").attr("onclick", ""); //user click on search img
            $("#idSearchString").attr("onkeydown", ""); //user keystroke

            $("#onetIDGoSearch").click(function() {
                <Your AJAX function to check if the page exists>($("#idSearchString").val(), function(exactHit){
                    if(exactHit== true) { //simulate got exact hit
                        window.location = "http://"+ document.domain +"/<Your Enterprise Wiki Homepage>/" + $("#idSearchString").val() + ".aspx?ContextId=" + $.queryString("ContextId");
                    } else { 
                        SubmitSearchRedirect("http://"+ document.domain +"/_layouts/searchresults.aspx");
                    }           
                });
            });

            $("#idSearchString").keydown(function (event) {                
                if (event.keyCode == '13') {
                    event.preventDefault();
                    <Your AJAX function to check if the page exists>($("#idSearchString").val(), function(exactHit){
                    if(exactHit== true) { //simulate got exact hit
                        window.location = "http://"+ document.domain +"/<Your Enterprise Wiki Homepage>/" + $("#idSearchString").val() + ".aspx?ContextId=" + $.queryString("ContextId");
                    } else { 
                        SubmitSearchRedirect("http://"+ document.domain +"/_layouts/searchresults.aspx");
                    }           
                });
            });
        }

The logic is dead simple. 

For my project, i used an event receiver to track all the articles by saving them into a database and creating a tag cloud. So i had the benefit of knowing exactly how many article pages and how they are being named. So all i did was a simple $.getJSON() to my custom RESTful WCF service, which returns a boolean, and the rest is straightforward.

For simpler projects, you can either use http://spservices.codeplex.com/ to query the wiki pages library for the article existence.

I shall do a blogpost on how to embed jQuery library into SharePoint 2010 in the subsequent posts.

GSPMigrator source code release

After leaving the source codes for this tool, i've decided to put it on CodePlex with the GNU v2 licence, hoping that it will support and help any one that needs to migrate files into SharePoint 2007 (and in the future 2010).

GSPMigrator is basically a migration tool that allows anyone within the network to connect to a network drive and view it with a tree view.

There are several problems (although there are still some minor ones) that i went through before coming out with this version:

• Lazy-loading vs eager-loading on generating tree views

Lazy-loading will give better user experience.

Customising SharePoint 2010 enterprise wiki

Requirements:

There are 3 different business context:

1. Work
2. Personal
3. Entertainment

When a user comes into the wiki site, there will be a visual webpart embedded in the form to scope this document to 1 of the above 3 context. So if the user would like to post a Work-related wiki article, he can select an option (dropdown list or radio button etc, but on my POC it's only a textbox :P) and when he click on the sharepoint save & close button

the permission of the article will be restricted based on predefined rules.

Solution (after some thoughts):

1. Event receiver to set permissions
2. Using HttpContext in EventReceiver synchronous events (itemAdding & itemUpdating) to get the value to b
3. Customising the master page to include a VWP (visual webpart) to allow user select "context"

.Net technical test drawing mountains

Recently, my friend was given a technical test during an interview, i realized that it's a rather common "test" given to interviewees. I took up the challenge and squeeze out some time to do it.

The interviewer asked my friend to write a console application that reads from user's keyboard input, when the user enters a number, draw a mountain with the user input as the number of back and forward slashes. (of course, with bigger numbers, the subsequent layers need more padding between the slashes).

I wasn't exactly sure how the question was structured, but based on my understanding, i scribbled typed the expected end results on a text editor.


/\         gap=0, space=0, input=1

 /\        gap=1, space=0, input=2 (print new line)
/  \       gap=0, space=2

  /\       gap=2, space=0, input=3 (print new line)
 /  \      gap=1, space=2 (print new line)
/    \     gap=0, space=4 (print new line)

   /\      gap=3, space=0, input=4
  /  \     gap=2, space=2 (print new line)
 /    \    gap=1, space=4 (print new line)
/      \   gap=0, space=6 (print new line)

So, with my iPad showing me the expected results and my primary monitor with visual studio 2010... i started writing some loops:



using System;


namespace DrawMountains
{
    class Program
    {
        static void Main(string[] args)
        {
            int inputNum; 
            if (int.TryParse(Console.ReadLine(), out inputNum))
            {
                for (int i = 0; i < inputNum; i++)//print tip of mountain & padding (if any) 
                {
                    int temp = inputNum-i; //amount of padding to print
                    while (temp > 1) //amount of space before left slope
                    {
                        PrintSpace();
                        temp--;
                    }
                    PrintLeftSlope();
                    //----------------prints all left slope correctly (up to n num)
                    int temp2 = i*2;
                    for (int j = 0; j<temp2; j++) //padding between the slashes
                    {
                        PrintSpace();
                    }
                    PrintRightSlope(); //self-explanatory
                }
                Console.ReadKey();
            }
            else
            {
                Console.WriteLine("Invalid input");
                Console.ReadKey();
            }
        }


        static void PrintLeftSlope()
        {
            Console.Write("/");
        }


        static void PrintRightSlope()
        {
            Console.WriteLine(@"\");
        }


        static void PrintSpace()
        {
            Console.Write(" ");
        }
    }
}

This post is purely for educational purposes, no point for memorizing this sample and contrived effort. I believe the interviewer's purpose is to see how strong are you in the way you design your algorithms, handling exception (which i didn't do) and perhaps your naming convention and formatting. 

SharePoint 2010 and .Net 4 Part 2

A continuation from this post.

I have achieved a managed software development cycle for complex SharePoint 2010 systems, a brief overview (albeit poorly drawn sample)

I have had several problems before finalizing the solution & project files:

1. SharePoint 2010 application pool can only support .Net 3.5 and below (our latest proprietary framework is done with .Net 4.0)
2. Cross-Origin Request Sharing 
3. SharePoint 2010 requires signed assemblies for Visual Webpart projects in order to do debugging

For the first problem, we have worked around by wrapping the Business Interface with a WCF project that acts as a proxy. We had a lot of internal arguments, discussions and some conflict on this approach. One of the team member is uncomfortable with the additional overhead, however after doing several tests with Apache Bench, we are satisfied with the performance and delays. Another colleague actually done a similar implementation and mentioned that in the long-run when user base increases, we can actually scale out by letting the WCF services run on a dedicated box, sounds nice. Thus, we went ahead with the WCF as a proxy pattern. 

For the second problem, we spent many man hours figuring out why we can't do an AJAX call to our custom WCF services via jQuery 1.6. After narrowing down the issues to the Cross-Origin Request Sharing, we have tried to use JSONP without success, setting jQuery options of $.support.cors = true without success, jQuery options of CrossDomain = true without success. I spent few hours trying to make the jQuery call the WCF, something which appears so simple and straight forward, i decided to use google chrome and see what the console says..

"XMLHttpRequest cannot load <url>. Origin <url> is not allowed by Access-Control-Allow-Origin." We fixed the issue by adding a global.asax into the WCF project and adding a method in the Application_BeginRequest.

protected void Application_BeginRequest(object sender, EventArgs e)
{

    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")

    {

        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods",  "GET, POST");

        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");

        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");

        HttpContext.Current.Response.End();

    }

}

For the third problem, it wasn't so bad, we just had to get the framework team to sign all their libraries before we add into SharePoint bin. This is actually for non Visual Webpart solutions, namely sharepoint application pages. We would have to use our Business Objects and Interfaces on the codebehind, so that pretty much explains it.

Have fun developing in SharePoint 2010 :)

SharePoint 2010 and .Net 4

There are many people that tried and failed (including myself), my company have a proprietary framework written in .Net 4.0 (latest release), after 3 frustrating days and nights, i've given up and made several work-arounds and exceptions.

The only way that allow you to use .Net 4 projects is, to wrap it around a WCF 3.5 project. My solution for the current project involves jQuery and WCF heavily in order to give the end users a highly interactive interface. Hope to be able to extract non-sensitive snippets and post it here.

Fix iPhone vibration problems

My iPhone 3GS vibration motor just went dead on me for no reason, luckily I have an app called iBrate, after double tapping on the screen which supposedly made the phone vibrate non stop, it's still not budging, in a fit of anger I hit it on my table and the thing went bzzzzzzzzzzzz. Caught me by surprise, after googling for similar cases, I found that using iBrate with slapping the phone's back on the palm is a solution for many. Guess it's time to get iPhone 5 as soon as it launches :)

SharePoint 2010 custom error off

Back in MOSS 2007, when i need to debug, all i have to do is to change the web.config file:

<customErrors mode="Off"/>

However, in SharePoint 2010, there is another web.config in the Hive folder, under LAYOUTS. To disable customError, remember to give hive folder a visit and change the values there :)

Sharepoint 2010 custom wiki page layout

While doing some exploratory work, i tried to clone the default Enterprise Wiki pagelayout and added some of my own controls, everything went smooth until when i try to save & close the page and i was thrown the following error:
"failed to get value of the wiki categories column from the managed metadata field type control invalid field name"


Googling didn't help much as most of them prompted me to activate the taxonomy site feature (which after verifying, it was already active), after some head scratching, i realized that when i duplicate the layout page, i've used the default Associated Content Type as "Article Page" instead of "Enterprise Wiki Page", after editing the associated content type, all went well :)

SharePoint 2010 as a platform to mimic facebook?

One of the greatest challenge for me to date. Using SharePoint 2010 as a platform to mimic Facebook social networking capabilities.

First thing that came to my mind: FaceBook took 6 years and with their strong team of developers that contributed so much to the open source community. The technology they used are amazing, which is not something my company should undertake.. (dam pre-sales)

I am already tasked to deliver it and i already have so much in my mind on the implementation design, performance considerations, further more, i'm leading a virtual team to complete this project. It's going to be a tough year ahead for me, however if it manage to satisfy my client, i'd be glad as it's something which  not many sharepoint developers dare to undertake.