From 40508581810709e57989f2c613444b95257779c8 Mon Sep 17 00:00:00 2001
From: Jason Johnston <jasonjoh@microsoft.com>
Date: Mon, 6 Feb 2017 14:32:13 -0500
Subject: [PATCH] Added iOS view of the REST pane

---
 RestCaller/RestCaller.html              | 170 +++++++++----------
 RestCaller/mobile/RestCaller-ios.css    |  23 +++
 RestCaller/mobile/RestCaller-ios.html   | 155 +++++++++++++++++
 RestCaller/mobile/RestCaller-ios.js     | 214 ++++++++++++++++++++++++
 RestCaller/mobile/RestCallerMobile.html |  38 +++++
 RestCaller/mobile/RestCallerMobile.js   |  11 ++
 command-demo-manifest.xml               |   3 +-
 package.json                            |  11 +-
 8 files changed, 535 insertions(+), 90 deletions(-)
 create mode 100644 RestCaller/mobile/RestCaller-ios.css
 create mode 100644 RestCaller/mobile/RestCaller-ios.html
 create mode 100644 RestCaller/mobile/RestCaller-ios.js
 create mode 100644 RestCaller/mobile/RestCallerMobile.html
 create mode 100644 RestCaller/mobile/RestCallerMobile.js

diff --git a/RestCaller/RestCaller.html b/RestCaller/RestCaller.html
index 139ed0a..a2c3bb3 100644
--- a/RestCaller/RestCaller.html
+++ b/RestCaller/RestCaller.html
@@ -35,103 +35,103 @@
             REST details
           </li>
       </ul>
-        <div class="ms-Pivot-content" data-content="get-item">
-          <div class="ms-Grid">
-            <div class="ms-Grid-row">
-              <div class="ms-Grid-col ms-u-sm6">
-                <button class="ms-Button ms-Button--primary get-item-button is-disabled">
-                  <span class="ms-Button-label">Get Item</span>
-                </button>
-              </div>
-              <div class="ms-Grid-col ms-u-sm6">
-                  <div class="ms-Spinner ms-Spinner--large get-item-spinner">
-                    <div class="ms-Spinner-label">
-                      Loading...
-                    </div>
+      <div class="ms-Pivot-content" data-content="get-item">
+        <div class="ms-Grid">
+          <div class="ms-Grid-row">
+            <div class="ms-Grid-col ms-u-sm6">
+              <button class="ms-Button ms-Button--primary get-item-button is-disabled">
+                <span class="ms-Button-label">Get Item</span>
+              </button>
+            </div>
+            <div class="ms-Grid-col ms-u-sm6">
+                <div class="ms-Spinner ms-Spinner--large get-item-spinner">
+                  <div class="ms-Spinner-label">
+                    Loading...
                   </div>
-              </div>
+                </div>
             </div>
           </div>
-          <div class="code-box item-display">
-            <pre><code></code></pre>
-          </div>
         </div>
-        <div class="ms-Pivot-content" data-content="update-item">
-          <div class="ms-Dropdown change-dropdown">
-            <label class="ms-Label">Change current item:</label>
-            <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
-            <select class="ms-Dropdown-select change-select">
-              <option>Choose a change&amp;hellip;</option>
-              <option>Mark unread</option>
-              <option>Flag for followup</option>
-              <option>Apply category</option>
-            </select>
-          </div>
-          <div class="code-box update-display">
-            <pre><code>Choose a change...</code></pre>
-          </div>
-          <div class="ms-Grid">
-            <div class="ms-Grid-row">
-              <div class="ms-Grid-col ms-u-sm6">
-                <button class="ms-Button ms-Button--primary update-item-button is-disabled">
-                  <span class="ms-Button-label">Update Item</span>
-                </button>
-              </div>
-              <div class="ms-Grid-col ms-u-sm6">
-                  <div class="ms-Spinner ms-Spinner--large update-item-spinner">
-                    <div class="ms-Spinner-label">
-                      Loading...
-                    </div>
+        <div class="code-box item-display">
+          <pre><code></code></pre>
+        </div>
+      </div>
+      <div class="ms-Pivot-content" data-content="update-item">
+        <div class="ms-Dropdown change-dropdown">
+          <label class="ms-Label">Change current item:</label>
+          <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
+          <select class="ms-Dropdown-select change-select">
+            <option>Choose a change&amp;hellip;</option>
+            <option>Mark unread</option>
+            <option>Flag for followup</option>
+            <option>Apply category</option>
+          </select>
+        </div>
+        <div class="code-box update-display">
+          <pre><code>Choose a change...</code></pre>
+        </div>
+        <div class="ms-Grid">
+          <div class="ms-Grid-row">
+            <div class="ms-Grid-col ms-u-sm6">
+              <button class="ms-Button ms-Button--primary update-item-button is-disabled">
+                <span class="ms-Button-label">Update Item</span>
+              </button>
+            </div>
+            <div class="ms-Grid-col ms-u-sm6">
+                <div class="ms-Spinner ms-Spinner--large update-item-spinner">
+                  <div class="ms-Spinner-label">
+                    Loading...
                   </div>
-              </div>
+                </div>
             </div>
           </div>
         </div>
-        <div class="ms-Pivot-content" data-content="item-details">
-          <div class="diagnostics">
-            <table class="ms-Table">
-              <thead>
-                <tr>
-                  <th>Diagnostic field</th>
-                  <th>Value</th>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>hostName</td>
-                  <td class="hostname"></td>
-                </tr>
-                <tr>
-                  <td>hostVersion</td>
-                  <td class="hostversion"></td>
-                </tr>
-                <tr>
-                  <td>OWAView</td>
-                  <td class="owaview"></td>
-                </tr>
-              </tbody>
-            </table>
+      </div>
+      <div class="ms-Pivot-content" data-content="item-details">
+        <div class="diagnostics">
+          <table class="ms-Table">
+            <thead>
+              <tr>
+                <th>Diagnostic field</th>
+                <th>Value</th>
+            </thead>
+            <tbody>
+              <tr>
+                <td>hostName</td>
+                <td class="hostname"></td>
+              </tr>
+              <tr>
+                <td>hostVersion</td>
+                <td class="hostversion"></td>
+              </tr>
+              <tr>
+                <td>OWAView</td>
+                <td class="owaview"></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="token-view">
+          <div class="ms-font-xl">Access Token</div>
+          <div class="ms-Toggle">
+            <span class="ms-Toggle-description">Parse token</span>
+            <input type="checkbox" id="parse-token-toggle" class="ms-Toggle-input" />
+            <label for="parse-token-toggle" class="ms-Toggle-field" tabindex="0" >
+              <span class="ms-Label ms-Label--off">Off</span>
+              <span class="ms-Label ms-Label--on">On</span>
+            </label>
           </div>
-          <div class="token-view">
-            <div class="ms-font-xl">Access Token</div>
-            <div class="ms-Toggle">
-              <span class="ms-Toggle-description">Parse token</span>
-              <input type="checkbox" id="parse-token-toggle" class="ms-Toggle-input" />
-              <label for="parse-token-toggle" class="ms-Toggle-field" tabindex="0" >
-                <span class="ms-Label ms-Label--off">Off</span>
-                <span class="ms-Label ms-Label--on">On</span>
-              </label>
-            </div>
-            <div class="code-box token-display">
-              <pre><code>loading...</code></pre>
-            </div>
+          <div class="code-box token-display">
+            <pre><code>loading...</code></pre>
           </div>
-          <div class="resturl-view">
-            <div class="ms-font-xl">REST URL to item</div>
-            <div class="code-box resturl-display">
-              <pre><code>loading...</code></pre>
-            </div>
+        </div>
+        <div class="resturl-view">
+          <div class="ms-font-xl">REST URL to item</div>
+          <div class="code-box resturl-display">
+            <pre><code>loading...</code></pre>
           </div>
         </div>
+      </div>
     </div>
   </div>
 </body>
diff --git a/RestCaller/mobile/RestCaller-ios.css b/RestCaller/mobile/RestCaller-ios.css
new file mode 100644
index 0000000..b9d2740
--- /dev/null
+++ b/RestCaller/mobile/RestCaller-ios.css
@@ -0,0 +1,23 @@
+.content-main {
+  padding: 10px;
+}
+
+.code-box > pre {
+  background-color: #eaeaea;
+  border: 1px solid #ccc;
+  padding: 5px 10px;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.get-item-button, .update-item-button {
+  width: 100%;
+}
+
+.token-view {
+  margin-top: 10px;
+}
+
+.ms-Spinner {
+  display: none;
+}
\ No newline at end of file
diff --git a/RestCaller/mobile/RestCaller-ios.html b/RestCaller/mobile/RestCaller-ios.html
new file mode 100644
index 0000000..813ae75
--- /dev/null
+++ b/RestCaller/mobile/RestCaller-ios.html
@@ -0,0 +1,155 @@
+<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file. -->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+  <title></title>
+  <link rel="stylesheet" href="../../node_modules/framework7/dist/css/framework7.ios.min.css" />
+  <link rel="stylesheet" href="../../node_modules/framework7/dist/css/framework7.ios.colors.min.css" />
+
+  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
+  
+  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
+
+  <script src="../../node_modules/framework7/dist/js/framework7.min.js" type="text/javascript"></script>
+  
+  <script src="../../Scripts/jwt-decode.min.js" type="text/javascript"></script>
+
+  <link rel="stylesheet" href="RestCaller-ios.css" />  
+  <script src="..\RestCaller.js" type="text/javascript"></script>
+  <script src="RestCaller-ios.js" type="text/javascript"></script>
+</head>
+<body class="framework7-root">
+  <div class="views tabs toolbar-through">
+    <div id="get-item-view" class="view view-main tab active" data-page="get-item">
+      <div class="pages">
+        <div data-page="get-item" class="page">
+          <div class="page-content">
+            <div class="content-block-title">Get item</div>
+            <div class="content-block">
+              <p><a href="#" class="button get-item-button disabled">Get Item</a></p>
+              <div class="code-box item-display">
+                <pre><code></code></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="update-item-view" class="view tab" data-page="update-item">
+      <div class="pages">
+        <div data-page="update-item" class="page">
+          <div class="page-content">
+            <div class="content-block-title">Change current item</div>
+            <div class="list-block">
+              <ul>
+                <li>
+                  <div class="item-content">
+                    <div class="item-inner">
+                      <div class="item-input">
+                        <input type="text" placeholder="Choose a change" readonly id="change-picker">
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div class="content-block">
+              <div class="code-box update-display">
+                <pre><code>Choose a change...</code></pre>
+              </div>
+              <p><a href="#" class="button update-item-button disabled">Update Item</a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="item-details-view" class="view tab" data-page="item-details">
+      <div class="pages">
+        <div data-page="item-details" class="page">
+          <div class="page-content">
+            <div class="content-block-title">Diagnostic fields</div>
+            <div class="list-block">
+              <ul>
+                <li class="item-content">
+                  <div class="item-inner">
+                    <div class="item-title">hostName</div>
+                    <div class="item-after hostname"></div>
+                  </div>
+                </li>
+                <li class="item-content">
+                  <div class="item-inner">
+                    <div class="item-title">hostVersion</div>
+                    <div class="item-after hostversion"></div>
+                  </div>
+                </li>
+                <li class="item-content">
+                  <div class="item-inner">
+                    <div class="item-title">OWAView</div>
+                    <div class="item-after owaview"></div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div class="content-block-title">Access Token</div>
+            <div class="content-block">
+              <div class="item-title label">Parse token</div>
+              <div class="item-input">
+                <label class="label-switch">
+                  <input type="checkbox" id="parse-token-toggle">
+                  <div class="checkbox"></div>
+                </label>
+              </div>
+              <div class="code-box token-display">
+                <pre><code>loading...</code></pre>
+              </div>
+            </div>
+            <div class="content-block-title">REST URL to item</div>
+            <div class="content-block">
+              <div class="code-box resturl-display">
+                <pre><code>loading...</code></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="toolbar tabbar tabbar-labels">
+      <div class="toolbar-inner">
+        <a href="#get-item-view" class="tab-link">
+          <span class="tabbar-label">GET item</span>
+        </a>
+        <a href="#update-item-view" class="tab-link">
+          <span class="tabbar-label">PATCH item</span>
+        </a>
+        <a href="#item-details-view" class="tab-link">
+          <span class="tabbar-label">REST details</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+
+<!-- MIT License: 
+ 
+ Permission is hereby granted, free of charge, to any person obtaining 
+ a copy of this software and associated documentation files (the 
+ ""Software""), to deal in the Software without restriction, including 
+ without limitation the rights to use, copy, modify, merge, publish, 
+ distribute, sublicense, and/or sell copies of the Software, and to 
+ permit persons to whom the Software is furnished to do so, subject to 
+ the following conditions: 
+ 
+ The above copyright notice and this permission notice shall be 
+ included in all copies or substantial portions of the Software. 
+ 
+ THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND, 
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
\ No newline at end of file
diff --git a/RestCaller/mobile/RestCaller-ios.js b/RestCaller/mobile/RestCaller-ios.js
new file mode 100644
index 0000000..8085032
--- /dev/null
+++ b/RestCaller/mobile/RestCaller-ios.js
@@ -0,0 +1,214 @@
+$(document).ready(function() {
+  
+});
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file.
+
+(function () {
+  'use strict';
+
+  var myApp;
+
+  var rawToken = '';
+  var parsedToken = '';
+
+  var getItemSpinnerElement = null;
+  var getItemSpinner = null;
+  var updateItemSpinnerElement = null;
+  var updateItemSpinner = null;
+
+  var markUnreadPayload = { IsRead: false };
+  var flagFollowupPayload = { Flag: { FlagStatus: 'Flagged' } };
+  var applyCategoryPayload = { Categories: ['Red Category'] };
+
+  // The Office initialize function must be run each time a new page is loaded
+  Office.initialize = function (reason) {
+      $(document).ready(function () {
+          myApp = new Framework7();
+
+          var getItemView = myApp.addView('#get-item-view');
+          var getItemView = myApp.addView('#update-item-view');
+          var getItemView = myApp.addView('#item-details-view');
+
+          var changePicker = myApp.picker({
+            input: '#change-picker',
+            cols: [
+              {
+                textAlign: 'center',
+                values: [
+                  'Mark unread',
+                  'Flag for followup',
+                  'Apply category'
+                ]
+              }
+            ]
+          });
+
+          $('#change-picker').change(function() {
+            var newValue = $('#change-picker').val();
+            loadItemChangePayload(newValue);
+          });
+
+          $('#parse-token-toggle').change(function() {
+            loadToken($('#parse-token-toggle').is(':checked'));
+          });
+
+          $('.get-item-button').click(function() {
+            getItemViaRest();
+          });
+
+          $('.update-item-button').click(function() {
+            updateItemViaRest();
+          });
+
+          loadRestDetails();
+      });
+  };
+
+  function loadRestDetails() {
+    $('.hostname').text(Office.context.mailbox.diagnostics.hostName);
+    $('.hostversion').text(Office.context.mailbox.diagnostics.hostVersion);
+    $('.owaview').text(Office.context.mailbox.diagnostics.OWAView);
+
+    myApp.showPreloader();
+
+    var restId = '';
+    if (Office.context.mailbox.diagnostics.hostName !== 'OutlookIOS') {
+      // Loaded in non-mobile context, so ID needs to be converted
+      restId = Office.context.mailbox.convertToRestId(
+        Office.context.mailbox.item.itemId,
+        Office.MailboxEnums.RestVersion.Beta
+      );
+    } else {
+      restId = Office.context.mailbox.item.itemId;
+    }
+
+    // Build the URL to the item
+    var itemUrl = Office.context.mailbox.restUrl + 
+      '/api/beta/me/messages/' + restId;
+
+    $('.resturl-display code').text(itemUrl);
+    
+    Office.context.mailbox.getCallbackTokenAsync({isRest: true}, function(result){
+      myApp.hidePreloader();
+      if (result.status === "succeeded") {
+        rawToken = result.value;
+        loadToken($('#parse-token-toggle').is(':checked'));
+        enableButtons();
+      } else {
+        rawToken = 'error';
+      }
+    });
+  }
+
+  function loadToken(parseToken) {
+    var code = $('.token-display code');
+    if (rawToken === 'error') {
+      code.text('ERROR RETRIEVING TOKEN');
+      return;
+    }
+
+    if (parseToken) {
+      if (parsedToken === '') {
+        parsedToken = jwt_decode(rawToken);
+      }
+
+      code.text(JSON.stringify(parsedToken, null, 2));
+    } else {
+      code.text(rawToken);
+    }
+  }
+
+  function getItemViaRest() {
+    var itemUrl = $('.resturl-display code').text();
+
+    myApp.showPreloader();
+    
+    $.ajax({
+      url: itemUrl,
+      dataType: 'json',
+      headers: { 'Authorization': 'Bearer ' + rawToken }
+    }).done(function(item){
+      myApp.hidePreloader();
+      $('.item-display code').text(
+        JSON.stringify(item, null, 2)
+      );
+    }).fail(function(error){
+      myApp.hidePreloader();
+      $('.item-display code').text(JSON.stringify(error, null, 2));
+    });
+  }
+
+  function updateItemViaRest() {
+    var itemUrl = $('.resturl-display code').text();
+    var payload = $('.update-display code').text();
+
+    myApp.showPreloader();
+    
+    $.ajax({
+      type: 'PATCH',
+      url: itemUrl,
+      dataType: 'json',
+      data: payload,
+      headers: { 
+        'Authorization': 'Bearer ' + rawToken,
+        'Content-Type': 'application/json' 
+      }
+    }).done(function(item){
+      myApp.hidePreloader();
+      $('.update-display code').text(
+        JSON.stringify(item, null, 2)
+      );
+    }).fail(function(error){
+      myApp.hidePreloader();
+      $('.update-display code').text(JSON.stringify(error, null, 2));
+    });
+  }
+
+  function loadItemChangePayload(payloadName) {
+    $('.update-display code').text('loadpayload');
+    var payloadText = '';
+
+    switch(payloadName) {
+      case "Mark unread":
+        payloadText = JSON.stringify(markUnreadPayload, null, 2);
+        break;
+      case "Flag for followup":
+        payloadText = JSON.stringify(flagFollowupPayload, null, 2);
+        break;
+      case "Apply category":
+        payloadText = JSON.stringify(applyCategoryPayload, null, 2);
+        break;
+      default:
+        payloadText = "Choose a change..."
+    }
+
+    $('.update-display code').text(payloadText);
+  }
+
+  function enableButtons() {
+    $('.get-item-button').removeClass('disabled');
+    $('.update-item-button').removeClass('disabled');
+  }
+})();
+
+// MIT License: 
+ 
+// Permission is hereby granted, free of charge, to any person obtaining 
+// a copy of this software and associated documentation files (the 
+// ""Software""), to deal in the Software without restriction, including 
+// without limitation the rights to use, copy, modify, merge, publish, 
+// distribute, sublicense, and/or sell copies of the Software, and to 
+// permit persons to whom the Software is furnished to do so, subject to 
+// the following conditions: 
+ 
+// The above copyright notice and this permission notice shall be 
+// included in all copies or substantial portions of the Software. 
+ 
+// THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND, 
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
diff --git a/RestCaller/mobile/RestCallerMobile.html b/RestCaller/mobile/RestCallerMobile.html
new file mode 100644
index 0000000..1ea1df7
--- /dev/null
+++ b/RestCaller/mobile/RestCallerMobile.html
@@ -0,0 +1,38 @@
+<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file. -->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+  <title></title>
+  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
+  <script src="../../node_modules/framework7/dist/js/framework7.min.js" type="text/javascript"></script>
+  <script src="../../node_modules/urijs/src/URI.min.js" type="text/javascript" ></script>
+  <script src="RestCallerMobile.js" type="text/javascript"></script>
+</head>
+<body>
+  <h1>MOBILE DIFFERENTIATION PAGE</h1>
+</body>
+</html>
+
+<!-- MIT License: 
+ 
+ Permission is hereby granted, free of charge, to any person obtaining 
+ a copy of this software and associated documentation files (the 
+ ""Software""), to deal in the Software without restriction, including 
+ without limitation the rights to use, copy, modify, merge, publish, 
+ distribute, sublicense, and/or sell copies of the Software, and to 
+ permit persons to whom the Software is furnished to do so, subject to 
+ the following conditions: 
+ 
+ The above copyright notice and this permission notice shall be 
+ included in all copies or substantial portions of the Software. 
+ 
+ THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND, 
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
\ No newline at end of file
diff --git a/RestCaller/mobile/RestCallerMobile.js b/RestCaller/mobile/RestCallerMobile.js
new file mode 100644
index 0000000..c8e5ac1
--- /dev/null
+++ b/RestCaller/mobile/RestCallerMobile.js
@@ -0,0 +1,11 @@
+var isAndroid = Framework7.prototype.device.android === true;
+var isIos = Framework7.prototype.device.ios === true;
+
+if (isAndroid) {
+  alert('ANDROID SUPPORT COMING SOON');
+}
+
+if (isIos) {
+  var iosViewUrl = new URI('RestCaller-ios.html').absoluteTo(window.location).toString();
+  window.location.href = iosViewUrl;
+}
\ No newline at end of file
diff --git a/command-demo-manifest.xml b/command-demo-manifest.xml
index f030f84..9c0664a 100644
--- a/command-demo-manifest.xml
+++ b/command-demo-manifest.xml
@@ -1035,7 +1035,7 @@
                     <bt:Image size="48" scale="3" resid="green-icon-32" />
                   </Icon>
                   <Action xsi:type="ShowTaskpane">
-                    <SourceLocation resid="restTaskPaneUrl" />
+                    <SourceLocation resid="restMobileTaskPaneUrl" />
                   </Action>
                 </Control>
               </Group>
@@ -1064,6 +1064,7 @@
           <bt:Url id="readTaskPaneUrl" DefaultValue="https://localhost:8443/AllPropsView/AllProps.html"/>
           <bt:Url id="composeTaskPaneUrl" DefaultValue="https://localhost:8443/InsertTextPane/InsertText.html"/>
           <bt:Url id="restTaskPaneUrl" DefaultValue="https://localhost:8443/RestCaller/RestCaller.html"/>
+          <bt:Url id="restMobileTaskPaneUrl" DefaultValue="https://localhost:8443/RestCaller/mobile/RestCallerMobile.html"/>
         </bt:Urls>
         <bt:ShortStrings>
           <bt:String id="groupLabel" DefaultValue="Add-in Demo"/>
diff --git a/package.json b/package.json
index 7c4dfd7..edaef70 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,16 @@
 {
-  "name":"command-demo",
+  "name": "command-demo",
   "version": "0.1.0",
-  "scripts": {
-  },
+  "scripts": {},
   "devDependencies": {
     "chalk": "^1.1.1",
     "gulp": "^3.9.0",
     "gulp-webserver": "^0.9.1",
     "minimist": "^1.2.0",
     "xmllint": "git+https://github.com/kripken/xml.js.git"
+  },
+  "dependencies": {
+    "framework7": "^1.5.2",
+    "urijs": "^1.18.5"
   }
-}
\ No newline at end of file
+}