QueryString Value using JavaScript in SharePoint

This post talks about how to use JavaScript to retrieve query string value from the URL and display it in an asp.net web control in an OOB SharePoint page. This might be a very common scenario in an ASP.Net environment, but when it comes to SharePoint the implementation is different and it may also take couple of hours to achieve this if you don’t have a complete idea about how SharePoint page works.

There are some limitations or rather you can say security related to SharePoint pages when it comes to JavaScript which access server side control. You cannot write directly access server side controls using JavaScript you need to make certain tweaks for this to work.

1.Make web.config changes so that you can access controls using JavaScript without getting “Page Parser Error message code blocks are not allowed”.

If you have scenario where you want to allow JavaScript in a particular page then you have to make the below entries in your pages

For ASPx Pages

<PageParserPaths> 

  <PageParserPath VirtualPath="/pages/[file name].aspx" CompilationMode="Always" AllowServerSideScript="true" /> 

</PageParserPaths>

For master page, this will enable inline code blocks for all master pages:

<PageParserPaths> 

  <PageParserPath VirtualPath="/_catalogs/masterpage/*" CompilationMode="Always" AllowServerSideScript="true" /> 

</PageParserPaths>

Making these changes will allow users who have access to Content DB to embed JavaScript in your site using SharePoint Designer.

2.The other option is to user HTML controls in your page. But even in this scenario SharePoint will adds an Auto Generated ID suffix and the control id changes like the one give below.

label id="lblName{generate-id}

So you may have to remove the auto generated suffix and keep only the label id.
So here goes the JavaScript which you can embed in a SharePoint page at the bottom and set the value of the control based on the query string

<script type="text/javascript">

var query = location.search.substring(1); 

if(query!=null)

{

 var query = location.search.substring(1).split('&');

 if(query .length>0)

 {

      var keys = query[0];

      var key = keys.split('=');

      var control=  document.getElementById('lblName');

      if(control!=null && key.length>0)

      {

        Control.innerText = key[1] ;

      }

 }

}

</script>

Twitter Widget IE8 Compatibility Issue

In this post I am going to talk about issue which i came across while integrating Twitter Widget in SharePoint 2010. This is most common requirement of integrating a twitter or any other widget into your SharePoint or any other community site.

There are many posts which will guide you on integrating Twitter widget into SharePoint site you can find some of them below given below
1.    http://www.endusersharepoint.com/2009/01/26/add-twitter-to-your-sharepoint-site/
2.    http://sharepoint.microsoft.com/blogs/mikeg/Lists/Posts/Post.aspx?ID=1202

Recently when I was integrating twitter widget with SharePoint 2010, I came across a issue where the tweets won’t scroll or you will see no tweets coming up in the widget section after integration. Initially I thought this might be a SharePoint 2010 issue  but later found out that all the tweets where coming up perfectly fine in other browser like Chrome and FireFox.

I noticed that there was a JavaScript error popping up at IE8 status bar. It was showing “Object doesn’t support this property or method” for the widget.js file. 

So this is an IE8 twitter widget compatibility issue.  Finally to conclude on this I also verified this with IE8 on of my colleagues machine for surprise the tweets where coming perfectly fine. So the problem was with IE8 version that was installed on the SharePoint Box. Please find the IE8 version details below.

Given below is the below are the steps which I took to fix this issue.
Step 1: Download the Widget.js file, this file is required for fetching the tweets
Step 2: Find Array.forEach in widget.js file and replace it withArray.prototype.forEach. You will find only one instance of this occurring
Step 3: Upload the Widget.js file to a document library and refer this link into the twitter widget javascript.

This will make your twitter widget work perfectly. If anyone has found any alternate solution please feel free to leave a comment..