SharePoint 2010 Calendar - Static Resource display using ECMAScript
In this article, I am going to talk about SharePoint 2010 Calendar list with resource scheduling.
SharePoint 2010 has got a very nice site feature named - "Group Work Lists". This feature allows scheduling of resources in SharePoint 2010 Calendar list. By activating this feature, SharePoint creates a list called Resources which is linked with the Calendar list. The Resources list can be used to document shard assets, such as cameras, vehicles, conference rooms. Users can reserve and track the listed resources in Group Calendar list.
This looks a very lucrative deal when tracking the resources in the Calendar list with individual and group resources. But there is a catch when it comes to displaying the reservations for the resources or group of resources.
Assuming that the user has already activated the Group Work Lists feature. If not, one can enable this feature by going into Site Settings > Site Actions > Manage Site features, and then enable the Group Work Lists feature. Once the feature is enabled, user can see the Resources list in the All Site Contents.
The list will be empty and it contains 2 content types : Resource & Resource Group
Users can create individual resources using the Resource CT like Vehicle and group of resources using Resource Group CT like Rooms{Maple, Mysore, Boardroom}.
Once created, user can navigate to the Calendar list, which will be there by default if Team site is created or else user can create one.
Next the Calendar's general setting needs to be modified to enable the resource reservation.
To do that, user can got Calendar > List Settings > General Settings and select Title, description and navigation settings. Next select the option "Yes" for resource reservation.
Now user can reserve the resources and can see the reservation blocked in the Calendar. Now if the user wants to see what all reservations were booked for a day or week or month, user needs to add the resource into the Calendar to view the reservations for that particular resource. On adding the resource, the Calendar default view will show all the reservations made for that particular selected resource on a day/week/month basis whichever option selected from the ribbon.
Next is where the catch comes in, if the user refreshes the page, the filter is lost and the user needs to add the resource from scratch.
What if the resource display can be made permanent even after page refresh? This can turn out to be good, if the resources are few in number and user needs to view the reservations on a daily basis or frequently without adding the resources every time. Unfortunately, SharePoint 2010 has no way to preserve the resource display once added. But this can be achieved through various workarounds.
I have tried to accomplish the same using SharePoint 2010 ECMAScript CSOM.
In this article, I will show you how to preserve the resource reservation display for all the individual resources in the Resources List and not for the Resource Group.
For the Resource Group reservation display, I will soon come out with another article, may be part 2 of this article. But for the time being, will focus on the individual resource display.
So here is what was done.
Step -1 : Activated the Group Works List feature.
Step -2 : Added Individual Resources into the Resources list.
Step -3: Enabled the resource reservation settings in the Calendar list.
Step -4: Created a blank webpart page.
Step -5: Added ContentEditor Webpart and Calendar Webpart on that page.
Step -6: Inserted the below mentioned script under the CEWP.
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/ecmascript" >
ExecuteOrDelayUntilScriptLoaded(xmlGenerator, "sp.js");
var allItems;
var context, web;
var list;
function xmlGenerator()
{
context = new SP.ClientContext.get_current();
web = context.get_web();
list = web.get_lists().getByTitle('Resources');
var query = SP.CamlQuery.createAllItemsQuery();
this.allItems = list.getItems(query);
context.load(this.allItems);
context.executeQueryAsync(Function.createDelegate(this, this.xmlSuccess), Function.createDelegate(this, this.xmlFailure));
}
function xmlSuccess()
{
var listItemEnumerator = this.allItems.getEnumerator();
var delimiter = ';#';
var xmlStart = '<Entities Append="True" Error="" DoEncodeErrorMessage="True" Separator=";" MaxHeight="3">';
var xsdValue = '';
var xmlEnd = '</Entities>';
while (listItemEnumerator.moveNext())
{
var myList = listItemEnumerator.get_current();
xsdValue += '<Entity Key="' + myList.get_item('Title') + '" DisplayText="' + myList.get_item('Title') + '" IsResolved="True" Description=""> ' +
'<ExtraData> ' +
'<ArrayOfDictionaryEntry xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">' +
'<DictionaryEntry>' +
'<Key xsi:type="xsd:string">SPResourceId</Key>' +
'<Value xsi:type="xsd:string">' + myList.get_item('ID') + '</Value>' +
'</DictionaryEntry>' +
'<DictionaryEntry>' +
'<Key xsi:type="xsd:string">PrincipalType</Key>' +
'<Value xsi:type="xsd:string">Resource</Value>' +
'</DictionaryEntry>' +
'</ArrayOfDictionaryEntry>' +
'</ExtraData>' +
'<MultipleMatches />' +
'</Entity>';
}
var xml = xmlStart + xsdValue + xmlEnd;
var el = $('.ms-acal-rootdiv');
var sel = SP.UI.ApplicationPages.CalendarSelector.instance().getSelector(1, $(el).attr('ctxid'));
sel.selectEntities(xml, true);
}
function xmlFailure(sender, args)
{
alert('Failed:' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
Make sure not to add any other webpart apart from Calendar Webpart, or else the script won't work.