How to use Jsom to create a SharePoint site counter

A few days ago in the Weibo was asked, how easy and quick to implement a SharePoint counter it? Well, in this article, I try to create a SharePoint site counter in the simplest way. Before we begin, let's set the function of this counter as follows:

This is one of the most simple counters, its role is one: Record the number of visits to the site.

When the user first opens any page of the Web site, the counter is +1, but the counter is no longer cumulative when the user refreshes the page or browses to other pages of the site. In other words, our counter will be a real traffic counter, not a Page view counter.

We will not use any server-side code to allow our counters to be "lightweight", while reducing its impact on Web page loading speed! Yes, we will not create any Web Part, control, or page or anything like that. All features are implemented through JavaScript scripting and use the SharePoint JavaScript Object Model (JSOM) to interact with the SharePoint server.

When we create a JS script file for a SharePoint application, we usually face a common problem: how to get all the pages in the site to load this JS script file? There are a number of ways to do this, but here we'll use the simplest method: the custom action.

Create a new SharePoint 2010 project in Visual Studio 2010, and then add an empty element to your project. In the element file Elements.xml, add a new CustomAction label. By setting the Location property to ScriptLink, you can conveniently scriptsrc the specified JS script file, automatically "inject" to all pages of the site.

<elements xmlns= "http://schemas.microsoft.com/sharepoint/" > 
<customaction id= " beaee891-f767-4008-a97e-7e65ee985191 "3:title=" scriptlink.jquery "
location=" ScriptLink "
ScriptSrc=" ~ Site/hitcountermodule/jquery-1.7.2.min.js "/> 
<customaction id=" beaee891-f767-4008-a97e-7e65ee985191 "
title= "ScriptLink.jQuery.cookie"
location= "ScriptLink"
scriptsrc= "~site/hitcountermodule/jquery.cookie.js"/> <customaction Id= 
" 878410b6-6932-42c8-b551-d99acbc66b86 "
title=" Scriptlink.webhitcounter "
location=" ScriptLink
" scriptsrc= "~site/hitcountermodule/webhitcounter.js"/> 
</Elements>

In the above element file, I added 3 CustomAction tags, which registered 3 JS script files:

Jquery-1.7.2.min.js:jquery Library

Jquery.cookie.js: A jquery plugin for manipulating cookies

Webhitcounter.js: We'll create it later, and the logic code for the counter will be placed in this script file

In the Scriptsrc property, I specified a path such as "~site/hitcountermodule/xxx.js". This is because later, we'll put the 3 script files into the Hitcountermodule folder of the Web site.

And then we'll really create these JS script files. In fact, the first two jquery-related scripting files we just need to replicate, and the only thing we really need to write is the Webhitcounter.js file.

Add a module to the project, copy 2 jquery-related files to the module folder, and create a 3rd script file in the Module folder: Webhitcounter.js. Open the element file for this module Elements.xml,visual studio has automatically added the contents of these 3 script files to the Elements.xml, and we'll modify its contents as shown below. The URL property of the module label specifies that the files will be placed in the Hitcountermodule folder of the Web site. Each file child label indicates that you want to place a single document in the SharePoint site. Finally, the function of this module is to publish these 3 JS script files to the Hitcountermodule folder of the website.

<elements xmlns= "http://schemas.microsoft.com/sharepoint/" > 
<module name= "Hitcountermodule" Hitcountermodule "> 
<file path=" hitcountermodule\webhitcounter.js "url=" Webhitcounter.js "Type=" Ghostable "  /> 
<file path=" hitcountermodule\jquery-1.7.2.min.js "url=" Jquery-1.7.2.min.js "Type=" Ghostable "  /> 
<file path=" hitcountermodule\jquery.cookie.js "url=" Jquery.cookie.js "type=" ghostable "  /> 
</Module> 
</Elements>

Now, our Visual Studio project already contains all the necessary components. Rename the individual components in the way you like. The screenshot below is what my Visual Studio project Manager looks like (the names I give to each component are not necessarily the same as yours), Hitcountermodule is a module that publishes 3 JS script files to the site (it also contains the 3 JS files). HITCOUNTERJAVASCRIPTCA is used to "inject" the 3 JS script file to all pages of the website, the custom Action, my name for feature is called Hitcounterweb.

Finally, we started to do "business", write webhitcounter.js inside the script code!

First, let's Create a function getwebhitcountasync () to get the value of the current site counter. We store the value of the site counter in the attached property of the site object (SPWEB) and name this property webhitcount. The code uses the SharePoint JavaScript Client object model to get the value of this property from the server side of the site object. Because JavaScript and server-side communication is based on asynchronous mode, I use the promise model to encapsulate the function a little.

function Getwebhitcountasync () {return 
$. Deferred (function (DTD) { 
var ctx = SP. Clientcontext.get_current (); 
var web = Ctx.get_web (); 
var webprops = Web.get_allproperties (); 
Ctx.load (webprops); 
Ctx.executequeryasync (function () { 
var hitcount = webprops.get_fieldvalues () [' Webhitcount ']; 
if (!hitcount) { 
hitcount = 0; 
} 
Dtd.resolve (Hitcount); 
}, Function () { 
dtd.reject (0); 
}); 
}. Promise (); 
}