SharePoint 2013: Calculator App Using SharePoint Hosted App Model With Office 365 Account

In this article, we are going to learn how to use JQuery calculator with SharePoint hosted App for calculation purpose.

Calculator App will look like the following: 

Step 1: Create A new SHA project using Office 365 account credentials.

Step 2: SHA project structure as in the following,


Step 3: In this project we are going to import JQuery Plugins and CSS file for calculator.

  1. <script type="text/javascript" src="../Scripts/jquery.calculator.min.js"></script>  
  2. <style type="text/css">  
  3.     @import "../content/jquery.calculator.css";  
  4. </style>  

Step 4: Default.aspx page contain code for calculator creation as follows.

  1. <%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" language="C#" %>  
  2.     <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  
  3.         <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  
  4.             <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  
  5.                 <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">  
  6.                     <script type="text/javascript" src="../Scripts/jquery-1.6.2.min.js"></script>  
  7.                     <script type="text/javascript" src="../Scripts/jquery.calculator.min.js"></script>  
  8.                     <style type="text/css">  
  9.                         @import "../content/jquery.calculator.css";  
  10.                     </style>  
  11.                     <script type="text/javascript" src="../Scripts/App.js"></script>  
  12.                     <script type="text/javascript">  
  13.                         $(function()  
  14.                           {  
  15.                             $('#basicCalculator').calculator({  
  16.                                 showOn: 'both',  
  17.                                 buttonImageOnly: true,  
  18.                                 buttonImage: '../content/calculator.png'  
  19.                             });  
  20.                         });  
  21.                     </script>  
  22.                 </asp:Content>  
  23.                 <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">  
  24.                     <p>  
  25.                         <input type="text" id="basicCalculator" />  
  26.                     </p>  
  27.                 </asp:Content>  
Step 5: Manifest.xml file,

No need to set any permission for this app, as we are going to use JQuery plugins only.

Step6: App.JS file,

  1. "use strict";  
  2. var context;  
  3. var web;  
  4. var user;  
  5.   
  6. function sharePointReady()   
  7. {  
  8.     context = new SP.ClientContext.get_current();  
  9.     web = context.get_web();  
  10.     getUserName();  
  11. }  
  12.   
  13. function getUserName()  
  14. {  
  15.     user = web.get_currentUser();  
  16.     context.load(user);  
  17.     context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);  
  18. }  
  19.   
  20. function onGetUserNameSuccess()  
  21. {  
  22.     $('#message').text('Hello ' + user.get_title());  
  23. }  
  24.   
  25. function onGetUserNameFail(sender, args)  
  26. {  
  27.     alert('Failed to get user name. Error:' + args.get_message());  
  28. }  

Step 7: Jquery.calculator.css file contains code for calculator look and feel.

  1. /* Main style sheet for jQuery Calculator v1.3.2 */  
  2. div.hasCalculator, span.hasCalculator  
  3. {  
  4.     position: relative;  
  5. }  
  6. button.calculator - trigger   
  7. {  
  8.     width: 25 px;  
  9.     padding: 0 px;  
  10. }  
  11. img.calculator - trigger   
  12. {  
  13.         margin: 2 px;  
  14.         vertical - align: middle;  
  15.     }  
  16.     .calculator - popup  
  17.     {  
  18.         display: none;  
  19.         z - index: 10;  
  20.         margin: 0;  
  21.         padding: 0;  
  22.         border: 1 px solid #888;  
  23. border-radius: 4px;  
  24. -moz-border-radius: 4px;  
  25. -webkit-border-radius: 4px;  
  26. color: # 000;  
  27.         background - color: #f4f4f4;  
  28.         font - family: Arial,  
  29.         Helvetica,  
  30.         sans - serif;  
  31.     }  
  32.     .calculator - keyentry   
  33.     {  
  34.         position: absolute;  
  35.         top: 3 px;  
  36.         right: 3 px;  
  37.         width: 0 px;  
  38.     }  
  39.     .calculator - inline   
  40.     {  
  41.         position: relative;  
  42.         border: 1 px solid #888;  
  43. border-radius: 4px;  
  44. -moz-border-radius: 4px;  
  45. -webkit-border-radius: 4px;  
  46. background-color: # f4f4f4;  
  47.     }  
  48.     .calculator - inline.calculator - close  
  49.     {  
  50.         display: none;  
  51.     }  
  52.     .calculator - disabled   
  53.     {  
  54.         position: absolute;  
  55.         z - index: 100;  
  56.         background - color: white;  
  57.         opacity: 0.5;  
  58.         filter: alpha(opacity = 50);  
  59.     }  
  60.     .calculator - rtl  
  61.     {  
  62.         direction: rtl;  
  63.     }  
  64.     .calculator - prompt   
  65.     {  
  66.         clear: both;  
  67.         text - align: center;  
  68.     }  
  69.     .calculator - prompt.ui - widget - header  
  70.     {  
  71.         margin: 2 px;  
  72.     }  
  73.     .calculator - result  
  74.     {  
  75.         clear: both;  
  76.         margin: 2 px;  
  77.         padding: 0 px 2 px;  
  78.         text - align: right;  
  79.         background - color: #fff;  
  80.         border: 1 px inset #000;  
  81. border-radius: 4px;  
  82. -moz-border-radius: 4px;  
  83. -webkit-border-radius: 4px;  
  84. font-size: 110%;  
  85. }  
  86. .calculator-focussed  
  87. {  
  88. background-color: # ffc;  
  89.     }  
  90.     .calculator - row  
  91.     {  
  92.         clear: both;  
  93.         width: 100 % ;  
  94.     }  
  95.     .calculator - space  
  96.     {  
  97.         float: left;  
  98.         margin: 2 px;  
  99.         width: 28 px;  
  100.     }  
  101.     .calculator - half - space  
  102.     {  
  103.         float: left;  
  104.         margin: 1 px;  
  105.         width: 14 px;  
  106.     }  
  107.     .calculator - row button   
  108.     {  
  109.         position: relative;  
  110.         float: left;  
  111.         margin: 2 px;  
  112.         padding: 0 px;  
  113.         height: 22 px;  
  114.         background - color: #f4f4f4;  
  115.         border - radius: 4 px; - moz - border - radius: 4 px; - webkit - border - radius: 4 px;  
  116.         text - align: center;  
  117.         cursor: pointer;  
  118.     }  
  119.     .calculator - row.calculator - ctrl  
  120.     {  
  121.         width: 60 px;  
  122.         background - color: #e8e8e8;  
  123.     }  
  124.     .calculator - row.calculator - undo, .calculator - row.calculator - clear - error, .calculator - row.calculator - clear {  
  125.         width: 28 px;  
  126.     }  
  127.     .calculator - row.calculator - base, .calculator - row.calculator - angle {  
  128.         width: 28 px;  
  129.         font - size: 70 % ;  
  130.     }  
  131.     .calculator - row.calculator - base - active, .calculator - row.calculator - angle - active {  
  132.         border: 2 px inset# fff;  
  133.     }  
  134.   
  135.     .calculator - digit, .calculator - oper  
  136.     {  
  137.         width: 28 px;  
  138.     }  
  139.     .calculator - mem - empty  
  140.     {  
  141.         color: #888;  
  142. }  
  143. .calculator-row .calculator-trig   
  144. {  
  145. font-size: 70%;  
  146. }  
  147. @-moz-document url-prefix() { // Firefox  
  148. .calculator-trig, .calculator-base  
  149. {  
  150. text-indent: -3px;  
  151. }  
  152. }  
  153. .calculator-key-down {  
  154. -moz-border-radius: 4px;  
  155. -webkit-border-radius: 4px;  
  156. }  
  157. .calculator-keystroke   
  158. {  
  159. display: none;  
  160. width: 16px;  
  161. height: 14px;  
  162. position: absolute;  
  163. left: -8px;  
  164. top: -8px;  
  165. color: # 000;  
  166.         background - color: #fff;  
  167.         border: 1 px solid #888;  
  168. font-size: 80%;  
  169. }  
  170. .calculator-angle .calculator-keystroke, .calculator-base .calculator-keystroke, .calculator-trig .calculator-keystroke {  
  171. top: -10px;  
  172. font-size: 95%;  
  173. }  
  174. .calculator-keyname  
  175. {  
  176. width: 22px;  
  177. font-size: 70%;  
  178. }  
  179. .calculator-cover  
  180. {  
  181. display: none;  
  182. display/**/: block;  
  183. position: absolute;  
  184. z-index: -1;  
  185. filter: mask();  
  186. top: -4px;  
  187. left: -4px;  
  188. width: 125px;  
  189. height: 200px;