-
Notifications
You must be signed in to change notification settings - Fork 205
/
resource.html
164 lines (131 loc) · 17.4 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!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:"c36e2c25-f461-482c-9ead-bebc91e8b58b" }); window.appInsights=appInsights; appInsights.trackPageView();</script>
</head>
<body class="<%= hostInternalName %>">
<main class="steps">
<section id="slider">
<article class="slide">
<section class="text">
<h1>Hey, <%= projectDisplayName %> is ready!</h1>
<p>Next steps:</p>
<pre>1. Host the add-in website.
2. Sideload your add-in.
3. Build your <%= host %> 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>
<% if (host === 'Outlook') { %>
<%# Outlook-specific steps go here %>
<p>Load the add-in into <%= host %>. The easiest way to do this is by sideloading the add-in using the in-client Office Store UI.</p>
<pre>1. Open the Office Store, either in Outlook 2016 for Windows or Outlook on the web:
- In Outlook 2016 for Windows, choose the <b>Store</b> button on the <b>Home</b> tab.
- In Outlook on the web, choose the gear icon in the upper-right corner, then choose <b>Manage integrations</b>.
2. Click the text <b>Click here to add a custom add-in.</b>
3. Choose <b>Add from file...</b>.
4. Browse to and select the <%= projectInternalName %>-manifest.xml file from the root of the project folder, and then choose <b>Open</b>.
5. Review the warning prompt and choose <b>Install</b>.
6. Close the Office Store window. Your add-in will load in <a target="_blank" href="https://office.live.com/start/Outlook.aspx?auth=2&nf=1" onclick="appInsights.trackEvent('linkClick_outlook-sideload');return true;">Outlook</a>.
</pre>
<% } else { %>
<%# Other Office apps steps go here %>
<p>Load the add-in into <%= host %>. The easiest way to do this is by sideloading the add-in in <%= host %> Online:
</p>
<pre>1. Go to <a target="_blank" href="https://office.live.com/start/<%= host %>.aspx?auth=2&nf=1" onclick="appInsights.trackEvent('linkClick_<%= host %>-sideload-step1');return true;"><%= host %></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 <%= projectInternalName %>-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/<%= host %>.aspx?auth=2&nf=1" onclick="appInsights.trackEvent('linkClick_<%= host %>-sideload-step5');return true;"><%= host %></a>.</pre>
<p>If you would like to sideload your add-in into the <%= host %> 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>
<pre>● 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.
● 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.
● 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.
<span class="comment"># To validate your manifest, use the following command in your project directory:</span>
$ npm run validate <%= projectInternalName %>-manifest.xml</pre>
<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>