Post
Ask Question

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

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;  
  190. } 


Similar Articles