-
Notifications
You must be signed in to change notification settings - Fork 0
/
resource.html
145 lines (117 loc) · 16.2 KB
/
resource.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, inline-scale=1">
<title>Readme</title>
<style type="text/css">
body,main.steps{display:-webkit-flex;display:-ms-flexbox}body,main{position:relative}#slider,body{height:100%;overflow:hidden}html{background:#f1f1f1;height:100%}body{background:#fff;color:#505050;margin:0;padding:0;font:11pt "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Tahoma,sans-serif;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;-webkit-font-smoothing:antialiased}h1{font-size:30pt}h2{font-size:18pt}h3{font-size:11pt}main{-webkit-flex:2 0 auto;-ms-flex:2 0 auto;flex:2 0 auto;background-color:#fff}main.steps{-webkit-flex:6 0 auto;-ms-flex:6 0 auto;flex:6 0 auto;background-color:#EDEDED;margin-bottom:20px;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-top:solid 10px #da3b01}#slider,section.resources{display:-webkit-flex;display:-ms-flexbox}main>h2{padding:0 20px;font-weight:200;margin:0;}#buttons{padding:20px;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}#slider{color:#333;display:flex;width:100%;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}#slider .slide{-webkit-flex:0 0 calc(100% - 40px);-ms-flex:0 0 calc(100% - 40px);flex:0 0 calc(100% - 40px);width:calc(100% - 40px);padding:20px;display:none;height:calc(100% - 40px)}#slider .slide.active{display:block}#slider .slide h1{color:#da3b01;font-weight:200;margin:0 0 20px;padding:10px 0}#slider .slide p,#slider .slide pre{margin:20px 0 0;display:block}#slider .slide pre{font:11pt Consolas,Courier New,Courier,monospace;width:calc(100% - 40px);white-space:pre-line;padding:20px;background-color:#DDD;color:#333;line-height:16pt}#slider .slide pre span.comment{opacity:.7}#buttons button{font:11pt "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Tahoma,sans-serif;font-size:14px;font-weight:400;margin:0 10px 0 0;color:#EDEDED;border:none;outline:0;background-color:#da3b01;cursor:pointer;height:32px;min-width:80px;padding:4px 20px 6px}#buttons button:active,#buttons button:hover{background-color:#333!important;color:#f2f2f2!important}#buttons button:active{-webkit-transform:scale3d(.98,.98,.98);transform:scale3d(.98,.98,.98)}section.resources{padding:0;clear:both;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;height:100%}section.links{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1 1 250px;-ms-flex:1 1 250px;flex:1 1 250px;padding:20px;-webkit-align-items:center;-ms-flex-align:center;align-items:center}section.links h3{width:100%;text-transform:uppercase;margin:0 0 8px;border-bottom:1px solid silver;padding-bottom:12px}section.links img.circle{width:120px;height:120px;border-radius:100%;background-color:#EDEDED;margin:0 auto 20px}section.links.last{margin-right:0}ul{width:100%;list-style:none;padding:0;margin:0;line-height:20px}li{padding:4px 0}a{color:#da3b01;cursor:pointer;text-decoration:none}a:hover{text-decoration:underline}footer{background-color:#EDEDED;padding:0 20px;-webkit-flex:0 0 40px;-ms-flex:0 0 40px;flex:0 0 40px;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;width:calc(100% - 40px)}footer p{bottom:10px}body.excel main.steps{border-top:solid 10px #217346}body.excel #slider .slide h1,body.excel a{color:#217346}body.excel #buttons button{background-color:#217346}body.word main.steps{border-top:solid 10px #2b579a}body.word #slider .slide h1,body.word a{color:#2b579a}body.word #buttons button{background-color:#2b579a}body.powerpoint main.steps{border-top:solid 10px #b7462a}body.powerpoint #slider .slide h1,body.powerpoint a{color:#b7462a}body.powerpoint #buttons button{background-color:#b7462a}body.onenote main.steps{border-top:solid 10px #80397b}body.onenote #slider .slide h1,body.onenote a{color:#80397b}body.onenote #buttons button{background-color:#80397b}body.outlook main.steps{border-top:solid 10px #0173c7}body.outlook #slider .slide h1,body.outlook a{color:#0173c7}body.outlook #buttons button{background-color:#0173c7}body.project main.steps{border-top:solid 10px #31752f}body.project #slider .slide h1,body.project a{color:#31752f}body.project #buttons button{background-color:#31752f}
</style>
<script type="text/javascript"> var appInsights=window.appInsights||function(config){ function i(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s="AuthenticatedUserContext",h="start",c="stop",l="Track",a=l+"Event",v=l+"Page",y=u.createElement(o),r,f;y.src=config.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js";u.getElementsByTagName(o)[0].parentNode.appendChild(y);try{t.cookie=u.cookie}catch(p){}for(t.queue=[],t.version="1.0",r=["Event","Exception","Metric","PageView","Trace","Dependency"];r.length;)i("track"+r.pop());return i("set"+s),i("clear"+s),i(h+a),i(c+a),i(h+v),i(c+v),i("flush"),config.disableExceptionTracking||(r="onerror",i("_"+r),f=e[r],e[r]=function(config,i,u,e,o){var s=f&&f(config,i,u,e,o);return s!==!0&&t["_"+r](config,i,u,e,o),s}),t }({ instrumentationKey:"d2bb410e-0538-4893-bfb6-d43967d26559" }); window.appInsights=appInsights; appInsights.trackPageView("resource.html", "");</script>
</head>
<body class="Excel">
<main class="steps">
<section id="slider">
<article class="slide">
<section class="text">
<h1>Hey, oggyaddin is ready!</h1>
<p>Next steps:</p>
<pre>1. Host the add-in website.
2. Sideload your add-in.
3. Build your Excel Add-in using the <a target="_blank" href="https://dev.office.com/reference/add-ins/javascript-api-for-office" onclick="appInsights.trackEvent('linkClick_office-javascript-apis');return true;">Office JavaScript APIs</a>.</pre>
<p>For more information, choose <b>Next</b>.</p>
<p>You can also explore the links in the additional resources section.</p>
</section>
</article>
<article class="slide">
<h1>Host</h1>
<!--<p>Follow through the next steps or click on the additional resources to help you get started.</p>-->
<p>You can host your add-in locally or use any web server. Make sure that the add-in is served using HTTPS and
also update the add-in’s source location in the manifest. </p>
<p>To help you get started, we have included <b>browser-sync</b> for your convenience. To learn more about it, see
<a target="_blank" href="https://www.browsersync.io/" onclick="appInsights.trackEvent('linkClick_browsersync');return true;">browsersync.io.</a></p>
<pre>
<span class="comment"># To host the add-in using browser-sync, use the following command:</span>
npm start</pre>
<p>You will need to add the self-signed security certificate that npm creates as a trusted root certificate,
or your add-in will not display. You only need to do this once for all add-ins hosted this way.</p>
<pre>
<span class="comment"># To verify that the add-in is running, open your browser and go to the main page at:</span>
<a target="_blank" href="https://localhost:3000">https://localhost:3000</a></pre>
<p>
See <a target="_blank" href="https://github.com/OfficeDev/generator-office/blob/master/src/docs/ssl.md" onclick="appInsights.trackEvent('linkClick_ssl');return true;">our documentation</a> for information about adding the self-signed certificates.</p>
</article>
<article class="slide">
<h1>Sideload</h1>
<p>Load the add-in into Excel. The easiest way to do this is by sideloading the add-in in Excel Online:
</p>
<pre>1. Go to <a target="_blank" href="https://office.live.com/start/Excel.aspx?auth=2&nf=1" onclick="appInsights.trackEvent('linkClick_Excel-sideload-step1');return true;">Excel</a> and create a blank document.
2. Go to Insert > Office Add-ins.
<span class="comment"># On the My Add-ins tab (or My Organization tab if you're signed in to a work or school account),
# you'll see a link in the upper-right corner of the dialog box to Upload My add-in or Manage My Add-ins.</span>
3. Manage My Add-ins will open a menu where you can then choose <b>Upload My add-in</b>.
4. Choose <b>Browse</b> and select the manifest.xml file from the root of the project folder, and then choose <b>Upload</b>.
5. Your add-in will load in <a target="_blank" href="https://office.live.com/start/Excel.aspx?auth=2&nf=1" onclick="appInsights.trackEvent('linkClick_Excel-sideload-step5');return true;">Excel</a>.</pre>
<p>If you would like to sideload your add-in into the Excel desktop client, see our documentation for <a target="_blank"
href="https://dev.office.com/docs/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins" onclick="appInsights.trackEvent('linkClick_sideload-on-windows');return true;">sideloading
on Windows</a> or <a target="_blank" href="https://dev.office.com/docs/add-ins/testing/sideload-an-office-add-in-on-ipad-and-mac" onclick="appInsights.trackEvent('linkClick_sideload-on-mac-ipad');return true;">sideloading on iPad and Mac</a>.</p>
</article>
<article class="slide">
<section class="text">
<h1>Build</h1>
<p>Here's some advice for building a stellar add-in:</p>
<p>- Use the <a target="_blank" href="https://dev.office.com/docs/add-ins/design/ux-design-patterns" onclick="appInsights.trackEvent('linkClick_design-patterns');return true;">Design Patterns</a> to create a rich and immersive UI.</p>
<p>- Use the <a target="_blank" href="https://github.com/officedev/office-js-helpers" onclick="appInsights.trackEvent('linkClick_office-js-helpers');return true;">Office Helpers</a> to simplify Authentication, Storage management etc.</p>
<p>- Use the included <a target="_blank" href="https://github.com/officedev/office-addin-validator" onclick="appInsights.trackEvent('linkClick_office-addin-validator');return true;">Office Add-in Validator</a> to ensure your manifest.xml file is correct and complete. It will also give you information on against what platforms to test your add-in before submitting to the store.</p>
<pre><span class="comment"># To validate your manifest, use the following command in your project directory:</span>
$ npm run validate manifest.xml</pre>
<p>- Ensure your add-in works on all browsers and platforms that <a target="_blank" href="https://dev.office.com/add-in-availability">Office supports</a>.</p>
<p> For more information and resources to help you develop your add-in project, follow through the next steps
or click on the additional resources to help you get started.</p>
</section>
</article>
</section>
<section id="buttons">
<button id="next">Next</button>
<a id="previous">Back</a>
</section>
</main>
<main>
<h2>Additional resources</h2>
<section class="resources">
<section class="links">
<h3>Design & Develop</h2>
<ul>
<li><a target="_blank" href="https://dev.office.com/reference/add-ins/javascript-api-for-office" onclick="appInsights.trackEvent('linkClick_using-the-office-javascript-apis');return true;">Using the Office JavaScript APIs</a></li>
<li><a target="_blank" href="https://dev.office.com/docs/add-ins/design/ux-design-patterns" onclick="appInsights.trackEvent('linkClick_get-the-ux-design-templates');return true;">Get the UX Design Templates</a></li>
<li><a target="_blank" href="https://dev.office.com/docs/add-ins/design/add-in-design" onclick="appInsights.trackEvent('linkClick_best-practices-for-designing-office-addins');return true;">Best practices for designing Office Add-ins</a></li>
<li><a target="_blank" href="http://dev.office.com/fabric#/get-started" onclick="appInsights.trackEvent('linkClick_using-fabric');return true;">Using Fabric</a></li>
<li><a target="_blank" href="https://github.com/OfficeDev/office-js-helpers" onclick="appInsights.trackEvent('linkClick_using-the-office-javascript-api-helpers');return true;">Using the Office JavaScript API Helpers</a></li>
</ul>
</section>
<section class="links">
<h3>Debug & Test</h2>
<ul>
<li><a target="_blank" href="https://dev.office.com/docs/add-ins/get-started/create-an-office-add-in-using-any-editor#debugging-your-office-add-in" onclick="appInsights.trackEvent('linkClick_debug-addins');return true;">Debug add-ins</a></li>
<li><a target="_blank" href="https://dev.office.com/docs/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins" onclick="appInsights.trackEvent('linkClick_sideload-addins');return true;">Sideload add-ins</a></li>
<li><a target="_blank" href="https://dev.office.com/docs/add-ins/testing/troubleshoot-manifest" onclick="appInsights.trackEvent('linkClick_validate-your-manifest');return true;">Validate your manifest</a></li>
</ul>
</section>
<section class="links">
<h3>Deploy & Publish</h2>
<ul>
<li><a target="_blank" href="https://dev.office.com/docs/add-ins/publish/host-an-office-add-in-on-microsoft-azure" onclick="appInsights.trackEvent('linkClick_deploy-your-addin-to-azure');return true;">Deploy your add-in to Azure</a></li>
<li><a target="_blank" href="https://msdn.microsoft.com/en-us/library/office/jj591603.aspx#Anchor_0" onclick="appInsights.trackEvent('linkClick_prepare-for-office-store-validation');return true;">Prepare for Office store validation</a></li>
<li><a target="_blank" href="https://msdn.microsoft.com/en-us/library/office/jj220037.aspx" onclick="appInsights.trackEvent('linkClick_publish-your-office-addin-to-the-store');return true;">Publish your Office add-in to the store</a></li>
</ul>
</section>
</section>
</main>
<footer>
<p>We would love to hear your <a target="_blank" href="https://github.com/OfficeDev/generator-office/issues/new" onclick="appInsights.trackEvent('linkClick_feedback');return true;">feedback</a>.</p>
</footer>
<script type="text/javascript">
!function () { "use strict"; function a() { function h() { for (var a = f; a >= e; a--)if (b.item(a).classList.contains("active")) return console.log("active:", a), a; return console.log("active:", e), b.item(e).classList.add("active"), e } function i(a) { a === e ? (d.style.display = "none", c.style.display = "inline") : a === f ? (c.style.display = "none", d.style.display = "inline") : (c.style.display = "inline", d.style.display = "inline") } function j(a) { var c = a + 1; return c >= f && (c = f), console.log(a, "->", c, "|", f), b.item(a).classList.remove("active"), b.item(c).classList.add("active"), c } function k(a) { var c = a - 1; return c <= e && (c = e), console.log(a, "->", c, "|", e), b.item(a).classList.remove("active"), b.item(c).classList.add("active"), c } var a = document.querySelector("#slider"), b = a.children, c = document.querySelector("#next"), d = document.querySelector("#previous"), e = 0, f = b.length - 1, g = h(); i(g), c.addEventListener("click", function () { var a = h(); a = j(a), b.item(a).classList.add("active"), i(a) }), d.addEventListener("click", function () { var a = h(); a = k(a), b.item(a).classList.add("active"), i(a) }) } document.onreadystatechange = function () { "interactive" == document.readyState && a() } } ();
</script>
</body>
</html>