Use JSOM to create a SharePoint website counter

A few days ago, weibo was asked how to implement a SharePoint counter conveniently and quickly? Well, in this article, I try to use the simplest method to create a SharePoint website counter. Before getting started, let's set the functions of this counter as follows:
• This is the simplest counter, and its function is to record the website traffic.
• When a user opens any page of the website for the first time, the counter will be + 1. However, when the user refreshes the page or browses other pages of the website, the counter will not increase. 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 make our counters "light" and reduce its impact on the loading speed of website pages! Yes, we will not create any Web Part, control, or page. All functions are implemented through JavaScript scripts, and the interaction between scripts and SharePoint servers is implemented using SharePoint 2010 JavaScript Object Model (JSOM.
When we create a js script file for a SharePoint application, we usually face a common problem: how can we make all pages on the website load this js script file? There are multiple ways to achieve this effect, but here we will use the simplest method: implement through Custom Action.
Create a new SharePoint 2010 Project in Visual Studio 2010 and add an empty element to the project. In the element file Elements. xml, add a new CustomAction tag. By setting the Location attribute to ScriptLink, you can easily inject the js script file specified by ScriptSrc to all pages of the website automatically.
1: <Elements xmlns = "http://schemas.microsoft.com/sharepoint/">
2: <CustomAction Id = "beaee891-f767-4008-a97e-7e65ee985191"
3: Title = "ScriptLink. jQuery"
4: Location = "ScriptLink"
5: ScriptSrc = "~ Site/HitCounterModule/jquery-1.7.2.min.js "/>
6: <CustomAction Id = "beaee891-f767-4008-a97e-7e65ee985191"
7: Title = "ScriptLink. jQuery. cookie"
8: Location = "ScriptLink"
9: ScriptSrc = "~ Site/HitCounterModule/jquery. cookie. js "/>
10: <CustomAction Id = "878450b6-6932-42c8-b551-d99acbc66b86"
11: Title = "ScriptLink. webHitCounter"
12: Location = "ScriptLink"
13: ScriptSrc = "~ Site/HitCounterModule/webHitCounter. js "/>
14: </Elements>
In the above element file, I added three CustomAction labels and they registered three js script files:
• Jquery-1.7.2.min.js: jQuery Library
• Jquery. cookie. js: A jQuery plug-in used to operate cookies
• WebHitCounter. js: we will create it later, and the logic code of the counter will be placed in this script file.
In the ScriptSrc attribute, I specified "~ Site/HitCounterModule/xxx. js. This is because later, we will put all three script files in the HitCounterModule folder of the website.
Next we will create these js script files. In fact, we only need to copy the previous two jQuery-related script files. What we really need to write is the webHitCounter. js file.
Add a module in the project, copy two jQuery-related files to the module folder, and create 3rd script files: webHitCounter. js in the module folder. Open the element file Elements of this module. xml, Visual Studio has automatically added the content of the three script files to Elements. in xml, We will slightly modify its content as shown below. The Url attribute of the Module tag specifies that these files will be placed in the HitCounterModule folder of the website. Each File sub-tag indicates that a File is to be placed in a SharePoint website. In the end, this module is used to publish the three js script files to the HitCounterModule folder of the website.
1: <Elements xmlns = "http://schemas.microsoft.com/sharepoint/">
2: <Module Name = "HitCounterModule" Url = "HitCounterModule">
3: <File Path = "HitCounterModule \ webHitCounter. js" Url = "webHitCounter. js" Type = "Ghostable"/>
4: <File Path = "HitCounterModule \ jquery-1.7.2.min.js" Url = "jquery-1.7.2.min.js" Type = "Ghostable"/>
5: <File Path = "HitCounterModule \ jquery. cookie. js" Url = "jquery. cookie. js" Type = "Ghostable"/>
6: </Module>
7: </Elements>
Now, our Visual Studio project contains all necessary components. Rename the component names as you like. The following figure shows the project manager in my Visual Studio (the names I give to each component are not necessarily the same as yours ), hitCounterModule is used to publish three js script files to the website (it also contains these three js files ), hitcounterjavascripchloroform is the Custom Action used to "inject" The Three js script files to all pages of the website. The name I name for Feature is HitCounterWeb.

 


 

Finally, we started to do the "things" and compile the script code in webHitCounter. js!
First, create a function getWebHitCountAsync () to obtain the current website counter value. We store the website counter value in the additional attributes of the website object (SPWeb) and name this attribute webHitCount. The Code uses the SharePoint 2010 JavaScript Client Object Model to obtain the attribute value of the website Object from the server. Because the communication between JavaScript and the server is based on the asynchronous mode, I used the Promise model to slightly encapsulate the function.
1: function getWebHitCountAsync (){
2: return $. Deferred (function (dtd ){
3: var ctx = SP. ClientContext. get_current ();
4: var web = ctx. get_web ();
5: var webProps = web. get_allProperties ();
6: ctx. load (webProps );
7: ctx.exe cuteQueryAsync (function (){
8: var hitCount = webProps. get_fieldValues () ['webhitcount'];
9: if (! HitCount ){
10: hitCount = 0;
11 :}
12: dtd. resolve (hitCount );
13 :}, function (){
14: dtd. reject (0 );
15 :});
16:}). promise ();
17 :}
Create an increaseWebHitCountAsync () function to add one website counter.
1: function increaseWebHitCountAsync (){
2: return $. Deferred (function (dtd ){
3: getWebHitCountAsync (). done (function (hitCount ){
4: var ctx = SP. ClientContext. get_current ();
5: var web = ctx. get_web ();
6: var webProps = web. get_allProperties ();
7: webProps. set_item ('webhitcount', ++ hitCount );
8: web. update ();
9: ctx.exe cuteQueryAsync (function (){
10: dtd. resolve ();
11 :}, function (){
12: dtd. reject ();
13 :});
14 :});
15:}). promise ();
16 :}
Finally, create an onPageLoad () function and run it after loading the page (by adding the function name to the _ spBodyOnLoadFunctionNames array ). It first calls the getWebHitCountAsync () function to obtain the counter value of the current website, and calls the displayHitCount () function to display the counter on the page (the Code of this function is later in the article ). Next, it checks whether there is a cookie named hitted. If not, it calls the increaseWebHitCountAsync () function to add one website counter and write the cookie named hitted at the same time.
1: function onPageLoad (){
2: ExecuteOrDelayUntilScriptLoaded (function (){
3: getWebHitCountAsync (). done (function (hitCount ){
4: displayHitCount (hitCount );
5:
6: if (! $. Cookie ('hitted ')){
7: increaseWebHitCountAsync (). done (function (){
8: $. cookie ('hitted', 'true ');
9 :});
10 :}
11 :});
12:}, 'SP. js ');
13 :}
14:
15: _ spBodyOnLoadFunctionNames. push ('onpageload ');
Why is such a cookie used? This is because we want the website counter to add one to the counter only when the user opens the website page for the first time. Therefore, after modifying the counter, we write a symbolic cookie to the browser without setting its expiration time. For a cookie with no expiration time, the browser will delete it when it is disabled by default, so that when the user opens the browser again, the cookie will no longer exist, then, the counter will be added again. As long as the user continuously accesses the website in the browser, this cookie will always exist, so that the script will only get the latest counter value, instead of constantly updating the counter.
The displayHitCount () function used to display the counter value on the page is implemented as follows.
1: function displayHitCount (hitCount ){
2: $ ('<div style = "text-align: left; padding-left: 10px; margin-top: 10px; display: none"> website counters: '+ hitCount +' </div> '). appendTo ('. ms-quickLaunch '). slideDown ('low ');
3 :}
The function is to display the current website counter value at the bottom of the Quick Start area on the left side of the page. The effect is as follows:

 


 

The SharePoint application we created can be deployed to SharePoint as a sandboxed solution. (Well, in fact, I encourage you to write SharePoint applications as compatible with sandbox solutions whenever possible .)

Download the source code for the entire project: http://www.bkjia.com/uploadfile/2012/0413/20120413090333386.zip
 

Finally, if you just want to add such a counter to your website, you do not understand Visual Studio or SharePoint development. The only tool is SharePoint Designer, you can also use SharePoint Designer to implement and deploy this website counter. The next article describes how to use SharePoint Designer to deploy this website counter to a SharePoint website.

 

From Kaneboy's SharePoint Space