jQCalendarBlog – Mini SharePoint calendar web part for SharePoint blog posts

Introduction:

This is my 2^nd SharePoint client side web part application that I have developed using JavaScript\jQuery.  You can find the first application that I had created over here. This application is to integrate the published dates of the approved posts in a SharePoint Blog site with the jQuery calendar control.

Description:

This is a JavaScript application developed using jQuery. The JS code when added to a Content editor web part in a SharePoint page, it would display a jQuery calendar control synchronized with the SharePoint blog posts dates. Below are the lists of features:

1. The calender control highlights the dates during which approved blog posts were published in the SharePoint blog site.
2. The dates when hovered would display a small pop-up listing down link to the corresponding date’s blog posts that were published.
3. The links when clicked would take you to the respective blog post’s page.
4. You can also navigate to the previous and next month in the calendar to see the corresponding month’s data in a similar way as explained above.

Look at the below image for a better understanding:

As you can see in the above image, cells 1, 6, and 31 are highlighted with a blue color border to show that these are the dates in the current month having blog posts published. Also when you hover over date ‘6’ in the calendar you can see that a pop-up is being shown displaying the links to the posts published on that particular date.

Code:

I have used the jQuery DatePicker  control and SharePoint list web service to get this application done. I have tested this in an Office 365 SharePoint 2013 preview site and it works fine too. But I wanted to develop it as an app and publish it in the app store for SharePoint 2013. So please wait until I get a SharePoint 2013 development environment.

Deployment Process:

Since it is purely a client side application, we can simply deploy it by just moving the files. I assume that you have worked with CEWP before. I have explained the deployment process through the below steps:

1. Download the  jQCalendarBlog.zip file from here.
2. Unzip the jQCalendarBlog.zip file
3. Copy the unzipped jQCalendarBlog folder in to the layouts folder of SharePoint server.
4. Create a Content Editor Web Part anywhere in your SharePoint Blog site where you want to display this web part.
5. Open the jQCalendarBlog.min.js file from the jQCalendarBlog folder and copy the content in to the CEWP created above.
6. Save the page to see the web part showing a jQuery calendar control synchronized with the blog posts in your blog site.

SharePoint Caveat – BeforeProperties in SharePoint workflow

Technorati Tags: SharePoint 2010,Workflow,BeforeProperties,ItemUpdated,Event Receivers

I had to develop an application to track the status of delivery of an order whose details would be stored in a list. To accomplish this I had to choose either an event receiver or a workflow. I chose workflows since workflows would give me a better development environment with visual representation of the flow of process using which I can do the changes so easily which is not possible with event receivers.

Of course I chose to go ahead with Visual Studio workflow rather than SharePoint designer workflow due to the recursive process involved in the requirement.

I started my development and was so happy with the way it was progressing until I faced with a hurdle which led me to stop developing the workflow and instead start with an event receiver from scratch. I was really disappointed with that.

The requirement was to compare the values of a certain field before and after the list item has been updated. This can be achieved by creating 2 workflow properties to store the after properties and before properties of the list item.

The problem was when I found that BeforeProperties was always null in the ItemUpdated event activity and only the AfterProperties had values in it. I wondered why it is null always. When I tried the same workflow for a document library instead, I found that both BeforeProperties and AfterProperties to be holding values and were not null.

After googling I found that workflows for lists have the same limitation as that of event receivers for lists. And that is finding null value in the BeforeProperties for a list item in an ItemUpdated event receiver in a list. This limitation is present in both event receiver and workflow when attached to a SharePoint list. But you can overcome this limitation in an event receiver by replacing Item Updated event receiver with an Item Updating event receiver. In an Item updating event receiver you can find values in the BeforeProperties of the item that is getting updated. You can more about it over here. But in a workflow attached to a list there is no work around which means workflow is not going to be of much use for a list in this case.

Auto Suggestion/Auto Complete for SharePoint 2010 Search sites

Introduction:

It will be very useful for the users to have the search being suggested based on the past searches while they are typing in the search text box in a SharePoint search site. Yes I’m talking about the same concept that you find in the Google search but with a limited functionality.

This feature is available as an OOTB feature in SharePoint 2013 enterprise search. Look at this link to know more about this cool feature. The process is completely different though.

Description:

This is a simple JavaScript application which when added to a Content editor web part in home page and in the search results page of your SharePoint search site would display suggestions for the users as they type their search query in the search text box. The suggestion keywords are stored and retrieved from a SharePoint custom list called “Search Keywords”. Look at the below screenshot for a better understanding:

As you can see in the above image, as I type “I love s”, I get “I love SharePoint” and “I love Silverlight” as suggestions. These 2 are retrieved from a SharePoint list called “Search Keywords”.

So how and when are these suggestion keywords stored in the “Search Keywords” list? When a user is searching in the search site and the results page finished loading, the JS code added in the CEWP in the results page would add the search query in the “Search Keywords” list as new list item. Thus the matching suggestion keywords are retrieved from the list as the user is typing in the search text box later.

Limitations:

Since the suggestion keywords are added to a SharePoint list as a new list item every time a user searches, the performance may reduce when 1000’s of items get stored in the list. So it is advised to manually delete few keywords often from the list.

Code:

The code is developed using JavaScript, jQuery, Autocomplete jQuery ui widget, and SharePoint Client object model. There are 2 different JavaScript codes. One is for the search home page and the other is for the search results page.

I have explained the code in two parts in the below blog posts:

Part 1: How to give the Auto suggestion/complete functionality to the Search box with search terms retrieved from a SharePoint list.

Part 2: How to store the users’ searched queries to a SharePoint list dynamically and then show them as suggestions in the search box while searching.

Since it is purely a client side application, we can simply deploy it by just moving the files. I assume that you have worked with Content editor web part before. You need to create 2 CEWPs, one for search home page and the other for the search results page. I have explained the deployment process through the below steps:

Deployment process:

1. Download the SPAutosuggestion.zip file and unzip it.
2.  Create a folder called SPAutosuggestion under the layouts folder of your SharePoint server.
3. Copy the files jquery-1.7.js, jquery.ui.autocomplete.js, jquery.ui.core.js, jquery.ui.complete.js, jquery.ui.widget.js, and jquery-ui.CSS from the unzipped folder in to the above create folder.
4. Go to your SharePoint search site and create a list called “Search Keywords”
5. Go the search home page and edit the page.
6. Add a Content editor web part in to the page.
7. Click on “Click here to add new content” as shown in the below image:  
8. Now in the ribbon control click on HTML -> Edit HTML Source as shown below:  
9. In the HTML source editor window copy the content of the AutoSuggectionLandPage.js which would be present in the folder unzipped in step 1.
10. Click on “Save & Close” under the page tab in the top ribbon.
11. Go to the search results page of you SharePoint site and edit it.
12. Repeat step 6 to 10. But instead of copying the content of AutoSuggectionLandPage.js, copy the content of AutoSuggestionResultsPage.js.
13. Search with different queries twice or thrice to see them getting suggested as you type in the search text box.

jQCalendarPart – Mini SharePoint calendar web part

Introduction:

I always wanted everything to work on a full-fledged client side application in SharePoint. Thanks to the Client Object Model in SharePoint 2010 which inspired me a lots, though it was of no use in this application unfortunately (more on that later). Also, I wanted to use JavaScript/jQuery over Silverlight to get rid of that ugly “time out” message and the unnecessary task for the end users to download the Silverlight plugin. Well this application is to integrate the jQuery Calendar control with the events added in a SharePoint Calendar list. This would work in both SharePoint 2010 and SharePoint 2013.

Inspiration:

A similar application has already been developed and described here. It is developed by using SharePoint Server Object Model as a SharePoint web part by extending the ASP.NET calendar control but I wanted to make completely a client side application also slightly with a different functionality. I took help from this blog on how to query a SharePoint Calendar list using CAML query but still it really drove me crazy.

Description:

This is a JavaScript application developed using jQuery. The JS code when added to Content editor web part in a SharePoint page would display a jQuery calendar control synchronized with the SharePoint calendar list. Below are the list of features explained:

• The calendar control highlights the dates of all the upcoming events of the current month present in the Calendar list of the site.
• The dates when hovered over with mouse would display a small pop-up showing the the respective date’s events.
• Below the calendar control would be the list of all the upcoming events of the current week.
• The links when clicked would open the respective event’s page.

Look at the below image for a better understanding:

As you can see in the above image, cells 8, 9, 12, 13, and 14 are highlighted with a blue color border to show that these are the dates in the current month having events registered in the Calendar list. Below the calendar you can see the list of upcoming event of the current week. Also when you hover over date “8” in the calendar you can see that a pop-up is being shown displaying the events of that particular date.

Hurdles:

Initially I wanted to use SharePoint 2010 Client Object Model but since it was not possible to retrieve recurring events using COM so I had to use SharePoint list web services which also had limitations as I was able to retrieve only 30 events from the Calendar list in total which was not enough. So I went ahead and used SPServices which resolved my problems to a great extent.

Limitations:

The web part will not work if you try to navigate to the next month or to the previous month. Please wait as I’m working on a fix to highlight all the dates which are having event registered when a user is navigating to the next month.

Also the name of the Calendar list should be “Calendar”. The code will not work if the list name is different since it has been hard coded.

Code:

I have used the jQuery DatePicker control and SPServices to get this application done. I have tested this in an Office 365 SharePoint 2013 preview site and it works fine too. But I wanted to develop it as an app and publish it in the app store for SharePoint 2013. So please wait until I get a SharePoint 2013 development environment.

Deployment process:

Since it is purely a client side application, we can simply deploy it by just moving the files. I assume that you have worked with CEWP before. I have explained the deployment process through the below steps:

a. Download the jQCalendarPart.zip file from here.

b. Unzip the jQCalendarPart.zip file

c. Copy the unzipped jQCalendarPart folder in to the layouts folder of SharePoint server.

d. Create a Content Editor Web Part in you SharePoint site where you want to display this web part.

e. Open the jQCalendarPart.min.js file from the jQCalendarpart folder and copy the content in to the CEWP created above.

f. Save the page to see the web part showing a jQuery calendar control synchronized with the SharePoint calendar events from the Calendar list in your site.

I have published this application in CodePlex.You can check it out over here.

Opening a Modal dialog box in SharePoint

It is a good practice to display a “loading” page like below opening a Modal dialog from a web part or an Application page.

Recently I had a requirement to open the out of the box “Manage Access Requests” page from my web part for which I wrote the below code to open the “Manage Access Requests” on a button click:

var options =
{
  url: URL + "/_layouts/setrqacc.aspx?type=web&Source=" + URL + "&IsDlg=1",
  title: "Manage Access Requests",
  height: 500px,
  width: 300px,
  dialogReturnValueCallback: onDialogClose
};

SP.UI.ModalDialog.showModalDialog(options);

The modal dialog opened without any problem but the “loading” page in the above image did not display before opening the modal dialog which looked quite absurd as the modal dialog took some time to open.

After googling I found a solution in Stackoverflow that removing the height and width property in the above code would show the pre-loading page before opening the modal dialog page. To my surprise it did solve the issue. The pre-loading page got displayed before the Modal dialog opened.

Deploying a web level event receiver to a SharePoint web application

I was creating a web level event receiver which was to be deployed to a SharePoint web application which had more than 100 site collections. So I decided to create it as web application level scoped solution. But, only after I tried deploying it did I understand that a web level event receiver cannot be deployed at web application scope.

Somehow, I wanted to deploy the event receiver such that it gets executed for the site collections in a web application. I cannot manually activate the feature as there are more than 100 site collections.

It is then I got an idea that we can deploy the solution using a PowerShell script and activate the feature in all the site collections in the web application.

Here is a good blog post describing how to activate a feature in all the site collections in a web application using PowerShell script: http://basementjack.com/uncategorized/powershell-to-activate-a-sharepoint-2010-feature-on-every-site-collection-in-a-web-app/

But what if a user is creating a new site collection in the web application, and the feature also must get activated automatically instead of manually activating it in the newly created site collection? We can achieve this by creating a feature stapler.

A Feature stapler is a feature in itself which when deployed at a web application level (or at any level) will automatically activate a feature whose feature id is defined in the feature.xml of the feature stapler.

Here is a good blog post which explains how to create a feature stapler: http://blogs.msdn.com/b/kunal_mukherjee/archive/2011/01/11/feature-stapling-in-sharepoint-2010.aspx

Permission restricting options for SharePoint list views

I had an opportunity to work on restricting access to the users on a SharePoint list view which had let me to explore all possible ways to achieve it. First and foremost I would like to say that column level permission is not possible in SharePoint which was initially rumoured to have come as a new feature in SharePoint 2010 and later removed due to performance issues. So that tells us that view level permission in SharePoint is not possible too.

So, let us look at some ways to restrict access to the users on views in a SharePoint list:

• Private and Public views:

When a user is creating a view, he can select if the view can be viewed by everyone or only by himself by selecting either Public View or Private View as shown below:

The disadvantage of this is that obviously not more than one user can share the view.

So is there anyway to overcome this disadvantage? Look at the next point to know.

• List web part added in a Web part page:

Well if you want to create a View for which access has to be given to more than one user, it cannot be achieved through creating views or through list settings. But there is an alternate way to achieve this by adding the List View Web Part to a web part page, and then assigning permission to that web part page. Below are the steps to achieve this:

1. Create a Web part page.
2. Edit the page and then add the web part of your list.
3. Edit the web part and click on Edit the current view as shown below:
4. Now configure the view as per your requirement, click OK and click Stop Editing the page.
5. We have now configured a List View web part. We need to give access only to certain users. To do this we need to restrict access to the web part page in which the web part is added.
6. Click on the page tab from the top to open the page ribbon controls as shown below:
7. Click on Permission and then select Stop Inheriting Permission in order to give unique permission to the web part page.
8. Now, remove the users who should not have access and grant permission to the users who need access.Thus we have restricted the access to a list view web part through a web part page.These are the 2 ways restrict access on a list view. Will update if I find more.