add ribbon button that opens the taskpane

OfficeDev · Jan 17, 2019 · bfa882f · bfa882f
1 parent f4e1291
commit bfa882f
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 4 deletions.
diff --git a/manifest.xml b/manifest.xml
@@ -20,17 +20,66 @@
   </DefaultSettings>
   <Permissions>ReadWriteDocument</Permissions>
   <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
+    <Hosts>
+      <Host xsi:type="Workbook">
+        <DesktopFormFactor>
+          <GetStarted>
+            <Title resid="Contoso.GetStarted.Title"/>
+            <Description resid="Contoso.GetStarted.Description"/>
+            <LearnMoreUrl resid="Contoso.GetStarted.LearnMoreUrl"/>
+          </GetStarted>
+          <FunctionFile resid="Contoso.Ribbon.Url" />
+          <ExtensionPoint xsi:type="PrimaryCommandSurface">
+            <OfficeTab id="TabHome">
+              <Group id="Contoso.Group1">
+                <Label resid="Contoso.Group1Label" />
+                <Icon>
+                  <bt:Image size="16" resid="Contoso.tpicon_16x16" />
+                  <bt:Image size="32" resid="Contoso.tpicon_32x32" />
+                  <bt:Image size="80" resid="Contoso.tpicon_80x80" />
+                </Icon>
+                <Control xsi:type="Button" id="Contoso.TaskpaneButton">
+                  <Label resid="Contoso.TaskpaneButton.Label" />
+                  <Supertip>
+                    <Title resid="Contoso.TaskpaneButton.Label" />
+                    <Description resid="Contoso.TaskpaneButton.Tooltip" />
+                  </Supertip>
+                  <Icon>
+                    <bt:Image size="16" resid="Contoso.tpicon_16x16" />
+                    <bt:Image size="32" resid="Contoso.tpicon_32x32" />
+                    <bt:Image size="80" resid="Contoso.tpicon_80x80" />
+                  </Icon>
+                  <Action xsi:type="ShowTaskpane">
+                    <TaskpaneId>ButtonId1</TaskpaneId>
+                    <SourceLocation resid="Contoso.Taskpane.Url" />
+                  </Action>
+                </Control>
+              </Group>
+            </OfficeTab>
+          </ExtensionPoint>
+        </DesktopFormFactor>
+      </Host>
+    </Hosts>
     <Resources>
       <bt:Images>
         <bt:Image id="Contoso.tpicon_16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
         <bt:Image id="Contoso.tpicon_32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
         <bt:Image id="Contoso.tpicon_80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
       </bt:Images>
       <bt:Urls>
-        <bt:Url id="Contoso.Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
+        <bt:Url id="Contoso.GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812" />
+        <bt:Url id="Contoso.Ribbon.Url" DefaultValue="https://localhost:3000/ribbon.html" />
+        <bt:Url id="Contoso.Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html" />
       </bt:Urls>
-      <bt:ShortStrings>&#xD;
-			</bt:ShortStrings>
+      <bt:ShortStrings>
+        <bt:String id="Contoso.GetStarted.Title" DefaultValue="Get started with your sample add-in!" />
+        <bt:String id="Contoso.Group1Label" DefaultValue="Commands Group" />
+        <bt:String id="Contoso.TaskpaneButton.Label" DefaultValue="Show Taskpane" />
+      </bt:ShortStrings>
+      <bt:LongStrings>
+        <bt:String id="Contoso.GetStarted.Description" DefaultValue="Your sample add-in loaded succesfully. Go to the HOME tab and click the 'Show Taskpane' button to get started." />
+        <bt:String id="Contoso.TaskpaneButton.Tooltip" DefaultValue="Click to Show a Taskpane" />
+      </bt:LongStrings>
     </Resources>
   </VersionOverrides>
 </OfficeApp>
diff --git a/src/ribbon/ribbon.html b/src/ribbon/ribbon.html
@@ -0,0 +1,18 @@
+<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. -->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+
+    <!-- Office JavaScript API -->
+    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.debug.js"></script>
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/src/ribbon/ribbon.ts b/src/ribbon/ribbon.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
+ * See LICENSE in the project root for license information.
+ */
+
+(() => {
+  // The initialize function must be run each time a new page is loaded
+  Office.initialize = () => {
+
+  };
+
+  // Add any ui-less function here
+})();
diff --git a/webpack.config.js b/webpack.config.js
@@ -9,7 +9,8 @@ module.exports = (env, options) => {
   const config = {
     devtool: "source-map",
     entry: {
-        taskpane: "./src/taskpane/taskpane.ts"
+      taskpane: "./src/taskpane/taskpane.ts",
+      ribbon: "./src/ribbon/ribbon.ts"
     },
     resolve: {
       extensions: [".ts", ".tsx", ".html", ".js"]
@@ -39,6 +40,11 @@ module.exports = (env, options) => {
         template: "./src/taskpane/taskpane.html",
         chunks: ["taskpane"]
       }),
+      new HtmlWebpackPlugin({
+        filename: "ribbon.html",
+        template: "./src/ribbon/ribbon.html",
+        chunks: ["ribbon"]
+      }),
       new webpack.ProvidePlugin({
         Promise: ["es6-promise", "Promise"]
       })