Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
146 lines (117 sloc) 16.4 KB
<!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, ExceLint 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>webpack-dev-server</b> for your convenience. To learn more about it, see the documentation
<a target="_blank" href="https://webpack.js.org/configuration/dev-server/" onclick="appInsights.trackEvent('linkClick_webpackdevserver');return true;">here.</a></p>
<pre>
<span class="comment"># To host the add-in using webpack-dev-server, 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>
You can’t perform that action at this time.