Merge pull request #522 from andrewconnell/fy2019q1-qarefresh-officea…

…ddin-05

FY2019 Q4 Scheduled quarterly refresh - Office Addins Module #5

OfficeAddin/05 Using modern JavaScript/Demos/01 Office Add-in using React/README.md

@@ -2,7 +2,11 @@
 
 This demo shows how to build and Office Add-in using React with TypeScript. In addition to Office.js, the demo uses the Office Fabric UI for styling and formatting the user experience.
 
-The finished solution is provided in this folder to simplify demonstrations. If you want to run the finished project, clone the repository, run **npm install**, then **npm run start** and follow the steps to [Sideload the Office Add-in](../../Lab.md#sideload-the-office-add-in).
+The finished solution is provided in this folder to simplify demonstrations. If you want to run the finished project, clone the repository, run **npm install**, then **npm run start** and follow one of these methods to sideload and test the Office Add-in.
+
+* Windows: [Sideload Office Add-ins on Windows](https://docs.microsoft.com/en-us/office/dev/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins)
+* Office Online: [Sideload Office Add-ins in Office Online](https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-office-add-ins-for-testing#sideload-an-office-add-in-on-office-online)
+* iPad and Mac: [Sideload Office Add-ins on iPad and Mac](https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-an-office-add-in-on-ipad-and-mac)
 
 ## Prerequisites
 
@@ -31,19 +35,15 @@ In this exercise, you will develop an Office Add-in using React and TypeScript.
     ```
 
 1. The Office Yeoman generator will ask a number of question. Use the following responses:
-    * Would you like to create a new subfolder for your project? **Yes**
+    * Choose a project type? **Office Add-in project using React framework**
     * What do you want to name your add-in? **Excel Portfolio**
     * Which Office client application would you like to support? **Excel**
-    * Would you like to create a new add-in? **Yes, I need to create a new web app and manifest for my add-in.**
-    * Would you like to use TypeScript? **Yes**
-    * Choose a framework: **React**
-    * For more information and resources on your next steps, we have created a resource.html file in your project. Would you like to open it now while we finish creating your project? **No**
 
     ![Office Yeoman Generator](../../Images/YeomanReact.png)
 
 1. When the Yeoman generator completes, change directories to the project folder and open the folder in your favorite code editor (you can use the command `code .` for [Visual Studio Code](https://code.visualstudio.com/)).
 
-    >Note: You should be able to run and sideload the add-in at this point. To do that, follow the steps outlined in [Sideload and Test the Office Add-in](#exercise-4-sideload-and-test-the-office-add-in). In the next section, you will add additional functionality to the add-in.
+    >Note: You should be able to run and sideload the add-in at this point. To do that, follow the steps outlined in [Sideload and Test the Office Add-in](../../Lab.md#exercise-4-sideload-and-test-the-office-add-in). In the next section, you will add additional functionality to the add-in.
 
 ### Develop the Office Add-in
 
@@ -221,7 +221,9 @@ In this exercise, you will develop an Office Add-in using React and TypeScript.
           waiting: false,
           error: ''
         };
-
+      }
+
+      componentDidMount() {
         // Sync stocks already in Excel table
         this.syncTable().then(() => {});
       }
@@ -296,7 +298,7 @@ In this exercise, you will develop an Office Add-in using React and TypeScript.
 
 1. Although the app's functionality isn't complete, the visual markup is. You can see it by saving all your work and returning to Excel Online. It should look similar to the following image.
 
-    > If you previously closed the Excel Online window or if your Office Online session has expired (the add-in doesn't seem to load), follow the [Sideload the Office Add-in](#exercise-4-sideload-and-test-the-office-add-in) steps.
+    > If you previously closed the Excel Online window or if your Office Online session has expired (the add-in doesn't seem to load), follow the [Sideload the Office Add-in](../../Lab.md#exercise-4-sideload-and-test-the-office-add-in) steps.
 
     ![Add-in with visual markup complete](../../Images/AddinVisual.png)
 
@@ -343,50 +345,49 @@ In this exercise, you will develop an Office Add-in using React and TypeScript.
 
         ```typescript
         // Create the StocksTable and defines the header row
-          createTable = async () => {
-            return new Promise(async (resolve, reject) => {
-              await Excel.run(async context => {
-                // Create a proxy object for the active worksheet and create the table
-                const sheet = context.workbook.worksheets.getActiveWorksheet();
-                const tableRef = sheet.tables.add(this.location, true);
-                tableRef.name = this.tableName;
-                tableRef.getHeaderRowRange().values = [this.headers];
-                return context.sync().then(() => {
-                  resolve(tableRef);
-                });
-              }).catch(createError => {
-                reject(createError);
+        createTable = async () => {
+          return new Promise(async (resolve, reject) => {
+            await Excel.run(async context => {
+              // Create a proxy object for the active worksheet and create the table
+              const sheet = context.workbook.worksheets.getActiveWorksheet();
+              const tableRef = sheet.tables.add(this.location, true);
+              tableRef.name = this.tableName;
+              tableRef.getHeaderRowRange().values = [this.headers];
+              return context.sync().then(() => {
+                resolve(tableRef);
               });
+            }).catch(createError => {
+              reject(createError);
             });
-          }
+          });
+        }
 
-          // Ensures the Excel table is created and tries to get a table reference
-          ensureTable = async (forceCreate: boolean) => {
-            return new Promise(async (resolve, reject) => {
-              await Excel.run(async context => {
-                // Create a proxy object for the active worksheet and try getting table reference
-                const sheet = context.workbook.worksheets.getActiveWorksheet();
-                const tableRef = sheet.tables.getItem(this.tableName);
-                return context.sync().then(() => {
-                  resolve(tableRef);
-                });
-              }).catch(() => {
-                if (forceCreate) {
-                  // Create a new table because an existing table was not found.
-                  this.createTable().then(
-                    async tableRef => {
-                      resolve(tableRef);
-                    },
-                    createError => {
-                      reject(createError);
-                    }
-                  );
-                } else {
-                  resolve(null);
-                }
+        // Ensures the Excel table is created and tries to get a table reference
+        ensureTable = async (forceCreate: boolean) => {
+          return new Promise(async (resolve, reject) => {
+            await Excel.run(async context => {
+              // Create a proxy object for the active worksheet and try getting table reference
+              const sheet = context.workbook.worksheets.getActiveWorksheet();
+              const tableRef = sheet.tables.getItem(this.tableName);
+              return context.sync().then(() => {
+                resolve(tableRef);
               });
+            }).catch(() => {
+              if (forceCreate) {
+                // Create a new table because an existing table was not found.
+                this.createTable().then(
+                  async tableRef => {
+                    resolve(tableRef);
+                  },
+                  createError => {
+                    reject(createError);
+                  }
+                );
+              } else {
+                resolve(null);
+              }
             });
-          }
+          });
         }
         ```
 
@@ -403,6 +404,7 @@ In this exercise, you will develop an Office Add-in using React and TypeScript.
                 await Excel.run(async context => {
                   const sheet = context.workbook.worksheets.getActiveWorksheet();
                   // Add the new row
+                  tableRef = sheet.tables.getItem(this.tableName);
                   tableRef.rows.add(null, [data]);
                   // Autofit columns and rows if your Office version supports the API.
                   if (Office.context.requirements.isSetSupported('ExcelApi', 1.2)) {
@@ -698,4 +700,4 @@ In this exercise, you will develop an Office Add-in using React and TypeScript.
     }
     ```
 
-The Excel Portfolio Add-in written with React and TypeScript is complete. You should now follow the steps to [Sideload and Test the Office Add-in](#exercise-4-sideload-and-test-the-office-add-in).
+The Excel Portfolio Add-in written with React and TypeScript is complete. You should now follow the steps to [Sideload and Test the Office Add-in](../../Lab.md#exercise-4-sideload-and-test-the-office-add-in).

OfficeAddin/05 Using modern JavaScript/Demos/01 Office Add-in using React/src/components/app.tsx

@@ -36,7 +36,9 @@ export default class App extends React.Component<AppProps, AppState> {
       waiting: false,
       error: ''
     };
+  }
 
+  componentDidMount() {
     // Sync stocks already in Excel table
     this.syncTable().then(() => {});
   }
@@ -130,7 +132,7 @@ export default class App extends React.Component<AppProps, AppState> {
           this.getQuote(symbol).then((res: any) => {
             // "last trade" is in column B with a row index offset of 2 (row 0 + the header row)
             this.tableUtil
-              .updateCell(`B${rowIndex + 2}:B${rowIndex + 2}`, res.current)
+              .updateCell(`B${rowIndex + 2}:B${rowIndex + 2}`, res['2. price'])
               .then(
                 async () => {
                   this.setState({ waiting: false });

OfficeAddin/05 Using modern JavaScript/Demos/01 Office Add-in using React/src/utils/ExcelTableUtil.tsx

@@ -62,6 +62,7 @@ export class ExcelTableUtil {
           await Excel.run(async context => {
             const sheet = context.workbook.worksheets.getActiveWorksheet();
             // Add the new row
+            tableRef = sheet.tables.getItem(this.tableName);
             tableRef.rows.add(null, [data]);
             // Autofit columns and rows if your Office version supports the API.
             if (Office.context.requirements.isSetSupported('ExcelApi', 1.2)) {

OfficeAddin/05 Using modern JavaScript/Demos/02 Office Add-in using Angular/README.md

@@ -2,7 +2,11 @@
 
 In this exercise, you will develop an Office Add-in using Angular and TypeScript. You will provision a new project using the Angular CLI and Office Yeoman generator, develop the add-in using Office.js, and test the add-in in Office Online.
 
-The finished solution is provided in this folder to simplify demonstrations. If you want to run the finished project, clone the repository, run **npm install**, then **npm run start** and follow the steps to [Sideload the Office Add-in](../../Lab.md#sideload-the-office-add-in).
+The finished solution is provided in this folder to simplify demonstrations. If you want to run the finished project, clone the repository, run **npm install**, then **npm run start** and follow one of these methods to sideload and test the Office Add-in.
+
+* Windows: [Sideload Office Add-ins on Windows](https://docs.microsoft.com/en-us/office/dev/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins)
+* Office Online: [Sideload Office Add-ins in Office Online](https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-office-add-ins-for-testing#sideload-an-office-add-in-on-office-online)
+* iPad and Mac: [Sideload Office Add-ins on iPad and Mac](https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-an-office-add-in-on-ipad-and-mac)
 
 ## Prerequisites
 
@@ -50,16 +54,22 @@ In this exercise, you will develop an Office Add-in using React and TypeScript.
     ```
 
 1. The Office Yeoman generator will ask a number of question. Use the following responses:
-    * Would you like to create a new subfolder for your project? **No**
+    * Choose a project type **Office Add-in containing the manifest only**
     * What do you want to name your add-in? **Excel Portfolio**
     * Which Office client application would you like to support? **Excel**
-    * Would you like to create a new add-in? **No, I already have a web app and only need a manifest file for my add-in**
-    * For more information and resources on your next steps, we have created a resource.html file in your project. Would you like to open it now while we finish creating your project? **No**
-    * Overwrite package.json? **n (do not overwrite)**
 
     ![Office Yeoman Generator](../../Images/YeomanAngular.png)
 
-1. When the Yeoman generator completes, open the project folder in a code editor (you can use the command `code .` for [Visual Studio Code](https://code.visualstudio.com/)).
+1. When the Yeoman generator completes, locate the **Excel Portfolio** folder and delete the following files:
+    * node_modules folder
+    * package.json
+    * package-lock.json
+
+1. Move all the remaining files/folders in the **Excel Portfolio** folder to the root of the **excel-portfolio** Angular project. The final project structure should look similar to this (subject to updates in Angular CLI):
+
+    ![Project Structure](../../Images/NgStructure.png)
+
+1. Open the **excel-portfolio** project folder in a code editor (you can use the command `code .` for [Visual Studio Code](https://code.visualstudio.com/)).
 
 1. Alter the `package.json` generated by the Angular CLI for Office Add-in specific requirements:
     1. Locate & open the **package.json** file in the root of the project.
@@ -134,7 +144,7 @@ In this exercise, you will develop an Office Add-in using React and TypeScript.
     };
     ```
 
-    >Note: You should be able to run and sideload the add-in at this point. Follow the steps outlined in [Sideload and Test the Office Add-in](#exercise-4-sideload-and-test-the-office-add-in). In the next section, you will add additional functionality to the add-in.
+    >Note: You should be able to run and sideload the add-in at this point. Follow the steps outlined in [Sideload and Test the Office Add-in](../../Lab.md#exercise-4-sideload-and-test-the-office-add-in). In the next section, you will add additional functionality to the add-in.
     >
     > If the add-in does not load an you eventually see an error message in the task pane, it's likely your workstation is not configured to trust the self-signed certificate used by the Angular CLI. Verify this by trying to navigate to https://localhost:3000/assets/icon-32.png and look at the browser's address bar. If it says something other than "secure", this is the issue as Office will not load add-ins from an unsecure / untrusted location. Refer to the steps in the following document to resolve this before proceeding: [Adding Self-Signed Certificates as Trusted Root Certificate](https://github.com/OfficeDev/generator-office/blob/master/src/docs/ssl.md).
 
@@ -347,12 +357,12 @@ In this exercise, you will develop an Office Add-in using React and TypeScript.
     }
     ```
 
-1. Although the app's functionality isn't complete, the visual markup is. You can see it by saving all your work and returning to Office Online. It should look similar to below. If you previously closed the Excel Online window or if your Office Online session has expired (the add-in doesn't seem to load), follow the [Sideload the Office Add-in](#exercise-4-sideload-and-test-the-office-add-in) steps above.
+1. Although the app's functionality isn't complete, the visual markup is. You can see it by saving all your work and returning to Office Online. It should look similar to below. If you previously closed the Excel Online window or if your Office Online session has expired (the add-in doesn't seem to load), follow the [Sideload the Office Add-in](../../Lab.md#exercise-4-sideload-and-test-the-office-add-in) steps above.
 
     ![Add-in with visual markup complete](../../Images/AddinVisual.png)
 
 1. The **app.component.ts** file has a number of placeholder functions that you will complete to get the add-in functioning.
-    1. Locate & open the **src/app/appcomponent.ts** file.
+    1. Locate & open the **src/app/app.component.ts** file.
     1. Add the following constant after the `import` statements and update the **{{REPLACE_WITH_ALPHAVANTAGE_APIKEY}}** to use your API key.
 
         ```typescript
@@ -468,6 +478,7 @@ In this exercise, you will develop an Office Add-in using React and TypeScript.
                 await Excel.run(async context => {
                   const sheet = context.workbook.worksheets.getActiveWorksheet();
                   // Add the new row
+                  tableRef = sheet.tables.getItem(this.tableName);
                   tableRef.rows.add(null, [data]);
                   // Autofit columns and rows if your Office version supports the API.
                   if (Office.context.requirements.isSetSupported('ExcelApi', 1.2)) {
@@ -700,7 +711,7 @@ In this exercise, you will develop an Office Add-in using React and TypeScript.
               if (rowIndex !== -1) {
                 this.getQuote(symbol).then((res: any) => {
                   // "last trade" is in column B with a row index offset of 2 (row 0 + the header row)
-                  this.tableUtil.updateCell(`B${rowIndex + 2}:B${rowIndex + 2}`, res.current)
+                  this.tableUtil.updateCell(`B${rowIndex + 2}:B${rowIndex + 2}`, res['2. price'])
                   .then(async () => {
                     this.waiting = false;
                   }, (err) => {

OfficeAddin/05 Using modern JavaScript/Demos/02 Office Add-in using Angular/src/app/app.component.ts

@@ -108,7 +108,7 @@ export class AppComponent {
         if (rowIndex !== -1) {
           this.getQuote(symbol).then((res: any) => {
             // "last trade" is in column B with a row index offset of 2 (row 0 + the header row)
-            this.tableUtil.updateCell(`B${rowIndex + 2}:B${rowIndex + 2}`, res.current)
+            this.tableUtil.updateCell(`B${rowIndex + 2}:B${rowIndex + 2}`, res['2. price'])
             .then(async () => {
               this.waiting = false;
             }, (err) => {

OfficeAddin/05 Using modern JavaScript/Demos/02 Office Add-in using Angular/src/app/utils/excelTableUtil.ts

@@ -62,6 +62,7 @@ export class ExcelTableUtil {
           await Excel.run(async (context) => {
             const sheet = context.workbook.worksheets.getActiveWorksheet();
             // Add the new row
+            tableRef = sheet.tables.getItem(this.tableName);
             tableRef.rows.add(null, [data]);
             // Autofit columns and rows if your Office version supports the API.
             if (Office.context.requirements.isSetSupported('ExcelApi', 1.2)) {