-
Notifications
You must be signed in to change notification settings - Fork 0
/
resource.html
145 lines (115 loc) · 15.6 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="Outlook">
<main class="steps">
<section id="slider">
<article class="slide">
<section class="text">
<h1>Hey, Mark Single Unread is ready!</h1>
<p>Next steps:</p>
<pre>1. Host the add-in website.
2. Sideload your add-in.
3. Build your Outlook 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 Outlook. 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 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>
</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>