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;
  6. function sharePointReady()
  7. {
  8. context = new SP.ClientContext.get_current();
  9. web = context.get_web();
  10. getUserName();
  11. }
  13. function getUserName()
  14. {
  15. user = web.get_currentUser();
  16. context.load(user);
  17. context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
  18. }
  20. function onGetUserNameSuccess()
  21. {
  22. $('#message').text('Hello ' + user.get_title());
  23. }
  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. }
  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. }