Make Friends and Influence People by Building Office Add-ins
Ayers, Bill
If you ever built, or considered building an application for Office you are probably familiar with Visual Studio Tools for Office (VSTO). Now, beginning with the 2013 iteration we have moved to the "Add-in model" for Office applications and that is a good thing. Now we can use our front-end web development skills to deliver Office Add-ins. In this session we will build solutions that will give our Office users tools that can take advantage of the new APIs along with other endpoints integrated into the environment they use every day. Learn how to build Office Add-ins using the same skills we use for SharePoint, web development, Windows and mobile apps, and use the power of the Office 365 platform and the web to deliver contextually relevant information. Deliver solutions that can be used on Windows, iOS and soon Android and MacOS devices. Deliver a huge amount of business value with surprisingly little effort.
 So, welcome everybody to this session on making friends and influencing people by building office add-ins. Now, I must admit I made a slight mistake in, I was kind of thinking of this book, How to Win Friends and Influence People by Dale Carnegie. Dale wrote this book in about the 20s to help people like me who don't like making a small talk too much. I'm very happy to talk to a group of like-minded people. But he gave lots of tips about how to deal with people and how to make friends and influence people. And that's kind of what I was thinking. I got the title slightly wrong. It was late, late at night, and we do our best. So one of the things about office add-ins, I think it's a great way of having a lot of impact if you're a developer and you're surrounded by business people. So when I worked at one point for a large computer company with a three-letter name, who would sit in an office and sort of open plan office and business people would wander in and they'd sort of sit there and not talk to you. We'd be working away on the global whatever it was that we were trying to build. And we wouldn't have much interaction with them. And then at some point somebody would come up and say, hello, I'm Joe Smith. I'm the global head of sales for Earth and the inner planets. And what are you doing? And you'd say what you were doing and cut you off fairly quickly and say, oh, do you know anything about printers? And so you go and fix the printer jam for them and then you wouldn't hear from them again. And so you want to be able to do things to help people in the business world. And I think this is, office add-ins is a great way of helping people solve business problems, particularly in those industries where you perhaps a business has grown very quickly and you've got a lot of manual processes that have just, you know, the business has grown too fast for them to keep up. And so people are copying and pasting things in emails from into Word or Excel or something like that. And you get those sort of the people that cluck when you ask them what they're doing. What are you doing? And I'm copying this from, I have to go into the email and take this number out and paste it in here. I've got this on a post-it note and so on. So it's great for solving those kinds of problems. So my name is Bill Ayers. My background is in SharePoint and Office 365. So this really sort of comes into our area as well because it's all to do with talking, particularly to some of these back-end systems in Office 365. We'll talk about some of the APIs very briefly later on. But I also work in mobile and agile development as well. So this is, to me, this is another way of surfacing our applications and our content but inside Office and using that as the delivery platform, such as say on a mobile you might use an HTML5 hybrid app. Okay, I'm giving away slightly how the technology works. So I'll talk a little bit about the background. I'll then look at some of the different Office add-in shapes, the different options that we've got. We'll talk about building Office add-in. So that's going to be the main thrust of the talk is how we're going to build them. We'll talk about the distribution as well because that's important as well, particularly if you want to sort of commercially use it as not just internally but to make a commercial product. And then we'll draw some conclusions. I hope that you'll be able to go away with some ideas and think over the weekend of how you could apply this kind of thing. So Office is everywhere now. And the numbers that we have now for Office installations is 1.2 billion, like that word billion. It reminds me of Carl Sagan. If anybody remembers that series he did talking about how small we are in the universe that we're one of a billion galaxies. So your Office installation is one of the billions of Office installations. 1.2 billion Office users. There's another 0.4 billion, another 400 million who are using things like Outlook.com and you can eventually sort of bring that into the mix as well. So there's a huge number of people that we can reach using this technology. And then mobile devices as well. So Office has now reached out into mobile devices. It runs on all these platforms, iOS, Android, OS X, Windows Mobile, anybody? Windows Phone. Don't laugh, please. Listen, Windows Phone is a survivor. Back in the 90s it was Windows Mobile, Windows CE, and there were all these other platforms that don't exist anymore. iOS and Android have come along fairly recently. So maybe in 10 years time, Windows Phone will still be around and these other things will have disappeared. Who knows? Anything can happen in the mobile world. But anyway, whatever happens, Office is going to be available on these different platforms. And the vision from Microsoft's perspective is they want to give a native look and feel to the add-ins so that they look as though they're part of the hosting application, if it's Word, Excel, PowerPoint and so on. It looks as though it's part of that application. And there are some tools to help you do that very easily. The idea is also write ones, run everywhere. We've heard that dream before and we've all chased that unicorn. I think there's only one technology that I know that can achieve that or get close to it. So it will be no surprise when we look at how this thing works. And it's really coming up with business solutions. It's something that works really well as well as creating applications that you can sell. It's a really good technology for creating something to solve a specific problem. Now there have been a few ways of doing this in the past. I remember, say, 10, 20 years ago, we'd have Visual Basic for applications and macros. I remember business people saying, oh, we're using VBA. I've written this thing. I know this macro works in this spreadsheet. I don't see that so much nowadays. I don't know about everybody else, but it feels like users are less inclined to build anything and do that kind of thing. I think maybe as we've reached all out to these billions of users, we've got to the stage where really everybody's using a computer. Before there were people who are specializing a little bit in computers and now everybody's using them. And so we see people who really have no clue as to how the computer works and no inclination to write macros and so forth. So if anything, the need for our development skills increases as we move forward and more and more people use these Office applications. So then we had COM and we had Visto, Visual Studio Tools for Office. I remember looking at this probably about 10 years ago. I must admit I don't remember much about it, but it seemed to work very well. It was an API. But the problem is these things aren't portable across all these different platforms. So the question is, how can we get add-ins that will run on all these different platforms where Office is running? And so the solution is the new Office add-in model. Now just a word of warning, you will see in some documentation still, they're called Office apps. Same thing, name change. So the thinking behind this was, as I understand it, that things like Word and Excel, people view those as apps. And so it would be confusing to have an app running inside an app. So the phrase add-in or the term add-in has been used to describe these. And you will see when we look in Visual Studio, for example, some of the tooling there hasn't quite caught up with that slight terminology change yet. But it's Office add-ins, and if you're a SharePoint developer, you'll know that we've also moved to SharePoint add-ins rather than the SharePoint app model as we briefly learned to call it. So the mechanism that it uses, as I say, the one thing that does seem to have some hope of giving you cross-platform right once run everywhere is using web technologies. So there's an embedded web control, the web extensibility framework, this thing that runs inside the Office clients. And remember, there's also the web applications for Office as well. And the one in the client applications, the native ones, it acts very much like an iframe that you're running your application inside. In the case of the web applications, it is actually an iframe. And then there's a JavaScript library called Office.js, which then allows you to reach out into the host application and do things. Obviously, it's sandboxed to an extent to stop anything bad happening, but it allows you to reach out and get to the content of whatever the host application is running. And that sort of that reaches out into the application. And then also, you can use APIs, of course, like REST to call back to some external system as well, including Office 365. So hosted centrally, so there's a, it is literally a web application that's running inside that frame. And the thinking there is, you know, if you already know web development, which is most people, then you can build these Office add-ins. And you don't have to use Microsoft technologies necessarily to do that. We'll show some ways that we can use Visual Studio to build those, but you could build it using whatever technology you could use Ruby on Rails or Node.js. If you wanted to, you might have to do a little bit of the provisioning yourself, but you could use whatever web technology you're familiar with to build the add-ins. So I think it's very appealing to a very large number of people. I think it's got a terrific reach as a technology to deliver this. So here's an example of an add-in running in Microsoft Office in Outlook. So the bit that the add-in, I don't know if you can see my pointer is this bit here is the actual add-in. But in the case of Outlook, you get these drop-downs, effectively, which can come in. And they're sort of contextual, so there are some rules we'll see a bit more about this later that say when these things appear and when we can use them and so on. And those are available running on a wide range of systems, of platforms. It's not yet complete, so we'll see a matrix of where we've got to so far in terms of which platforms are supported. It is gradually improving. Now, I thought since I was in Outlook, in PowerPoint anyway, I do a little demo here using PowerPoint. Now, this is a little bit risky because I'm going to just duplicate my screen for a minute. Right. And I'm going to actually close this. It's always scares me doing this, is to close the PowerPoint presentation that I'm using. And I've got an instance of Visual Studio here, and I'm just going to run it. And that will actually start at PowerPoint. So I'm back here. Let's just get rid of that. We don't need it. And get to roughly where we were in the deck, which is there. And what I can do is I can, can everybody see this all right? Is that visible at the back? Should I zoom in for you? So if I go to Store, for example, then there are, so these are the ones that are available in the Microsoft Store. And there's a pretty decent array of different things you can add in here. And a lot of them are free as well. Some of them are paid for. So there is a sort of a market. So I can add this stock tile. In fact, you can see that I've already used this earlier. But I'm going to add this one, which is the one that I just built with Visual Studio a few moments ago, a bit earlier. And I'll just expand that to fit a little. And what I can do is in here, I can say take a bit of text there. And the add-in will reach out to it and take whatever the selector text is and show it down there. And then when I show this full screen as if I was doing a presentation, then it's all there. And actually, interestingly, some of these things are actually clickable as well. The only thing I can't do is I can't get the data from the selection, because I have no way of getting it to selection when I'm in display mode. Anyway, that's not a very exciting, not very interesting. In fact, if we look at what's going on behind the scenes here, I'll just make that slightly larger. If you're a web developer, you probably don't think this is very interesting at all. It's just a normal web page. Very simple. We've got a bit of text here. And then there's a JavaScript file behind it. And this is the key thing. So remember, I mentioned OfficeJS. This initialized method is what we call in OfficeJS, or what gets called when the add-in starts up. And all it's doing is it's getting that particular element in the HTML and adding a click handler. And then down here, this is the click handler. And it's grabbing that content and displaying it in an alert at the bottom of the page. And I can make it maybe a little bit more interesting. Let's drag an image into here. And just remember to save it. And if I go, I can actually get at this, add in, reload it. And that looks marginally more interesting. So I can just sort of develop it as I go. So it's very easy to, you can imagine, you can start doing more interesting things with it pretty easily because you're just using the same web technology. You can use any JavaScript library you like. So we could use something like D3JS, for example, to make some attractive graphics. And we've got all of those options available to us. So I'm going to shut this one down and go back to the, no, let's not do that. Let's do it this way. I think that's safer. Stop that. And go back to my slide deck. The one that's just running at not as, I don't want to confuse matters by having it running as a process in Visual Studio. Right. So here's another example that this one's running in iPad, on an iPad in Excel. And I've no doubt that you have to pay Dun and Bradstreet to gather all this information, but you have a way of getting lists of companies that you want to send emails to or whatever. You know, we do a bit of market analysis. So that's probably a paid one, but that's going to work across all the different platforms that are supported. So behind the scenes, what's happening is there's an XML manifest file. And depending on what type of ad in it is, you will see a slight differentiation between the two broad categories of ad in. There's the ones that are using Outlook and the ones that are using the other applications like Word, Excel, PowerPoint. Broadly, my understanding is it's the exchange team which are behind the Outlook ad in and the rest of the office team are behind the others. So there's a slight difference. We'll see some of the capabilities and the way they handle things. And they're doing a slightly different job as well. But depending on what it is, this manifest file can be stored in exchange. It can be installed in a SharePoint catalog. You can have a file share and put it there. And that essentially says, here's where the website is that I want you to show inside there. So that has a link to that website. And that can be hosted anywhere. So it can be hosted in Azure. It could be hosted on-premises or in some other cloud service, whatever you want to use as long as you can address it from a URL in that XML manifest file. And then what the ad in does is it renders in the page. Whatever is on that website will appear in there. And the logic could be client-side JavaScript or it could be server-side. So you can use either. So let's look at some of the different ad-in shapes that are available. So the first one we'll talk about is the Outlook one. So that's where you've got a mail message or an appointment. You can launch this sort of drop-down panel that appears in the main pane of Outlook. There's another category which is called a task pane which appears at the side of an application like Word or PowerPoint. So it's similar to some of the task panes that you can get when you use Visto, for example, when you build add-ins that way. And then there's the document content add-in. So the content add-ins are something that you're going to put inside the content of the application. So the one we just played with just now was a content add-in. And finally, we've got a new thing that's just come in fairly recently which is these command add-ins which allow you to add something to the user interface so you can have a button in the ribbon that will launch a task pane or potentially just execute a bit of JavaScript silently behind the scenes. So we'll look at these in turn. So the mail add-in, I'm going to show an example of this later where we've got one which I'll just look at the source code of because I know it'll be interesting which is going to add into Outlook. So this one's called Reactor. And then when you click on things, it will analyze the text of the message and make a decision about what the content is and give you sort of an automated response. It's quite good fun. So that's a mail add-in. The task pane add-in, some examples are in PowerPoint, you might want to pull in some images or do an image search. There's one here for PayPal. I've done one for invoicing in Excel. So these are just add-ins that you can get in the store. There's a dictionary add-in in Word documents. Now, interestingly, if you download that or look at it, you'll find that the reviews aren't that good. I think the problem there is that users have maybe, because they're used to having a built-in dictionary in Word and they make a comparison. So you've got to be a little bit careful that when you're designing something, you make it consistent with what people are used to. People don't like change. Your average office user, I think, probably doesn't like to see jarring change. And possibly, I'm not sure whether that's something that the users of that don't or some users don't like when they use these various dictionary add-ins. Here's one for giving you an Uber ride reminder. So these are third-party ones. Some examples of content add-ins. So this one is called Bubbles. And you could select some data, and it'll give you a sort of bubble chart. You can imagine you could build something like this very simply using one of these many JavaScript libraries and just using normal client-side web development techniques. You could come up with something very nice. There's one for adding polls to your PowerPoint deck. There's an example here of adding geographic information. So in this case, they're using Bing Maps. It could just as easily be using Google Maps. So you can use anything that we can get to on the web we can make use of. And then adding commands. Here's a nice one. You can launch boomerang or Evernote directly from the ribbon. Now, these are a little bit newer. So unless you've got the latest preview update of Visual Studio, you'll have to do a little bit of work in the manifest file to add the control to do that. The best way is probably to take one of these bits of sample code and use that. But the preview, I believe, now supports this. So you can use the various tooling that's built in Visual Studio. Now if you look at the roadmap of the add-ins and what's available for which platform, you can see that it's not yet complete. And I would predict that there's a conference coming up in the end of April, beginning of May build. I wouldn't be surprised if we got quite a few announcements and we got a few more platform supported. Perhaps some of these coming soon, we would hope that that's probably, I would guess, the sort of timeframe we're talking about. But that's purely my speculation. But you might interpret that as saying, well, it looks as though they're moving across this chart from left to right. And I think that's probably a reasonable assumption. And I think they're driven by which of these platforms are the most popular. And you'll notice that the Universal Windows app is sort of the last of the ones that they're going for in that list. So they're prioritizing supporting iPhone, Mac, and Android users. So I guess they're seeing that as where the majority of the users are at the moment. So it's interesting that this is a different Microsoft that we might have seen 10 years ago where they would have possibly used the success of Office to try and promote the Universal Windows app approach. But of course, as long as we've got the online, the web applications, we can potentially run these on any platform because just about everything will support the web interface. So we can use, even though there isn't a native version of Excel for Mac, you can still use the Excel web application on a Macintosh. And you can still use the add-ins. Or you can use it on Macintosh anyway. But you can use the Excel, the add-in on a Macintosh using the web app. And then Office.js has many functions. There's a link here, which I'll maybe we should just have a quick look at, which is to all the different APIs that are available. It's quite comprehensive. But the documentation is very good. So if I just jump over, actually, if I just bring this up, there's quite a nice thing. There's the main documentation, of course, but there's quite a nice graphical. So that's a sort of, you can zoom this thing in, which I quite like. And you can see which of the various APIs is available for which platform as well. So you can get the big picture. And I expect that, if anything, to get denser and denser over time as more and more features are released. They've got a large team of people working on this. So there are many developers working on extending these Office applications. Back to my slides for a moment. So that gives you, it's the Office.js that gives you the access to the content of the document, whether it's an Excel spreadsheet or a word, or if it's a message, allows you to get things like attachments. There's a limited amount of things you can do directly with that. And then if you can't do it using Office.js, then you can make a REST call out into Office 365, for example, and do it that way. So as you start to think about it, the possibilities are pretty much endless of what you could potentially do using this sort of approach. So we've got a number of ways of building these. I'm going to show a sort of generator web solution first, which is just an easy way to get started if you've not used these before. And we'll look at Visual Studio, which is probably the premier tool of choice for building these things. And we'll also just briefly look at another approach, which is to use various open source technologies and use a Yeoman project generator to do the same thing as well. So we'll start by going back to my desktop and let us look at Napa first. So if you go to, so the place to go for all of this stuff is OfficeDev.com. That's really any kind of office development. That's your starting point. And if we go to, easiest way to get to it is go to resources and mini labs. And there's a couple of these things. They will literally take five minutes, if that to do. And you can very quickly get a feel for what these things can do. So this is Office 365 APIs, which is an interesting topic in itself. But this is the one we're interested in. So all you have to do is go over to the create office add in, and then you get this handy little thing that guides you through all the steps. So we go to HTTPS. You can put that URL in directly, but the mapping isn't very good or the redirects aren't very good. So you have to get it spot on. You have to do HTTPS and you have to do www or it doesn't work. And you can see I've done this before, but we'll just create a new, well, if we were following through here, we'd say log in, I skip that step. Then create a new task pane add in, and then give it a name, do something in the body. So just quickly go through those steps. So I can say create a task pane. I think task pane add in three is a great name for a task pane app. And then we can start changing things in here. And you can see that the structure of this, it's pretty much the same as that sample that I showed a few minutes ago. It's doing much the same thing, but in this case, it's going to run inside of Excel. And then when I want to run that, I can just click. So I assume we've made some changes here as it's suggested in the sample. And then when I want to run it, I press the run button and we launch. And what it's done is it's hosted an Excel spreadsheet in OneDrive somewhere. And I can start this up. I can say let's edit in Excel online, and we'll put something in here. This doesn't always work the first time. I've got a bit of text here. Oops. Get data from selection, and then it picks up the selected text. So it's as simple as that to get something up and running, and then you can start adding the finesse to it and building things around that. I would say that, I'm guessing we're all developers here because it's a developer conference. I can speak openly. In general, those sort of tools are great for just learning about something when you want to actually do some work. You want to be using something like Visual Studio. One of the things is this doesn't really give you a nice IDE. I'll just close this, but it gives a nice IDE for editing. It's a bit like Visual Studio code, but it doesn't give you access, full access to the manifest file, for example. We're doing everything client-side as well. So what you can do is if you wanted to take that, you can download or you can open this same project in Visual Studio, but what I'm going to do is actually we'll actually look at Visual Studio proper. I'll just go back to the slides for a moment. What should I do with my clicker? There it is. So if you've got Visual Studio 2015, the tooling is all there. If you've got one of the earlier versions, you have to add some extra features to it. You do have to check when you go to the setup that you've checked all the checkboxes to include the Office add-ins, so there's a checkbox Office add-ins. If you don't have it installed already, you need to go back to the setup program and enable it. And then you can just use, there's a new project. You've got a little bit careful. I've set it's add-in for Office. There's an update to Visual Studio, which is still in preview, which is going to fix a number of things. One of them is the naming convention that was a fairly recent change. And you can do things like you can edit the manifest in Visual Studio. You can change the server-side logic. So you might want, for example, if you have some very valuable algorithm that you want to protect, obviously, if you put it in your client-side JavaScript, there is a risk that somebody might get hold of that. They can look in the manifest, see where your file is hosted, have a look inside your JavaScript and figure out how it works. Well, you can protect that if you do it server-side. You might also want to do it server-side because you want to call some service and you don't want to expose it. You don't want to keep that, simplify that or do some very compute-intensive logic that we don't want to do on the client. And you can also publish. So you can just use the normal publishing process inside Visual Studio to push that out into Azure. Or if you use some other technology or some other technique, obviously, you don't have to do the provisioning yourself. But it makes it very easy to provision the website that's going to back up the Office Add-In. So we've got our project structure here. We've got, in Visual Studio, we've got two projects. We've got one which is the manifest project, which contains that manifest file that we talked about. That's what's going to get pushed out into Exchange Server or the app, the store or wherever it's going to go. And then we've got another project, which is just a web project, ASP.NET web project. And as they set it up, then they give you the home.html and home.js, which are the two files we're going to mostly be working in. But there's nothing to stop us adding more server-side logic to that as well. So let's go to a demo of that in action. So I'm going to do File New Project. And now you might think, this is quite tempting, isn't it? Office Add-Ins here looks as though this might be the right place to go. So this is because of the name change. So what I actually have to go to is, if you go to Office Add-Ins, you'll see all the Visto templates, Visual Studio Tools for Office, C-sharp, native applications. That's not so good for us because we want to make this cross-platform. So we're going to use, and unfortunately, it's still in this version of Visual Studio, it's still called Apps. That will change to Add-Ins. And then under that, I've got App for SharePoint, which is the SharePoint add-in model. I have to remember to say that. And then I've got Apps for Office. So if I go into then, create one of those. And again, I like imaginative names like Office App 3. And we now get the choice of which of the currently three types of add-in we want to build. This will expand to four. There'll be command add-ins in a later version. So if you look at this wizard, you see that the options change depending on which one I choose. So if I go for a task pane add-in, I get Excel PowerPoint project word. If I go for a content add-in, I can use Access, Excel or PowerPoint. So there's no content add-in for word at this point. So there isn't a complete overlap. But the wizard knows which ones you're allowed to do. And then for mail, I can have the read form, compose form for the appointment or for the email message. So it sort of contextually knows which one I'm trying to build. So I just got a few notes here. I just want to miss anything. So let's build a, what shall we build, a task pane add-in this time. And we'll, let's have it for everything. So it goes off and creates that project. So here's our manifest project. And if I double-click on that, I get a nice manifest designer, which allows me to go in and set things like the icon that it shows, set all these in here. I've got these things called activation rules, where we can set certain situations where we wanted to appear. Like it'll identify certain things. If you do a regular expression search of the content of the document that we're looking at, for example, and control when they appear. I've also got an option to set app domain so that I can say, I want to call out to this domain. And then if you want to, you can right-click on this and not that, down one. And I can open that directly as well. You can see this is the XML, which is quite simple. It does, there's another, it's called version info or something. There's another section that gets added if you want to do a command type add-in that you'll drop into there. If you need to do that, pending the tooling arriving to do it using the wizard. So that's our manifest file. And then if we go down into here, so we've got some, here's our home, we've seen this before, but this is the JavaScript file, and this is the HTML file. And this is, you know, if we want to build this out to client side, we're going to, we're really just, this web application is just serving static content. But there's nothing to stop us from in here, for example, adding a controller. And we could use an ASP net MVC rest endpoint, for example, and create that. And then from our JavaScript, we can call that rest endpoint. That's one way of doing it. And then have some logic that we then build server side. Alternatively, we might from the client call out to some external service or call to Office 365. So we've got multiple choices. To some extent, I think it will depend on what your skills are and what your preferred way of developing. But you've also might have other constraints like wanting to protect the intellectual property of what you're building. So many options there. And if I go to, what was I going to say about this? If I wanted to, when I'm ready to publish this, then there is a publishing wizard. And so using the similar sort of technique to say push it out into Azure, you know, all this sort of publishing technology is built in. Yes. Yeah. Yeah. You still need the hosting application. It has to be a website somewhere that you're serving that content from because you've got to serve it to all the different clients that are going to run it. Well, you'll have to be connected to something. So it could be your internal network. Or you could use some sort of client side caching, something like App Cache. So that once they've got the add-in, then when they're using it offline, it's going to continue working. So if you're dependent on the server, then it obviously can't render if you start a new instance of PowerPoint and you weren't connected. But if you cache it, then you can do that. Yeah. Which is a good question, actually. Are there any cross-domain restrictions? You have to be careful, yes, because it is still a browser instance that's running inside. So you... Well, that's a domain. It's not cross-domain to there because you're effectively hosting a web page that's from your server. So that's not an issue. You're loading that. It's when you go to some other domain that you need to be a little bit careful. And so, yeah, you might want to use cause, for example, or you could, again, route through your server because you've got a server process running. You could use a rest to make rest calls to your server, to this server. And then that can make calls on your behalf out to somewhere. That would be another way of doing it. It's quite interesting, actually. If you...Baring in mind, I do quite a bit of mobile development. And one of the first things I thought was, oh, I can use ad-connected service here. So one thing I probably want to do is call the...call Office 365 and call one of their REST APIs. So I can use the connected service wizard, ad-connected service. And now, if I built a mobile application with Cordova, say, that would pull in the JavaScript libraries. So I get...there's a set of Office 365 APIs in JavaScript, JavaScript implementation, along with all the security stuff that we'll then call through and get our auth tokens and do all that stuff and talk back to Office 365. Your first thinking is, oh, I'm going to get that if I add this here. But of course, this is a web project. So what I'll get there is it'll give me the C-sharp libraries. So I'll actually end up with a set of C-sharp libraries to call back to Office 365, which I could then use to...using that as we discussed, you could use that...then expose a REST endpoint in here. So now I'm doing more ASP.NET development. So make a controller and put the attributes on to give me a REST endpoint and then surface it that way in the...so the client now, the JavaScript in the client would then have to make the REST call, which...and then this would call. And the other way would be to add the client-side JavaScript and the...it'll be ADLJS, the Active Directory Authentication Library, and do that on the...in JavaScript on the client-side. And then now it's your responsibility on the client-side to make the OAuth call to get authenticated...sorry, authorized, get the right word, get authorized. And you've also got to be aware of the cross-domain thing. So you...fortunately, Office 365 API supports cores now, so that's not a problem. So yeah, then you've got to start thinking about those sort of things, because it's as if you were building an application in the browser to some extent, same kind of problem. Yeah, so that's various ways of doing...I think I've pretty much covered everything I wanted to say about that. So let's just go back to these slides, a few more slides to go through. Hmm, lost it again. So that's Visual Studio. But of course, not everybody uses Visual Studio or wants to use Visual Studio. So there are other options. So if you're a developer who prefers to use code or Emacs or Vi or...and do things sort of like a command line and so on, you can use the...they've actually built a yeoman scaffolding...what have you called them? Scaffolding framework to build a skeleton project up for you, which you can then build on top of. So there's...I did try doing this. I found it actually took quite a little while to actually pull all the things down and do all the package installs, but you can use...it depends on having node installed. Luckily, I have node installed because I use it for other things. So your first thing would be you'd need to install node and then the node package manager, you need to get these various...get Bower and then you can use this Office Generator and then you can say Yo Office and it'll generate...or give you a series of options and then generate a skeleton project for you and then you can party on and start building solutions on top of that. So I think that's nice. It also emphasizes how they're supporting people who are not necessarily using Visual Studio and Microsoft technologies to do things. So you might be writing a back end in Node.js or Ruby or some other technology. Just a few words about where these manifests are stored. So if your...your HTML, JavaScript, CSS and that potentially application with service size code is going to be running in the cloud, but your manifest will be either in the Office Store or in Exchange Server. Now that's...and that could be the one that you get automatically with your Office 365 or if you're on-premises, then you're going to put it in your Exchange Server. I think from memory it has to be Exchange Server 2013 at the no...no older than Exchange Server 2013 to support that. And so that's...you know, that supports the case where you've got the on-premises situation, where you've got an exchange running on-premises. But that's for Outlook. For all the other Office add-ins, then it's going to be in the Office Store or the app catalog, which is kind of part of SharePoint really. And then another option is you can put it in a network share. So if you go into your Office application, there's an option. You go deep into options and there's trusted sites and all this...and down there, there's an option to set a trusted location to store these manifests. And you can pull manifests in from there. So it's...you know, there are various ways of getting these out to your users. It doesn't have to go through the Office Store, the various ways of doing it. We mentioned a little bit about those when we were looking at the designer. We have these options for doing Regex matches. And you can do things like say, okay, if I say...see a telephone number in an email message, I can figure out, you know, maybe start a dialer, I don't know. Or if I see somebody's name or the name of a company say one of our clients, that might be a good use case. If we see one of our clients, it'll pop up something that's relevant, you know, reminder or information. So all kinds of possibilities for just making these things appear at the right time and highlight the right text. There's the ways of highlighting text inside message bodies and so on. So more really than I can cover, you could do a probably a one hour session at least on all of these different...all the different Office applications. So I've got a fun one here that we built which was...which we called Reactor. And it's this thing here, the circle's in the wrong place, should be there, shouldn't it? And it allows you to...it analyzes all the intentions. It analyzes an email message, it then goes in and it's...I'll just run it, actually, it's easier. So if I go into my...look, I hope there's nothing too embarrassing here. So if I've got a...you know, at this point, if you've got a tool like this, spam becomes quite interesting because you can start writing easily, write sarcastic responses. So this is Reactor, so I've got a bit of spam open here. And if I open this, it...I've got a template. Now the idea is so we get, for example, if we get a feedback from...I'm just trying to find an example of some feedback, this is a mobile application we have and it automatically adds some text at the end. So you can do sort of searches for certain things in the text so that I could trigger, say, a feedback message. I'll go back to this one, though. So the...or we can manually select, so I've got a number of messages. So this one just says, thanks for your feedback. And then I can...I use that, I can say, respond. Then...no, I don't really...then it pops open. So this is all the add-ins doing all this. It pops open the new message window and I can then add a bit more content or do what I want or just send it as it is. And this also runs in the Outlook Web App version as well. So if I went into my Office 365, I could do it there as well. It works the same way. Let me just cancel that, actually. But you can also do things like you can make up some fun...I've got this one. Sometimes people have these really long-winded email disclaimers, so I've got one that I can send back and I say, by sending an email to any of my email addresses I am by definition the intended recipient and I...you understand and accept that I do not need any advice from your IT department about the nature of email communication. Whilst it is highly likely I will instantly and permanently delete your message, I may decide to keep it for posterity. They do annoy me, actually, because sometimes when you get a succession of emails, there's like a three-line email and then there's 15 of these email disclaimers that are automatically attached by who knows who, the legal department or somebody. So you can do things like that, have sort of canned messages, what else we can do? I've got another one here, which is quite good fun, which makes up business speak. We want to make friends and influence people. We can talk to our business people in business speak. So much appreciated. Thanks for raising this. At this point, we really need to triage...what have I written here? Should check this really before we send it, shouldn't we? We need to triage the enterprise-ready phased approach. I know it will raise a few eyebrows, particularly with a need to prioritize and ramp up. I'm glad we all seem to be on the same page. Yeah, it sounds reasonable. But I could create another one. It's just randomly generated text. Let's try a different one. Moving forward, we need to consider the metric. Inevitably, leading to service-oriented benefit analysis. What do it mean, this stuff? This really boils down to our taking ownership of the total quality management of this approach. Great. I think that's...I'll probably send that one back. No, I won't, really. So what's going on behind the scenes with this is I've got this...so again, I've got Home.js on this. This is the code that's generating that email response generator. So we've got the initialize here, and this is...there's a template selector, and then a little bit further down, I've got some display options. Now there are...there's some CSS that you can get called UI Fabric, which makes it even more look like it's part of the native app...of the application that it's showing in. But I've just used just some very simple HTML. It's here, actually. So what have we got here? We have 60 lines of HTML. We've got this Home.js, which has got a bit of behavior as well, so when certain things are clicked, it's going to do things. It's actually a little bit more sophisticated because I've got some settings here. I've got a number of options for changing sort of...what's the word I'm looking for? Sort of boilerplate phrases and things like that. And then what we can...so what we've got here is 190 lines there, and then I've got this Reactor.js, which has got things like all the phrases that we're going to use here to generate the nonsense business speak that we're going to respond with. So I thought it was quite good fun. And again, okay, that's about 500 lines of code, but it's a lot of it is just generating all this text. So let's go back to the slides and just say a few words about...that was, well, to kind of define where I thought it was. So very easily, you can build up something that's...you can have a bit of fun with, and I'm not suggesting you do exactly that, but you can do something that's useful for business people. So the Office UI fabric is just a few CSS files that can give you that look and feel of the application that you're embedding your add-in inside. So that's something to look at, very simple to add that. If you're going to commercially sell one of these add-ins or just make it available commercially or want it widely available, if you perhaps make a free one like we did, then they're very easily accessible, so there's a store button inside of all of the Office applications, also in Office 365. There's this very prominent button now that appears in the Office 365 waffle. If you want to sell it, then you might want to put some licensing in. So there's an API that you can call that will...you want to check that and maybe disable certain functionality depending on whether they've paid for a license or not. There's a very sophisticated system that supports that, all supported by the store. Obviously if you manually give them a sort of side load it or give them a file share to get the manifest file from, you can't enforce that so easily, but if it's gone through the store then there are APIs where it will give tokens and manage that for you and track licenses and make sure that users are paid and give them the appropriate features. We mentioned a little bit about this, but you can...so we talked about the various different ways we can deploy it. I covered that in the earlier slides. Don't forget that you've got the Microsoft Graph API, so that's all the time improving. That gives you...it's really a search driven, practically artificial intelligence that's looking at organizations. So just think what you can do with this plus that. You could build something very powerful indeed which would sort of knows about your organization and can suggest things to people or help people find other people that know about topics. Just endless possibilities I think as more and more information is in there and it's all retrievable using search technology. We can start suggesting things to users and make their lives easier. As this unification across the authorization mechanisms that now reach out into Outlook.com as well as Office 365. As this all is gradually being brought together, we started off with 1.2 billion and we can add another 400 million to that as well if we include people who are using Outlook.com. So I'm going to wrap up quickly because I'm probably on red here. So really the point about these add-ins is you can get a lot of business benefits, a lot of business clout with really a minuscule amount of effort proportionately because you can use all these skills that you've already got. You can use all those end points and use things like Office Graph to build...use any JavaScript library you like, pull in any mapping system you like or any external system. The limit is really your imagination. You can bring all these things together and surface them in the application like Word or Excel that business people are using all the time. So it makes it really easy for them to acquire these things and use them. If you haven't already done so, I suggest you sign up for the Office 365 Developer Program. Dev.Office.com is the place to go now for all the information around Office 365 and Office Development. It's all being pulled together and really easy to get to. It used to be scattered all over the place now. It's all in one place and really helpful links there. It's all the time improving. I'm sure we'll see even more things becoming available in a few months' time. As you go home tonight, I hope you've enjoyed the conference. I certainly have. If nothing else, I hope that you'll at least have a few ideas and you can think of applications for Office Add-ins perhaps as you travel home or over the weekend. So thank you very much indeed for that. I'll just leave some resources up there for you, but thanks very much indeed for coming. Hope it's been useful. Please take a handful of the green stickers on your way out and drop them into the box. Thanks very much indeed for coming. Thank you.
 So, welcome everybody to this session on making friends and influencing people by building  office add-ins.  Now, I must admit I made a slight mistake in, I was kind of thinking of this book, How  to Win Friends and Influence People by Dale Carnegie.  Dale wrote this book in about the 20s to help people like me who don't like making a small  talk too much.  I'm very happy to talk to a group of like-minded people.  But he gave lots of tips about how to deal with people and how to make friends and influence  people.  And that's kind of what I was thinking.  I got the title slightly wrong.  It was late, late at night, and we do our best.  So one of the things about office add-ins, I think it's a great way of having a lot  of impact if you're a developer and you're surrounded by business people.  So when I worked at one point for a large computer company with a three-letter name,  who would sit in an office and sort of open plan office and business people would wander  in and they'd sort of sit there and not talk to you.  We'd be working away on the global whatever it was that we were trying to build.  And we wouldn't have much interaction with them.  And then at some point somebody would come up and say, hello, I'm Joe Smith.  I'm the global head of sales for Earth and the inner planets.  And what are you doing?  And you'd say what you were doing and cut you off fairly quickly and say, oh, do you  know anything about printers?  And so you go and fix the printer jam for them and then you wouldn't hear from them  again.  And so you want to be able to do things to help people in the business world.  And I think this is, office add-ins is a great way of helping people solve business problems,  particularly in those industries where you perhaps a business has grown very quickly  and you've got a lot of manual processes that have just, you know, the business has grown  too fast for them to keep up.  And so people are copying and pasting things in emails from into Word or Excel or something  like that.  And you get those sort of the people that cluck when you ask them what they're doing.  What are you doing?  And I'm copying this from, I have to go into the email and take this number out and paste  it in here.  I've got this on a post-it note and so on.  So it's great for solving those kinds of problems.  So my name is Bill Ayers.  My background is in SharePoint and Office 365.  So this really sort of comes into our area as well because it's all to do with talking,  particularly to some of these back-end systems in Office 365.  We'll talk about some of the APIs very briefly later on.  But I also work in mobile and agile development as well.  So this is, to me, this is another way of surfacing our applications and our content  but inside Office and using that as the delivery platform, such as say on a mobile you might  use an HTML5 hybrid app.  Okay, I'm giving away slightly how the technology works.  So I'll talk a little bit about the background.  I'll then look at some of the different Office add-in shapes, the different options that  we've got.  We'll talk about building Office add-in.  So that's going to be the main thrust of the talk is how we're going to build them.  We'll talk about the distribution as well because that's important as well, particularly  if you want to sort of commercially use it as not just internally but to make a commercial  product.  And then we'll draw some conclusions.  I hope that you'll be able to go away with some ideas and think over the weekend of how  you could apply this kind of thing.  So Office is everywhere now.  And the numbers that we have now for Office installations is 1.2 billion, like that word  billion.  It reminds me of Carl Sagan.  If anybody remembers that series he did talking about how small we are in the universe that  we're one of a billion galaxies.  So your Office installation is one of the billions of Office installations.  1.2 billion Office users.  There's another 0.4 billion, another 400 million who are using things like Outlook.com and  you can eventually sort of bring that into the mix as well.  So there's a huge number of people that we can reach using this technology.  And then mobile devices as well.  So Office has now reached out into mobile devices.  It runs on all these platforms, iOS, Android, OS X, Windows Mobile, anybody?  Windows Phone.  Don't laugh, please.  Listen, Windows Phone is a survivor.  Back in the 90s it was Windows Mobile, Windows CE, and there were all these other platforms  that don't exist anymore.  iOS and Android have come along fairly recently.  So maybe in 10 years time, Windows Phone will still be around and these other things will  have disappeared.  Who knows?  Anything can happen in the mobile world.  But anyway, whatever happens, Office is going to be available on these different platforms.  And the vision from Microsoft's perspective is they want to give a native look and feel  to the add-ins so that they look as though they're part of the hosting application, if  it's Word, Excel, PowerPoint and so on.  It looks as though it's part of that application.  And there are some tools to help you do that very easily.  The idea is also write ones, run everywhere.  We've heard that dream before and we've all chased that unicorn.  I think there's only one technology that I know that can achieve that or get close to  it.  So it will be no surprise when we look at how this thing works.  And it's really coming up with business solutions.  It's something that works really well as well as creating applications that you can sell.  It's a really good technology for creating something to solve a specific problem.  Now there have been a few ways of doing this in the past.  I remember, say, 10, 20 years ago, we'd have Visual Basic for applications and macros.  I remember business people saying, oh, we're using VBA.  I've written this thing.  I know this macro works in this spreadsheet.  I don't see that so much nowadays.  I don't know about everybody else, but it feels like users are less inclined to build  anything and do that kind of thing.  I think maybe as we've reached all out to these billions of users, we've got to the  stage where really everybody's using a computer.  Before there were people who are specializing a little bit in computers and now everybody's  using them.  And so we see people who really have no clue as to how the computer works and no inclination  to write macros and so forth.  So if anything, the need for our development skills increases as we move forward and more  and more people use these Office applications.  So then we had COM and we had Visto, Visual Studio Tools for Office.  I remember looking at this probably about 10 years ago.  I must admit I don't remember much about it, but it seemed to work very well.  It was an API.  But the problem is these things aren't portable across all these different platforms.  So the question is, how can we get add-ins that will run on all these different platforms  where Office is running?  And so the solution is the new Office add-in model.  Now just a word of warning, you will see in some documentation still, they're called  Office apps.  Same thing, name change.  So the thinking behind this was, as I understand it, that things like Word and Excel, people  view those as apps.  And so it would be confusing to have an app running inside an app.  So the phrase add-in or the term add-in has been used to describe these.  And you will see when we look in Visual Studio, for example, some of the tooling there hasn't  quite caught up with that slight terminology change yet.  But it's Office add-ins, and if you're a SharePoint developer, you'll know that we've also moved  to SharePoint add-ins rather than the SharePoint app model as we briefly learned to call it.  So the mechanism that it uses, as I say, the one thing that does seem to have some hope  of giving you cross-platform right once run everywhere is using web technologies.  So there's an embedded web control, the web extensibility framework, this thing that runs  inside the Office clients.  And remember, there's also the web applications for Office as well.  And the one in the client applications, the native ones, it acts very much like an iframe  that you're running your application inside.  In the case of the web applications, it is actually an iframe.  And then there's a JavaScript library called Office.js, which then allows you to reach out  into the host application and do things.  Obviously, it's sandboxed to an extent to stop anything bad happening, but it allows  you to reach out and get to the content of whatever the host application is running.  And that sort of that reaches out into the application.  And then also, you can use APIs, of course, like REST to call back to some external system  as well, including Office 365.  So hosted centrally, so there's a, it is literally a web application that's running inside that  frame.  And the thinking there is, you know, if you already know web development, which is most  people, then you can build these Office add-ins.  And you don't have to use Microsoft technologies necessarily to do that.  We'll show some ways that we can use Visual Studio to build those, but you could build  it using whatever technology you could use Ruby on Rails or Node.js.  If you wanted to, you might have to do a little bit of the provisioning yourself, but you  could use whatever web technology you're familiar with to build the add-ins.  So I think it's very appealing to a very large number of people.  I think it's got a terrific reach as a technology to deliver this.  So here's an example of an add-in running in Microsoft Office in Outlook.  So the bit that the add-in, I don't know if you can see my pointer is this bit here is  the actual add-in.  But in the case of Outlook, you get these drop-downs, effectively, which can come in.  And they're sort of contextual, so there are some rules we'll see a bit more about this  later that say when these things appear and when we can use them and so on.  And those are available running on a wide range of systems, of platforms.  It's not yet complete, so we'll see a matrix of where we've got to so far in terms of which  platforms are supported.  It is gradually improving.  Now, I thought since I was in Outlook, in PowerPoint anyway, I do a little demo here  using PowerPoint.  Now, this is a little bit risky because I'm going to just duplicate my screen for a minute.  Right.  And I'm going to actually close this.  It's always scares me doing this, is to close the PowerPoint presentation that I'm using.  And I've got an instance of Visual Studio here, and I'm just going to run it.  And that will actually start at PowerPoint.  So I'm back here.  Let's just get rid of that.  We don't need it.  And get to roughly where we were in the deck, which is there.  And what I can do is I can, can everybody see this all right?  Is that visible at the back?  Should I zoom in for you?  So if I go to Store, for example, then there are, so these are the ones that are available  in the Microsoft Store.  And there's a pretty decent array of different things you can add in here.  And a lot of them are free as well.  Some of them are paid for.  So there is a sort of a market.  So I can add this stock tile.  In fact, you can see that I've already used this earlier.  But I'm going to add this one, which is the one that I just built with Visual Studio a  few moments ago, a bit earlier.  And I'll just expand that to fit a little.  And what I can do is in here, I can say take a bit of text there.  And the add-in will reach out to it and take whatever the selector text is and show it  down there.  And then when I show this full screen as if I was doing a presentation, then it's all  there.  And actually, interestingly, some of these things are actually clickable as well.  The only thing I can't do is I can't get the data from the selection, because I have no  way of getting it to selection when I'm in display mode.  Anyway, that's not a very exciting, not very interesting.  In fact, if we look at what's going on behind the scenes here, I'll just make that slightly  larger.  If you're a web developer, you probably don't think this is very interesting at all.  It's just a normal web page.  Very simple.  We've got a bit of text here.  And then there's a JavaScript file behind it.  And this is the key thing.  So remember, I mentioned OfficeJS.  This initialized method is what we call in OfficeJS, or what gets called when the add-in  starts up.  And all it's doing is it's getting that particular element in the HTML and adding a click handler.  And then down here, this is the click handler.  And it's grabbing that content and displaying it in an alert at the bottom of the page.  And I can make it maybe a little bit more interesting.  Let's drag an image into here.  And just remember to save it.  And if I go, I can actually get at this, add in, reload it.  And that looks marginally more interesting.  So I can just sort of develop it as I go.  So it's very easy to, you can imagine, you can start doing more interesting things with  it pretty easily because you're just using the same web technology.  You can use any JavaScript library you like.  So we could use something like D3JS, for example, to make some attractive graphics.  And we've got all of those options available to us.  So I'm going to shut this one down and go back to the, no, let's not do that.  Let's do it this way.  I think that's safer.  Stop that.  And go back to my slide deck.  The one that's just running at not as, I don't want to confuse matters by having it running  as a process in Visual Studio.  Right.  So here's another example that this one's running in iPad, on an iPad in Excel.  And I've no doubt that you have to pay Dun and Bradstreet to gather all this information,  but you have a way of getting lists of companies that you want to send emails to or whatever.  You know, we do a bit of market analysis.  So that's probably a paid one, but that's going to work across all the different platforms  that are supported.  So behind the scenes, what's happening is there's an XML manifest file.  And depending on what type of ad in it is, you will see a slight differentiation between  the two broad categories of ad in.  There's the ones that are using Outlook and the ones that are using the other applications  like Word, Excel, PowerPoint.  Broadly, my understanding is it's the exchange team which are behind the Outlook ad in and  the rest of the office team are behind the others.  So there's a slight difference.  We'll see some of the capabilities and the way they handle things.  And they're doing a slightly different job as well.  But depending on what it is, this manifest file can be stored in exchange.  It can be installed in a SharePoint catalog.  You can have a file share and put it there.  And that essentially says, here's where the website is that I want you to show inside  there.  So that has a link to that website.  And that can be hosted anywhere.  So it can be hosted in Azure.  It could be hosted on-premises or in some other cloud service, whatever you want to  use as long as you can address it from a URL in that XML manifest file.  And then what the ad in does is it renders in the page.  Whatever is on that website will appear in there.  And the logic could be client-side JavaScript or it could be server-side.  So you can use either.  So let's look at some of the different ad-in shapes that are available.  So the first one we'll talk about is the Outlook one.  So that's where you've got a mail message or an appointment.  You can launch this sort of drop-down panel that appears in the main pane of Outlook.  There's another category which is called a task pane which appears at the side of an  application like Word or PowerPoint.  So it's similar to some of the task panes that you can get when you use Visto, for example,  when you build add-ins that way.  And then there's the document content add-in.  So the content add-ins are something that you're going to put inside the content of  the application.  So the one we just played with just now was a content add-in.  And finally, we've got a new thing that's just come in fairly recently which is these  command add-ins which allow you to add something to the user interface so you can have a button  in the ribbon that will launch a task pane or potentially just execute a bit of JavaScript  silently behind the scenes.  So we'll look at these in turn.  So the mail add-in, I'm going to show an example of this later where we've got one which I'll  just look at the source code of because I know it'll be interesting which is going to  add into Outlook.  So this one's called Reactor.  And then when you click on things, it will analyze the text of the message and make a  decision about what the content is and give you sort of an automated response.  It's quite good fun.  So that's a mail add-in.  The task pane add-in, some examples are in PowerPoint, you might want to pull in some  images or do an image search.  There's one here for PayPal.  I've done one for invoicing in Excel.  So these are just add-ins that you can get in the store.  There's a dictionary add-in in Word documents.  Now, interestingly, if you download that or look at it, you'll find that the reviews aren't  that good.  I think the problem there is that users have maybe, because they're used to having a built-in  dictionary in Word and they make a comparison.  So you've got to be a little bit careful that when you're designing something, you make  it consistent with what people are used to.  People don't like change.  Your average office user, I think, probably doesn't like to see jarring change.  And possibly, I'm not sure whether that's something that the users of that don't or some users  don't like when they use these various dictionary add-ins.  Here's one for giving you an Uber ride reminder.  So these are third-party ones.  Some examples of content add-ins.  So this one is called Bubbles.  And you could select some data, and it'll give you a sort of bubble chart.  You can imagine you could build something like this very simply using one of these many  JavaScript libraries and just using normal client-side web development techniques.  You could come up with something very nice.  There's one for adding polls to your PowerPoint deck.  There's an example here of adding geographic information.  So in this case, they're using Bing Maps.  It could just as easily be using Google Maps.  So you can use anything that we can get to on the web we can make use of.  And then adding commands.  Here's a nice one.  You can launch boomerang or Evernote directly from the ribbon.  Now, these are a little bit newer.  So unless you've got the latest preview update of Visual Studio, you'll have to do a little  bit of work in the manifest file to add the control to do that.  The best way is probably to take one of these bits of sample code and use that.  But the preview, I believe, now supports this.  So you can use the various tooling that's built in Visual Studio.  Now if you look at the roadmap of the add-ins and what's available for which platform, you  can see that it's not yet complete.  And I would predict that there's a conference coming up in the end of April, beginning of  May build.  I wouldn't be surprised if we got quite a few announcements and we got a few more platform  supported.  Perhaps some of these coming soon, we would hope that that's probably, I would guess,  the sort of timeframe we're talking about.  But that's purely my speculation.  But you might interpret that as saying, well, it looks as though they're moving across this  chart from left to right.  And I think that's probably a reasonable assumption.  And I think they're driven by which of these platforms are the most popular.  And you'll notice that the Universal Windows app is sort of the last of the ones that they're  going for in that list.  So they're prioritizing supporting iPhone, Mac, and Android users.  So I guess they're seeing that as where the majority of the users are at the moment.  So it's interesting that this is a different Microsoft that we might have seen 10 years  ago where they would have possibly used the success of Office to try and promote the Universal  Windows app approach.  But of course, as long as we've got the online, the web applications, we can potentially run  these on any platform because just about everything will support the web interface.  So we can use, even though there isn't a native version of Excel for Mac, you can still use  the Excel web application on a Macintosh.  And you can still use the add-ins.  Or you can use it on Macintosh anyway.  But you can use the Excel, the add-in on a Macintosh using the web app.  And then Office.js has many functions.  There's a link here, which I'll maybe we should just have a quick look at, which is to all  the different APIs that are available.  It's quite comprehensive.  But the documentation is very good.  So if I just jump over, actually, if I just bring this up, there's quite a nice thing.  There's the main documentation, of course, but there's quite a nice graphical.  So that's a sort of, you can zoom this thing in, which I quite like.  And you can see which of the various APIs is available for which platform as well.  So you can get the big picture.  And I expect that, if anything, to get denser and denser over time as more and more features  are released.  They've got a large team of people working on this.  So there are many developers working on extending these Office applications.  Back to my slides for a moment.  So that gives you, it's the Office.js that gives you the access to the content of the  document, whether it's an Excel spreadsheet or a word, or if it's a message, allows you  to get things like attachments.  There's a limited amount of things you can do directly with that.  And then if you can't do it using Office.js, then you can make a REST call out into Office  365, for example, and do it that way.  So as you start to think about it, the possibilities are pretty much endless of what you could  potentially do using this sort of approach.  So we've got a number of ways of building these.  I'm going to show a sort of generator web solution first, which is just an easy way  to get started if you've not used these before.  And we'll look at Visual Studio, which is probably the premier tool of choice for building  these things.  And we'll also just briefly look at another approach, which is to use various open source  technologies and use a Yeoman project generator to do the same thing as well.  So we'll start by going back to my desktop and let us look at Napa first.  So if you go to, so the place to go for all of this stuff is OfficeDev.com.  That's really any kind of office development.  That's your starting point.  And if we go to, easiest way to get to it is go to resources and mini labs.  And there's a couple of these things.  They will literally take five minutes, if that to do.  And you can very quickly get a feel for what these things can do.  So this is Office 365 APIs, which is an interesting topic in itself.  But this is the one we're interested in.  So all you have to do is go over to the create office add in, and then you get this handy  little thing that guides you through all the steps.  So we go to HTTPS.  You can put that URL in directly, but the mapping isn't very good or the redirects aren't  very good.  So you have to get it spot on.  You have to do HTTPS and you have to do www or it doesn't work.  And you can see I've done this before, but we'll just create a new, well, if we were  following through here, we'd say log in, I skip that step.  Then create a new task pane add in, and then give it a name, do something in the body.  So just quickly go through those steps.  So I can say create a task pane.  I think task pane add in three is a great name for a task pane app.  And then we can start changing things in here.  And you can see that the structure of this, it's pretty much the same as that sample that  I showed a few minutes ago.  It's doing much the same thing, but in this case, it's going to run inside of Excel.  And then when I want to run that, I can just click.  So I assume we've made some changes here as it's suggested in the sample.  And then when I want to run it, I press the run button and we launch.  And what it's done is it's hosted an Excel spreadsheet in OneDrive somewhere.  And I can start this up.  I can say let's edit in Excel online, and we'll put something in here.  This doesn't always work the first time.  I've got a bit of text here.  Oops.  Get data from selection, and then it picks up the selected text.  So it's as simple as that to get something up and running, and then you can start adding  the finesse to it and building things around that.  I would say that, I'm guessing we're all developers here because it's a developer conference.  I can speak openly.  In general, those sort of tools are great for just learning about something when you  want to actually do some work.  You want to be using something like Visual Studio.  One of the things is this doesn't really give you a nice IDE.  I'll just close this, but it gives a nice IDE for editing.  It's a bit like Visual Studio code, but it doesn't give you access, full access to the  manifest file, for example.  We're doing everything client-side as well.  So what you can do is if you wanted to take that, you can download or you can open this  same project in Visual Studio, but what I'm going to do is actually we'll actually look  at Visual Studio proper.  I'll just go back to the slides for a moment.  What should I do with my clicker?  There it is.  So if you've got Visual Studio 2015, the tooling is all there.  If you've got one of the earlier versions, you have to add some extra features to it.  You do have to check when you go to the setup that you've checked all the checkboxes to include  the Office add-ins, so there's a checkbox Office add-ins.  If you don't have it installed already, you need to go back to the setup program and enable  it.  And then you can just use, there's a new project.  You've got a little bit careful.  I've set it's add-in for Office.  There's an update to Visual Studio, which is still in preview, which is going to fix a  number of things.  One of them is the naming convention that was a fairly recent change.  And you can do things like you can edit the manifest in Visual Studio.  You can change the server-side logic.  So you might want, for example, if you have some very valuable algorithm that you want  to protect, obviously, if you put it in your client-side JavaScript, there is a risk that  somebody might get hold of that.  They can look in the manifest, see where your file is hosted, have a look inside your JavaScript  and figure out how it works.  Well, you can protect that if you do it server-side.  You might also want to do it server-side because you want to call some service and you don't  want to expose it.  You don't want to keep that, simplify that or do some very compute-intensive logic that  we don't want to do on the client.  And you can also publish.  So you can just use the normal publishing process inside Visual Studio to push that out  into Azure.  Or if you use some other technology or some other technique, obviously, you don't have  to do the provisioning yourself.  But it makes it very easy to provision the website that's going to back up the Office  Add-In.  So we've got our project structure here.  We've got, in Visual Studio, we've got two projects.  We've got one which is the manifest project, which contains that manifest file that we  talked about.  That's what's going to get pushed out into Exchange Server or the app, the store or wherever  it's going to go.  And then we've got another project, which is just a web project, ASP.NET web project.  And as they set it up, then they give you the home.html and home.js, which are the two  files we're going to mostly be working in.  But there's nothing to stop us adding more server-side logic to that as well.  So let's go to a demo of that in action.  So I'm going to do File New Project.  And now you might think, this is quite tempting, isn't it?  Office Add-Ins here looks as though this might be the right place to go.  So this is because of the name change.  So what I actually have to go to is, if you go to Office Add-Ins, you'll see all the  Visto templates, Visual Studio Tools for Office, C-sharp, native applications.  That's not so good for us because we want to make this cross-platform.  So we're going to use, and unfortunately, it's still in this version of Visual Studio,  it's still called Apps.  That will change to Add-Ins.  And then under that, I've got App for SharePoint, which is the SharePoint add-in model.  I have to remember to say that.  And then I've got Apps for Office.  So if I go into then, create one of those.  And again, I like imaginative names like Office App 3.  And we now get the choice of which of the currently three types of add-in we want to  build.  This will expand to four.  There'll be command add-ins in a later version.  So if you look at this wizard, you see that the options change depending on which one  I choose.  So if I go for a task pane add-in, I get Excel PowerPoint project word.  If I go for a content add-in, I can use Access, Excel or PowerPoint.  So there's no content add-in for word at this point.  So there isn't a complete overlap.  But the wizard knows which ones you're allowed to do.  And then for mail, I can have the read form, compose form for the appointment or for the  email message.  So it sort of contextually knows which one I'm trying to build.  So I just got a few notes here.  I just want to miss anything.  So let's build a, what shall we build, a task pane add-in this time.  And we'll, let's have it for everything.  So it goes off and creates that project.  So here's our manifest project.  And if I double-click on that, I get a nice manifest designer, which allows me to go in  and set things like the icon that it shows, set all these in here.  I've got these things called activation rules, where we can set certain situations where  we wanted to appear.  Like it'll identify certain things.  If you do a regular expression search of the content of the document that we're looking  at, for example, and control when they appear.  I've also got an option to set app domain so that I can say, I want to call out to this  domain.  And then if you want to, you can right-click on this and not that, down one.  And I can open that directly as well.  You can see this is the XML, which is quite simple.  It does, there's another, it's called version info or something.  There's another section that gets added if you want to do a command type add-in that  you'll drop into there.  If you need to do that, pending the tooling arriving to do it using the wizard.  So that's our manifest file.  And then if we go down into here, so we've got some, here's our home, we've seen this  before, but this is the JavaScript file, and this is the HTML file.  And this is, you know, if we want to build this out to client side, we're going to, we're  really just, this web application is just serving static content.  But there's nothing to stop us from in here, for example, adding a controller.  And we could use an ASP net MVC rest endpoint, for example, and create that.  And then from our JavaScript, we can call that rest endpoint.  That's one way of doing it.  And then have some logic that we then build server side.  Alternatively, we might from the client call out to some external service or call to Office  365.  So we've got multiple choices.  To some extent, I think it will depend on what your skills are and what your preferred  way of developing.  But you've also might have other constraints like wanting to protect the intellectual property  of what you're building.  So many options there.  And if I go to, what was I going to say about this?  If I wanted to, when I'm ready to publish this, then there is a publishing wizard.  And so using the similar sort of technique to say push it out into Azure, you know, all  this sort of publishing technology is built in.  Yes.  Yeah.  Yeah.  You still need the hosting application.  It has to be a website somewhere that you're serving that content from because you've got  to serve it to all the different clients that are going to run it.  Well, you'll have to be connected to something.  So it could be your internal network.  Or you could use some sort of client side caching, something like App Cache.  So that once they've got the add-in, then when they're using it offline, it's going  to continue working.  So if you're dependent on the server, then it obviously can't render if you start a new  instance of PowerPoint and you weren't connected.  But if you cache it, then you can do that.  Yeah.  Which is a good question, actually.  Are there any cross-domain restrictions?  You have to be careful, yes, because it is still a browser instance that's running inside.  So you...  Well, that's a domain.  It's not cross-domain to there because you're effectively hosting a web page that's from  your server.  So that's not an issue.  You're loading that.  It's when you go to some other domain that you need to be a little bit careful.  And so, yeah, you might want to use cause, for example, or you could, again, route through  your server because you've got a server process running.  You could use a rest to make rest calls to your server, to this server.  And then that can make calls on your behalf out to somewhere.  That would be another way of doing it.  It's quite interesting, actually.  If you...Baring in mind, I do quite a bit of mobile development.  And one of the first things I thought was, oh, I can use ad-connected service here.  So one thing I probably want to do is call the...call Office 365 and call one of their  REST APIs.  So I can use the connected service wizard, ad-connected service.  And now, if I built a mobile application with Cordova, say, that would pull in the JavaScript  libraries.  So I get...there's a set of Office 365 APIs in JavaScript, JavaScript implementation,  along with all the security stuff that we'll then call through and get our auth tokens  and do all that stuff and talk back to Office 365.  Your first thinking is, oh, I'm going to get that if I add this here.  But of course, this is a web project.  So what I'll get there is it'll give me the C-sharp libraries.  So I'll actually end up with a set of C-sharp libraries to call back to Office 365, which  I could then use to...using that as we discussed, you could use that...then expose a REST endpoint  in here.  So now I'm doing more ASP.NET development.  So make a controller and put the attributes on to give me a REST endpoint and then surface  it that way in the...so the client now, the JavaScript in the client would then have to  make the REST call, which...and then this would call.  And the other way would be to add the client-side JavaScript and the...it'll be ADLJS, the Active  Directory Authentication Library, and do that on the...in JavaScript on the client-side.  And then now it's your responsibility on the client-side to make the OAuth call to get  authenticated...sorry, authorized, get the right word, get authorized.  And you've also got to be aware of the cross-domain thing.  So you...fortunately, Office 365 API supports cores now, so that's not a problem.  So yeah, then you've got to start thinking about those sort of things, because it's as  if you were building an application in the browser to some extent, same kind of problem.  Yeah, so that's various ways of doing...I think I've pretty much covered everything I wanted  to say about that.  So let's just go back to these slides, a few more slides to go through.  Hmm, lost it again.  So that's Visual Studio.  But of course, not everybody uses Visual Studio or wants to use Visual Studio.  So there are other options.  So if you're a developer who prefers to use code or Emacs or Vi or...and do things sort  of like a command line and so on, you can use the...they've actually built a yeoman  scaffolding...what have you called them?  Scaffolding framework to build a skeleton project up for you, which you can then build  on top of.  So there's...I did try doing this.  I found it actually took quite a little while to actually pull all the things down and do  all the package installs, but you can use...it depends on having node installed.  Luckily, I have node installed because I use it for other things.  So your first thing would be you'd need to install node and then the node package manager,  you need to get these various...get Bower and then you can use this Office Generator  and then you can say Yo Office and it'll generate...or give you a series of options  and then generate a skeleton project for you and then you can party on and start building  solutions on top of that.  So I think that's nice.  It also emphasizes how they're supporting people who are not necessarily using Visual  Studio and Microsoft technologies to do things.  So you might be writing a back end in Node.js or Ruby or some other technology.  Just a few words about where these manifests are stored.  So if your...your HTML, JavaScript, CSS and that potentially application with service  size code is going to be running in the cloud, but your manifest will be either in the Office  Store or in Exchange Server.  Now that's...and that could be the one that you get automatically with your Office 365  or if you're on-premises, then you're going to put it in your Exchange Server.  I think from memory it has to be Exchange Server 2013 at the no...no older than Exchange  Server 2013 to support that.  And so that's...you know, that supports the case where you've got the on-premises situation,  where you've got an exchange running on-premises.  But that's for Outlook.  For all the other Office add-ins, then it's going to be in the Office Store or the app  catalog, which is kind of part of SharePoint really.  And then another option is you can put it in a network share.  So if you go into your Office application, there's an option.  You go deep into options and there's trusted sites and all this...and down there, there's  an option to set a trusted location to store these manifests.  And you can pull manifests in from there.  So it's...you know, there are various ways of getting these out to your users.  It doesn't have to go through the Office Store, the various ways of doing it.  We mentioned a little bit about those when we were looking at the designer.  We have these options for doing Regex matches.  And you can do things like say, okay, if I say...see a telephone number in an email  message, I can figure out, you know, maybe start a dialer, I don't know.  Or if I see somebody's name or the name of a company say one of our clients, that might  be a good use case.  If we see one of our clients, it'll pop up something that's relevant, you know, reminder  or information.  So all kinds of possibilities for just making these things appear at the right time and  highlight the right text.  There's the ways of highlighting text inside message bodies and so on.  So more really than I can cover, you could do a probably a one hour session at least  on all of these different...all the different Office applications.  So I've got a fun one here that we built which was...which we called Reactor.  And it's this thing here, the circle's in the wrong place, should be there, shouldn't  it?  And it allows you to...it analyzes all the intentions.  It analyzes an email message, it then goes in and it's...I'll just run it, actually,  it's easier.  So if I go into my...look, I hope there's nothing too embarrassing here.  So if I've got a...you know, at this point, if you've got a tool like this, spam becomes  quite interesting because you can start writing easily, write sarcastic responses.  So this is Reactor, so I've got a bit of spam open here.  And if I open this, it...I've got a template.  Now the idea is so we get, for example, if we get a feedback from...I'm just trying to  find an example of some feedback, this is a mobile application we have and it automatically  adds some text at the end.  So you can do sort of searches for certain things in the text so that I could trigger,  say, a feedback message.  I'll go back to this one, though.  So the...or we can manually select, so I've got a number of messages.  So this one just says, thanks for your feedback.  And then I can...I use that, I can say, respond.  Then...no, I don't really...then it pops open.  So this is all the add-ins doing all this.  It pops open the new message window and I can then add a bit more content or do what  I want or just send it as it is.  And this also runs in the Outlook Web App version as well.  So if I went into my Office 365, I could do it there as well.  It works the same way.  Let me just cancel that, actually.  But you can also do things like you can make up some fun...I've got this one.  Sometimes people have these really long-winded email disclaimers, so I've got one that I  can send back and I say, by sending an email to any of my email addresses I am by definition  the intended recipient and I...you understand and accept that I do not need any advice from  your IT department about the nature of email communication.  Whilst it is highly likely I will instantly and permanently delete your message, I may  decide to keep it for posterity.  They do annoy me, actually, because sometimes when you get a succession of emails, there's  like a three-line email and then there's 15 of these email disclaimers that are automatically  attached by who knows who, the legal department or somebody.  So you can do things like that, have sort of canned messages, what else we can do?  I've got another one here, which is quite good fun, which makes up business speak.  We want to make friends and influence people.  We can talk to our business people in business speak.  So much appreciated.  Thanks for raising this.  At this point, we really need to triage...what have I written here?  Should check this really before we send it, shouldn't we?  We need to triage the enterprise-ready phased approach.  I know it will raise a few eyebrows, particularly with a need to prioritize and ramp up.  I'm glad we all seem to be on the same page.  Yeah, it sounds reasonable.  But I could create another one.  It's just randomly generated text.  Let's try a different one.  Moving forward, we need to consider the metric.  Inevitably, leading to service-oriented benefit analysis.  What do it mean, this stuff?  This really boils down to our taking ownership of the total quality management of this approach.  Great.  I think that's...I'll probably send that one back.  No, I won't, really.  So what's going on behind the scenes with this is I've got this...so again, I've got  Home.js on this.  This is the code that's generating that email response generator.  So we've got the initialize here, and this is...there's a template selector, and then  a little bit further down, I've got some display options.  Now there are...there's some CSS that you can get called UI Fabric, which makes it even  more look like it's part of the native app...of the application that it's showing in.  But I've just used just some very simple HTML.  It's here, actually.  So what have we got here?  We have 60 lines of HTML.  We've got this Home.js, which has got a bit of behavior as well, so when certain things  are clicked, it's going to do things.  It's actually a little bit more sophisticated because I've got some settings here.  I've got a number of options for changing sort of...what's the word I'm looking for?  Sort of boilerplate phrases and things like that.  And then what we can...so what we've got here is 190 lines there, and then I've got this  Reactor.js, which has got things like all the phrases that we're going to use here to  generate the nonsense business speak that we're going to respond with.  So I thought it was quite good fun.  And again, okay, that's about 500 lines of code, but it's a lot of it is just generating  all this text.  So let's go back to the slides and just say a few words about...that was, well, to kind  of define where I thought it was.  So very easily, you can build up something that's...you can have a bit of fun with, and  I'm not suggesting you do exactly that, but you can do something that's useful for business  people.  So the Office UI fabric is just a few CSS files that can give you that look and feel  of the application that you're embedding your add-in inside.  So that's something to look at, very simple to add that.  If you're going to commercially sell one of these add-ins or just make it available commercially  or want it widely available, if you perhaps make a free one like we did, then they're  very easily accessible, so there's a store button inside of all of the Office applications,  also in Office 365.  There's this very prominent button now that appears in the Office 365 waffle.  If you want to sell it, then you might want to put some licensing in.  So there's an API that you can call that will...you want to check that and maybe disable certain  functionality depending on whether they've paid for a license or not.  There's a very sophisticated system that supports that, all supported by the store.  Obviously if you manually give them a sort of side load it or give them a file share  to get the manifest file from, you can't enforce that so easily, but if it's gone through the  store then there are APIs where it will give tokens and manage that for you and track licenses  and make sure that users are paid and give them the appropriate features.  We mentioned a little bit about this, but you can...so we talked about the various different  ways we can deploy it.  I covered that in the earlier slides.  Don't forget that you've got the Microsoft Graph API, so that's all the time improving.  That gives you...it's really a search driven, practically artificial intelligence that's  looking at organizations.  So just think what you can do with this plus that.  You could build something very powerful indeed which would sort of knows about your organization  and can suggest things to people or help people find other people that know about topics.  Just endless possibilities I think as more and more information is in there and it's  all retrievable using search technology.  We can start suggesting things to users and make their lives easier.  As this unification across the authorization mechanisms that now reach out into Outlook.com  as well as Office 365.  As this all is gradually being brought together, we started off with 1.2 billion and we can  add another 400 million to that as well if we include people who are using Outlook.com.  So I'm going to wrap up quickly because I'm probably on red here.  So really the point about these add-ins is you can get a lot of business benefits, a  lot of business clout with really a minuscule amount of effort proportionately because you  can use all these skills that you've already got.  You can use all those end points and use things like Office Graph to build...use any  JavaScript library you like, pull in any mapping system you like or any external system.  The limit is really your imagination.  You can bring all these things together and surface them in the application like Word  or Excel that business people are using all the time.  So it makes it really easy for them to acquire these things and use them.  If you haven't already done so, I suggest you sign up for the Office 365 Developer Program.  Dev.Office.com is the place to go now for all the information around Office 365 and Office  Development.  It's all being pulled together and really easy to get to.  It used to be scattered all over the place now.  It's all in one place and really helpful links there.  It's all the time improving.  I'm sure we'll see even more things becoming available in a few months' time.  As you go home tonight, I hope you've enjoyed the conference.  I certainly have.  If nothing else, I hope that you'll at least have a few ideas and you can think of applications  for Office Add-ins perhaps as you travel home or over the weekend.  So thank you very much indeed for that.  I'll just leave some resources up there for you, but thanks very much indeed for coming.  Hope it's been useful.  Please take a handful of the green stickers on your way out and drop them into the box.  Thanks very much indeed for coming.  Thank you.
Make_Friends_and_Influence_People_by_Building_Office_Add-ins_0_71.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_72_143.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_144_6359.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_6360_19091.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_19092_19307.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_19308_19391.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_19392_19499.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_19500_19595.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_19596_19643.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_19644_21671.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_21672_22091.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_22092_24239.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_24240_24923.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_24924_25499.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_25500_25547.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_25548_25631.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_25632_25883.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_25884_25967.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_25968_40991.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_40992_41039.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_41040_41267.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_41268_41315.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_41316_41363.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_41364_41411.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_41412_41531.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_41532_41579.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_41580_41627.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_41628_41699.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_41700_41747.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_41748_41795.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_41796_41903.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_41904_42335.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_42336_42383.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_42384_42491.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_42492_42563.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_42564_44795.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_44796_44867.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_44868_44939.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_44940_45023.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_45024_45191.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_45192_45359.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_45360_45443.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_45444_45599.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_45600_45659.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_45660_45839.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_45840_46175.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_46176_46295.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_46296_46415.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_46416_46487.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_46488_46847.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_46848_46979.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_46980_47027.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_47028_47111.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_47112_47207.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_47208_47339.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_47340_48467.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_48468_48611.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_48612_48839.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_48840_48887.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_48888_50963.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_50964_51083.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_51084_51263.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_51264_51335.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_51336_56015.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_56016_56075.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_56076_56351.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_56352_56543.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_56544_56723.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_56724_56891.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_56892_57731.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_57732_58007.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_58008_60167.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_60168_72335.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_72336_72455.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_72456_72539.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_72540_72743.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_72744_80279.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_80280_80327.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_80328_80447.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_80448_83651.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_83652_84527.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_84528_85151.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_85152_85583.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_85584_86339.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_86340_88055.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_88056_88571.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_88572_88967.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_88968_89051.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_89052_89603.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_89604_89891.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_89892_89975.png Make_Friends_and_Influence_People_by_Building_Office_Add-ins_89976_98319.png
So, welcome everybody to this session on making friends and influencing people by building office add-ins. Now, I must admit I made a slight mistake in, I was kind of thinking of this book, How to Win Friends and Influence People by Dale Carnegie. Dale wrote this book in about the 20s to help people like me who don't like making a small talk too much. I'm very happy to talk to a group of like-minded people. But he gave lots of tips about how to deal with people and how to make friends and influence people. And that's kind of what I was thinking. I got the title slightly wrong. It was late, late at night, and we do our best. So one of the things about office add-ins, I think it's a great way of having a lot of impact if you're a developer and you're surrounded by business people. So when I worked at one point for a large computer company with a three-letter name, who would sit in an office and sort of open plan office and business people would wander in and they'd sort of sit there and not talk to you. We'd be working away on the global whatever it was that we were trying to build. And we wouldn't have much interaction with them. And then at some point somebody would come up and say, hello, I'm Joe Smith. I'm the global head of sales for Earth and the inner planets. And what are you doing? And you'd say what you were doing and cut you off fairly quickly and say, oh, do you know anything about printers? And so you go and fix the printer jam for them and then you wouldn't hear from them again. And so you want to be able to do things to help people in the business world. And I think this is, office add-ins is a great way of helping people solve business problems, particularly in those industries where you perhaps a business has grown very quickly and you've got a lot of manual processes that have just, you know, the business has grown too fast for them to keep up. And so people are copying and pasting things in emails from into Word or Excel or something like that. And you get those sort of the people that cluck when you ask them what they're doing. What are you doing? And I'm copying this from, I have to go into the email and take this number out and paste it in here. I've got this on a post-it note and so on. So it's great for solving those kinds of problems. So my name is Bill Ayers. My background is in SharePoint and Office 365. So this really sort of comes into our area as well because it's all to do with talking, particularly to some of these back-end systems in Office 365. We'll talk about some of the APIs very briefly later on. But I also work in mobile and agile development as well. So this is, to me, this is another way of surfacing our applications and our content but inside Office and using that as the delivery platform, such as say on a mobile you might use an HTML5 hybrid app. Okay, I'm giving away slightly how the technology works. So I'll talk a little bit about the background. I'll then look at some of the different Office add-in shapes, the different options that we've got. We'll talk about building Office add-in. So that's going to be the main thrust of the talk is how we're going to build them. We'll talk about the distribution as well because that's important as well, particularly if you want to sort of commercially use it as not just internally but to make a commercial product. And then we'll draw some conclusions. I hope that you'll be able to go away with some ideas and think over the weekend of how you could apply this kind of thing. So Office is everywhere now. And the numbers that we have now for Office installations is 1.2 billion, like that word billion. It reminds me of Carl Sagan. If anybody remembers that series he did talking about how small we are in the universe that we're one of a billion galaxies. So your Office installation is one of the billions of Office installations. 1.2 billion Office users. There's another 0.4 billion, another 400 million who are using things like Outlook.com and you can eventually sort of bring that into the mix as well. So there's a huge number of people that we can reach using this technology. And then mobile devices as well. So Office has now reached out into mobile devices. It runs on all these platforms, iOS, Android, OS X, Windows Mobile, anybody? Windows Phone. Don't laugh, please. Listen, Windows Phone is a survivor. Back in the 90s it was Windows Mobile, Windows CE, and there were all these other platforms that don't exist anymore. iOS and Android have come along fairly recently. So maybe in 10 years time, Windows Phone will still be around and these other things will have disappeared. Who knows? Anything can happen in the mobile world. But anyway, whatever happens, Office is going to be available on these different platforms. And the vision from Microsoft's perspective is they want to give a native look and feel to the add-ins so that they look as though they're part of the hosting application, if it's Word, Excel, PowerPoint and so on. It looks as though it's part of that application. And there are some tools to help you do that very easily. The idea is also write ones, run everywhere. We've heard that dream before and we've all chased that unicorn. I think there's only one technology that I know that can achieve that or get close to it. So it will be no surprise when we look at how this thing works. And it's really coming up with business solutions. It's something that works really well as well as creating applications that you can sell. It's a really good technology for creating something to solve a specific problem. Now there have been a few ways of doing this in the past. I remember, say, 10, 20 years ago, we'd have Visual Basic for applications and macros. I remember business people saying, oh, we're using VBA. I've written this thing. I know this macro works in this spreadsheet. I don't see that so much nowadays. I don't know about everybody else, but it feels like users are less inclined to build anything and do that kind of thing. I think maybe as we've reached all out to these billions of users, we've got to the stage where really everybody's using a computer. Before there were people who are specializing a little bit in computers and now everybody's using them. And so we see people who really have no clue as to how the computer works and no inclination to write macros and so forth. So if anything, the need for our development skills increases as we move forward and more and more people use these Office applications. So then we had COM and we had Visto, Visual Studio Tools for Office. I remember looking at this probably about 10 years ago. I must admit I don't remember much about it, but it seemed to work very well. It was an API. But the problem is these things aren't portable across all these different platforms. So the question is, how can we get add-ins that will run on all these different platforms where Office is running? And so the solution is the new Office add-in model. Now just a word of warning, you will see in some documentation still, they're called Office apps. Same thing, name change. So the thinking behind this was, as I understand it, that things like Word and Excel, people view those as apps. And so it would be confusing to have an app running inside an app. So the phrase add-in or the term add-in has been used to describe these. And you will see when we look in Visual Studio, for example, some of the tooling there hasn't quite caught up with that slight terminology change yet. But it's Office add-ins, and if you're a SharePoint developer, you'll know that we've also moved to SharePoint add-ins rather than the SharePoint app model as we briefly learned to call it. So the mechanism that it uses, as I say, the one thing that does seem to have some hope of giving you cross-platform right once run everywhere is using web technologies. So there's an embedded web control, the web extensibility framework, this thing that runs inside the Office clients. And remember, there's also the web applications for Office as well. And the one in the client applications, the native ones, it acts very much like an iframe that you're running your application inside. In the case of the web applications, it is actually an iframe. And then there's a JavaScript library called Office.js, which then allows you to reach out into the host application and do things. Obviously, it's sandboxed to an extent to stop anything bad happening, but it allows you to reach out and get to the content of whatever the host application is running. And that sort of that reaches out into the application. And then also, you can use APIs, of course, like REST to call back to some external system as well, including Office 365. So hosted centrally, so there's a, it is literally a web application that's running inside that frame. And the thinking there is, you know, if you already know web development, which is most people, then you can build these Office add-ins. And you don't have to use Microsoft technologies necessarily to do that. We'll show some ways that we can use Visual Studio to build those, but you could build it using whatever technology you could use Ruby on Rails or Node.js. If you wanted to, you might have to do a little bit of the provisioning yourself, but you could use whatever web technology you're familiar with to build the add-ins. So I think it's very appealing to a very large number of people. I think it's got a terrific reach as a technology to deliver this. So here's an example of an add-in running in Microsoft Office in Outlook. So the bit that the add-in, I don't know if you can see my pointer is this bit here is the actual add-in. But in the case of Outlook, you get these drop-downs, effectively, which can come in. And they're sort of contextual, so there are some rules we'll see a bit more about this later that say when these things appear and when we can use them and so on. And those are available running on a wide range of systems, of platforms. It's not yet complete, so we'll see a matrix of where we've got to so far in terms of which platforms are supported. It is gradually improving. Now, I thought since I was in Outlook, in PowerPoint anyway, I do a little demo here using PowerPoint. Now, this is a little bit risky because I'm going to just duplicate my screen for a minute. Right. And I'm going to actually close this. It's always scares me doing this, is to close the PowerPoint presentation that I'm using. And I've got an instance of Visual Studio here, and I'm just going to run it. And that will actually start at PowerPoint. So I'm back here. Let's just get rid of that. We don't need it. And get to roughly where we were in the deck, which is there. And what I can do is I can, can everybody see this all right? Is that visible at the back? Should I zoom in for you? So if I go to Store, for example, then there are, so these are the ones that are available in the Microsoft Store. And there's a pretty decent array of different things you can add in here. And a lot of them are free as well. Some of them are paid for. So there is a sort of a market. So I can add this stock tile. In fact, you can see that I've already used this earlier. But I'm going to add this one, which is the one that I just built with Visual Studio a few moments ago, a bit earlier. And I'll just expand that to fit a little. And what I can do is in here, I can say take a bit of text there. And the add-in will reach out to it and take whatever the selector text is and show it down there. And then when I show this full screen as if I was doing a presentation, then it's all there. And actually, interestingly, some of these things are actually clickable as well. The only thing I can't do is I can't get the data from the selection, because I have no way of getting it to selection when I'm in display mode. Anyway, that's not a very exciting, not very interesting. In fact, if we look at what's going on behind the scenes here, I'll just make that slightly larger. If you're a web developer, you probably don't think this is very interesting at all. It's just a normal web page. Very simple. We've got a bit of text here. And then there's a JavaScript file behind it. And this is the key thing. So remember, I mentioned OfficeJS. This initialized method is what we call in OfficeJS, or what gets called when the add-in starts up. And all it's doing is it's getting that particular element in the HTML and adding a click handler. And then down here, this is the click handler. And it's grabbing that content and displaying it in an alert at the bottom of the page. And I can make it maybe a little bit more interesting. Let's drag an image into here. And just remember to save it. And if I go, I can actually get at this, add in, reload it. And that looks marginally more interesting. So I can just sort of develop it as I go. So it's very easy to, you can imagine, you can start doing more interesting things with it pretty easily because you're just using the same web technology. You can use any JavaScript library you like. So we could use something like D3JS, for example, to make some attractive graphics. And we've got all of those options available to us. So I'm going to shut this one down and go back to the, no, let's not do that. Let's do it this way. I think that's safer. Stop that. And go back to my slide deck. The one that's just running at not as, I don't want to confuse matters by having it running as a process in Visual Studio. Right. So here's another example that this one's running in iPad, on an iPad in Excel. And I've no doubt that you have to pay Dun and Bradstreet to gather all this information, but you have a way of getting lists of companies that you want to send emails to or whatever. You know, we do a bit of market analysis. So that's probably a paid one, but that's going to work across all the different platforms that are supported. So behind the scenes, what's happening is there's an XML manifest file. And depending on what type of ad in it is, you will see a slight differentiation between the two broad categories of ad in. There's the ones that are using Outlook and the ones that are using the other applications like Word, Excel, PowerPoint. Broadly, my understanding is it's the exchange team which are behind the Outlook ad in and the rest of the office team are behind the others. So there's a slight difference. We'll see some of the capabilities and the way they handle things. And they're doing a slightly different job as well. But depending on what it is, this manifest file can be stored in exchange. It can be installed in a SharePoint catalog. You can have a file share and put it there. And that essentially says, here's where the website is that I want you to show inside there. So that has a link to that website. And that can be hosted anywhere. So it can be hosted in Azure. It could be hosted on-premises or in some other cloud service, whatever you want to use as long as you can address it from a URL in that XML manifest file. And then what the ad in does is it renders in the page. Whatever is on that website will appear in there. And the logic could be client-side JavaScript or it could be server-side. So you can use either. So let's look at some of the different ad-in shapes that are available. So the first one we'll talk about is the Outlook one. So that's where you've got a mail message or an appointment. You can launch this sort of drop-down panel that appears in the main pane of Outlook. There's another category which is called a task pane which appears at the side of an application like Word or PowerPoint. So it's similar to some of the task panes that you can get when you use Visto, for example, when you build add-ins that way. And then there's the document content add-in. So the content add-ins are something that you're going to put inside the content of the application. So the one we just played with just now was a content add-in. And finally, we've got a new thing that's just come in fairly recently which is these command add-ins which allow you to add something to the user interface so you can have a button in the ribbon that will launch a task pane or potentially just execute a bit of JavaScript silently behind the scenes. So we'll look at these in turn. So the mail add-in, I'm going to show an example of this later where we've got one which I'll just look at the source code of because I know it'll be interesting which is going to add into Outlook. So this one's called Reactor. And then when you click on things, it will analyze the text of the message and make a decision about what the content is and give you sort of an automated response. It's quite good fun. So that's a mail add-in. The task pane add-in, some examples are in PowerPoint, you might want to pull in some images or do an image search. There's one here for PayPal. I've done one for invoicing in Excel. So these are just add-ins that you can get in the store. There's a dictionary add-in in Word documents. Now, interestingly, if you download that or look at it, you'll find that the reviews aren't that good. I think the problem there is that users have maybe, because they're used to having a built-in dictionary in Word and they make a comparison. So you've got to be a little bit careful that when you're designing something, you make it consistent with what people are used to. People don't like change. Your average office user, I think, probably doesn't like to see jarring change. And possibly, I'm not sure whether that's something that the users of that don't or some users don't like when they use these various dictionary add-ins. Here's one for giving you an Uber ride reminder. So these are third-party ones. Some examples of content add-ins. So this one is called Bubbles. And you could select some data, and it'll give you a sort of bubble chart. You can imagine you could build something like this very simply using one of these many JavaScript libraries and just using normal client-side web development techniques. You could come up with something very nice. There's one for adding polls to your PowerPoint deck. There's an example here of adding geographic information. So in this case, they're using Bing Maps. It could just as easily be using Google Maps. So you can use anything that we can get to on the web we can make use of. And then adding commands. Here's a nice one. You can launch boomerang or Evernote directly from the ribbon. Now, these are a little bit newer. So unless you've got the latest preview update of Visual Studio, you'll have to do a little bit of work in the manifest file to add the control to do that. The best way is probably to take one of these bits of sample code and use that. But the preview, I believe, now supports this. So you can use the various tooling that's built in Visual Studio. Now if you look at the roadmap of the add-ins and what's available for which platform, you can see that it's not yet complete. And I would predict that there's a conference coming up in the end of April, beginning of May build. I wouldn't be surprised if we got quite a few announcements and we got a few more platform supported. Perhaps some of these coming soon, we would hope that that's probably, I would guess, the sort of timeframe we're talking about. But that's purely my speculation. But you might interpret that as saying, well, it looks as though they're moving across this chart from left to right. And I think that's probably a reasonable assumption. And I think they're driven by which of these platforms are the most popular. And you'll notice that the Universal Windows app is sort of the last of the ones that they're going for in that list. So they're prioritizing supporting iPhone, Mac, and Android users. So I guess they're seeing that as where the majority of the users are at the moment. So it's interesting that this is a different Microsoft that we might have seen 10 years ago where they would have possibly used the success of Office to try and promote the Universal Windows app approach. But of course, as long as we've got the online, the web applications, we can potentially run these on any platform because just about everything will support the web interface. So we can use, even though there isn't a native version of Excel for Mac, you can still use the Excel web application on a Macintosh. And you can still use the add-ins. Or you can use it on Macintosh anyway. But you can use the Excel, the add-in on a Macintosh using the web app. And then Office.js has many functions. There's a link here, which I'll maybe we should just have a quick look at, which is to all the different APIs that are available. It's quite comprehensive. But the documentation is very good. So if I just jump over, actually, if I just bring this up, there's quite a nice thing. There's the main documentation, of course, but there's quite a nice graphical. So that's a sort of, you can zoom this thing in, which I quite like. And you can see which of the various APIs is available for which platform as well. So you can get the big picture. And I expect that, if anything, to get denser and denser over time as more and more features are released. They've got a large team of people working on this. So there are many developers working on extending these Office applications. Back to my slides for a moment. So that gives you, it's the Office.js that gives you the access to the content of the document, whether it's an Excel spreadsheet or a word, or if it's a message, allows you to get things like attachments. There's a limited amount of things you can do directly with that. And then if you can't do it using Office.js, then you can make a REST call out into Office 365, for example, and do it that way. So as you start to think about it, the possibilities are pretty much endless of what you could potentially do using this sort of approach. So we've got a number of ways of building these. I'm going to show a sort of generator web solution first, which is just an easy way to get started if you've not used these before. And we'll look at Visual Studio, which is probably the premier tool of choice for building these things. And we'll also just briefly look at another approach, which is to use various open source technologies and use a Yeoman project generator to do the same thing as well. So we'll start by going back to my desktop and let us look at Napa first. So if you go to, so the place to go for all of this stuff is OfficeDev.com. That's really any kind of office development. That's your starting point. And if we go to, easiest way to get to it is go to resources and mini labs. And there's a couple of these things. They will literally take five minutes, if that to do. And you can very quickly get a feel for what these things can do. So this is Office 365 APIs, which is an interesting topic in itself. But this is the one we're interested in. So all you have to do is go over to the create office add in, and then you get this handy little thing that guides you through all the steps. So we go to HTTPS. You can put that URL in directly, but the mapping isn't very good or the redirects aren't very good. So you have to get it spot on. You have to do HTTPS and you have to do www or it doesn't work. And you can see I've done this before, but we'll just create a new, well, if we were following through here, we'd say log in, I skip that step. Then create a new task pane add in, and then give it a name, do something in the body. So just quickly go through those steps. So I can say create a task pane. I think task pane add in three is a great name for a task pane app. And then we can start changing things in here. And you can see that the structure of this, it's pretty much the same as that sample that I showed a few minutes ago. It's doing much the same thing, but in this case, it's going to run inside of Excel. And then when I want to run that, I can just click. So I assume we've made some changes here as it's suggested in the sample. And then when I want to run it, I press the run button and we launch. And what it's done is it's hosted an Excel spreadsheet in OneDrive somewhere. And I can start this up. I can say let's edit in Excel online, and we'll put something in here. This doesn't always work the first time. I've got a bit of text here. Oops. Get data from selection, and then it picks up the selected text. So it's as simple as that to get something up and running, and then you can start adding the finesse to it and building things around that. I would say that, I'm guessing we're all developers here because it's a developer conference. I can speak openly. In general, those sort of tools are great for just learning about something when you want to actually do some work. You want to be using something like Visual Studio. One of the things is this doesn't really give you a nice IDE. I'll just close this, but it gives a nice IDE for editing. It's a bit like Visual Studio code, but it doesn't give you access, full access to the manifest file, for example. We're doing everything client-side as well. So what you can do is if you wanted to take that, you can download or you can open this same project in Visual Studio, but what I'm going to do is actually we'll actually look at Visual Studio proper. I'll just go back to the slides for a moment. What should I do with my clicker? There it is. So if you've got Visual Studio 2015, the tooling is all there. If you've got one of the earlier versions, you have to add some extra features to it. You do have to check when you go to the setup that you've checked all the checkboxes to include the Office add-ins, so there's a checkbox Office add-ins. If you don't have it installed already, you need to go back to the setup program and enable it. And then you can just use, there's a new project. You've got a little bit careful. I've set it's add-in for Office. There's an update to Visual Studio, which is still in preview, which is going to fix a number of things. One of them is the naming convention that was a fairly recent change. And you can do things like you can edit the manifest in Visual Studio. You can change the server-side logic. So you might want, for example, if you have some very valuable algorithm that you want to protect, obviously, if you put it in your client-side JavaScript, there is a risk that somebody might get hold of that. They can look in the manifest, see where your file is hosted, have a look inside your JavaScript and figure out how it works. Well, you can protect that if you do it server-side. You might also want to do it server-side because you want to call some service and you don't want to expose it. You don't want to keep that, simplify that or do some very compute-intensive logic that we don't want to do on the client. And you can also publish. So you can just use the normal publishing process inside Visual Studio to push that out into Azure. Or if you use some other technology or some other technique, obviously, you don't have to do the provisioning yourself. But it makes it very easy to provision the website that's going to back up the Office Add-In. So we've got our project structure here. We've got, in Visual Studio, we've got two projects. We've got one which is the manifest project, which contains that manifest file that we talked about. That's what's going to get pushed out into Exchange Server or the app, the store or wherever it's going to go. And then we've got another project, which is just a web project, ASP.NET web project. And as they set it up, then they give you the home.html and home.js, which are the two files we're going to mostly be working in. But there's nothing to stop us adding more server-side logic to that as well. So let's go to a demo of that in action. So I'm going to do File New Project. And now you might think, this is quite tempting, isn't it? Office Add-Ins here looks as though this might be the right place to go. So this is because of the name change. So what I actually have to go to is, if you go to Office Add-Ins, you'll see all the Visto templates, Visual Studio Tools for Office, C-sharp, native applications. That's not so good for us because we want to make this cross-platform. So we're going to use, and unfortunately, it's still in this version of Visual Studio, it's still called Apps. That will change to Add-Ins. And then under that, I've got App for SharePoint, which is the SharePoint add-in model. I have to remember to say that. And then I've got Apps for Office. So if I go into then, create one of those. And again, I like imaginative names like Office App 3. And we now get the choice of which of the currently three types of add-in we want to build. This will expand to four. There'll be command add-ins in a later version. So if you look at this wizard, you see that the options change depending on which one I choose. So if I go for a task pane add-in, I get Excel PowerPoint project word. If I go for a content add-in, I can use Access, Excel or PowerPoint. So there's no content add-in for word at this point. So there isn't a complete overlap. But the wizard knows which ones you're allowed to do. And then for mail, I can have the read form, compose form for the appointment or for the email message. So it sort of contextually knows which one I'm trying to build. So I just got a few notes here. I just want to miss anything. So let's build a, what shall we build, a task pane add-in this time. And we'll, let's have it for everything. So it goes off and creates that project. So here's our manifest project. And if I double-click on that, I get a nice manifest designer, which allows me to go in and set things like the icon that it shows, set all these in here. I've got these things called activation rules, where we can set certain situations where we wanted to appear. Like it'll identify certain things. If you do a regular expression search of the content of the document that we're looking at, for example, and control when they appear. I've also got an option to set app domain so that I can say, I want to call out to this domain. And then if you want to, you can right-click on this and not that, down one. And I can open that directly as well. You can see this is the XML, which is quite simple. It does, there's another, it's called version info or something. There's another section that gets added if you want to do a command type add-in that you'll drop into there. If you need to do that, pending the tooling arriving to do it using the wizard. So that's our manifest file. And then if we go down into here, so we've got some, here's our home, we've seen this before, but this is the JavaScript file, and this is the HTML file. And this is, you know, if we want to build this out to client side, we're going to, we're really just, this web application is just serving static content. But there's nothing to stop us from in here, for example, adding a controller. And we could use an ASP net MVC rest endpoint, for example, and create that. And then from our JavaScript, we can call that rest endpoint. That's one way of doing it. And then have some logic that we then build server side. Alternatively, we might from the client call out to some external service or call to Office 365. So we've got multiple choices. To some extent, I think it will depend on what your skills are and what your preferred way of developing. But you've also might have other constraints like wanting to protect the intellectual property of what you're building. So many options there. And if I go to, what was I going to say about this? If I wanted to, when I'm ready to publish this, then there is a publishing wizard. And so using the similar sort of technique to say push it out into Azure, you know, all this sort of publishing technology is built in. Yes. Yeah. Yeah. You still need the hosting application. It has to be a website somewhere that you're serving that content from because you've got to serve it to all the different clients that are going to run it. Well, you'll have to be connected to something. So it could be your internal network. Or you could use some sort of client side caching, something like App Cache. So that once they've got the add-in, then when they're using it offline, it's going to continue working. So if you're dependent on the server, then it obviously can't render if you start a new instance of PowerPoint and you weren't connected. But if you cache it, then you can do that. Yeah. Which is a good question, actually. Are there any cross-domain restrictions? You have to be careful, yes, because it is still a browser instance that's running inside. So you... Well, that's a domain. It's not cross-domain to there because you're effectively hosting a web page that's from your server. So that's not an issue. You're loading that. It's when you go to some other domain that you need to be a little bit careful. And so, yeah, you might want to use cause, for example, or you could, again, route through your server because you've got a server process running. You could use a rest to make rest calls to your server, to this server. And then that can make calls on your behalf out to somewhere. That would be another way of doing it. It's quite interesting, actually. If you...Baring in mind, I do quite a bit of mobile development. And one of the first things I thought was, oh, I can use ad-connected service here. So one thing I probably want to do is call the...call Office 365 and call one of their REST APIs. So I can use the connected service wizard, ad-connected service. And now, if I built a mobile application with Cordova, say, that would pull in the JavaScript libraries. So I get...there's a set of Office 365 APIs in JavaScript, JavaScript implementation, along with all the security stuff that we'll then call through and get our auth tokens and do all that stuff and talk back to Office 365. Your first thinking is, oh, I'm going to get that if I add this here. But of course, this is a web project. So what I'll get there is it'll give me the C-sharp libraries. So I'll actually end up with a set of C-sharp libraries to call back to Office 365, which I could then use to...using that as we discussed, you could use that...then expose a REST endpoint in here. So now I'm doing more ASP.NET development. So make a controller and put the attributes on to give me a REST endpoint and then surface it that way in the...so the client now, the JavaScript in the client would then have to make the REST call, which...and then this would call. And the other way would be to add the client-side JavaScript and the...it'll be ADLJS, the Active Directory Authentication Library, and do that on the...in JavaScript on the client-side. And then now it's your responsibility on the client-side to make the OAuth call to get authenticated...sorry, authorized, get the right word, get authorized. And you've also got to be aware of the cross-domain thing. So you...fortunately, Office 365 API supports cores now, so that's not a problem. So yeah, then you've got to start thinking about those sort of things, because it's as if you were building an application in the browser to some extent, same kind of problem. Yeah, so that's various ways of doing...I think I've pretty much covered everything I wanted to say about that. So let's just go back to these slides, a few more slides to go through. Hmm, lost it again. So that's Visual Studio. But of course, not everybody uses Visual Studio or wants to use Visual Studio. So there are other options. So if you're a developer who prefers to use code or Emacs or Vi or...and do things sort of like a command line and so on, you can use the...they've actually built a yeoman scaffolding...what have you called them? Scaffolding framework to build a skeleton project up for you, which you can then build on top of. So there's...I did try doing this. I found it actually took quite a little while to actually pull all the things down and do all the package installs, but you can use...it depends on having node installed. Luckily, I have node installed because I use it for other things. So your first thing would be you'd need to install node and then the node package manager, you need to get these various...get Bower and then you can use this Office Generator and then you can say Yo Office and it'll generate...or give you a series of options and then generate a skeleton project for you and then you can party on and start building solutions on top of that. So I think that's nice. It also emphasizes how they're supporting people who are not necessarily using Visual Studio and Microsoft technologies to do things. So you might be writing a back end in Node.js or Ruby or some other technology. Just a few words about where these manifests are stored. So if your...your HTML, JavaScript, CSS and that potentially application with service size code is going to be running in the cloud, but your manifest will be either in the Office Store or in Exchange Server. Now that's...and that could be the one that you get automatically with your Office 365 or if you're on-premises, then you're going to put it in your Exchange Server. I think from memory it has to be Exchange Server 2013 at the no...no older than Exchange Server 2013 to support that. And so that's...you know, that supports the case where you've got the on-premises situation, where you've got an exchange running on-premises. But that's for Outlook. For all the other Office add-ins, then it's going to be in the Office Store or the app catalog, which is kind of part of SharePoint really. And then another option is you can put it in a network share. So if you go into your Office application, there's an option. You go deep into options and there's trusted sites and all this...and down there, there's an option to set a trusted location to store these manifests. And you can pull manifests in from there. So it's...you know, there are various ways of getting these out to your users. It doesn't have to go through the Office Store, the various ways of doing it. We mentioned a little bit about those when we were looking at the designer. We have these options for doing Regex matches. And you can do things like say, okay, if I say...see a telephone number in an email message, I can figure out, you know, maybe start a dialer, I don't know. Or if I see somebody's name or the name of a company say one of our clients, that might be a good use case. If we see one of our clients, it'll pop up something that's relevant, you know, reminder or information. So all kinds of possibilities for just making these things appear at the right time and highlight the right text. There's the ways of highlighting text inside message bodies and so on. So more really than I can cover, you could do a probably a one hour session at least on all of these different...all the different Office applications. So I've got a fun one here that we built which was...which we called Reactor. And it's this thing here, the circle's in the wrong place, should be there, shouldn't it? And it allows you to...it analyzes all the intentions. It analyzes an email message, it then goes in and it's...I'll just run it, actually, it's easier. So if I go into my...look, I hope there's nothing too embarrassing here. So if I've got a...you know, at this point, if you've got a tool like this, spam becomes quite interesting because you can start writing easily, write sarcastic responses. So this is Reactor, so I've got a bit of spam open here. And if I open this, it...I've got a template. Now the idea is so we get, for example, if we get a feedback from...I'm just trying to find an example of some feedback, this is a mobile application we have and it automatically adds some text at the end. So you can do sort of searches for certain things in the text so that I could trigger, say, a feedback message. I'll go back to this one, though. So the...or we can manually select, so I've got a number of messages. So this one just says, thanks for your feedback. And then I can...I use that, I can say, respond. Then...no, I don't really...then it pops open. So this is all the add-ins doing all this. It pops open the new message window and I can then add a bit more content or do what I want or just send it as it is. And this also runs in the Outlook Web App version as well. So if I went into my Office 365, I could do it there as well. It works the same way. Let me just cancel that, actually. But you can also do things like you can make up some fun...I've got this one. Sometimes people have these really long-winded email disclaimers, so I've got one that I can send back and I say, by sending an email to any of my email addresses I am by definition the intended recipient and I...you understand and accept that I do not need any advice from your IT department about the nature of email communication. Whilst it is highly likely I will instantly and permanently delete your message, I may decide to keep it for posterity. They do annoy me, actually, because sometimes when you get a succession of emails, there's like a three-line email and then there's 15 of these email disclaimers that are automatically attached by who knows who, the legal department or somebody. So you can do things like that, have sort of canned messages, what else we can do? I've got another one here, which is quite good fun, which makes up business speak. We want to make friends and influence people. We can talk to our business people in business speak. So much appreciated. Thanks for raising this. At this point, we really need to triage...what have I written here? Should check this really before we send it, shouldn't we? We need to triage the enterprise-ready phased approach. I know it will raise a few eyebrows, particularly with a need to prioritize and ramp up. I'm glad we all seem to be on the same page. Yeah, it sounds reasonable. But I could create another one. It's just randomly generated text. Let's try a different one. Moving forward, we need to consider the metric. Inevitably, leading to service-oriented benefit analysis. What do it mean, this stuff? This really boils down to our taking ownership of the total quality management of this approach. Great. I think that's...I'll probably send that one back. No, I won't, really. So what's going on behind the scenes with this is I've got this...so again, I've got Home.js on this. This is the code that's generating that email response generator. So we've got the initialize here, and this is...there's a template selector, and then a little bit further down, I've got some display options. Now there are...there's some CSS that you can get called UI Fabric, which makes it even more look like it's part of the native app...of the application that it's showing in. But I've just used just some very simple HTML. It's here, actually. So what have we got here? We have 60 lines of HTML. We've got this Home.js, which has got a bit of behavior as well, so when certain things are clicked, it's going to do things. It's actually a little bit more sophisticated because I've got some settings here. I've got a number of options for changing sort of...what's the word I'm looking for? Sort of boilerplate phrases and things like that. And then what we can...so what we've got here is 190 lines there, and then I've got this Reactor.js, which has got things like all the phrases that we're going to use here to generate the nonsense business speak that we're going to respond with. So I thought it was quite good fun. And again, okay, that's about 500 lines of code, but it's a lot of it is just generating all this text. So let's go back to the slides and just say a few words about...that was, well, to kind of define where I thought it was. So very easily, you can build up something that's...you can have a bit of fun with, and I'm not suggesting you do exactly that, but you can do something that's useful for business people. So the Office UI fabric is just a few CSS files that can give you that look and feel of the application that you're embedding your add-in inside. So that's something to look at, very simple to add that. If you're going to commercially sell one of these add-ins or just make it available commercially or want it widely available, if you perhaps make a free one like we did, then they're very easily accessible, so there's a store button inside of all of the Office applications, also in Office 365. There's this very prominent button now that appears in the Office 365 waffle. If you want to sell it, then you might want to put some licensing in. So there's an API that you can call that will...you want to check that and maybe disable certain functionality depending on whether they've paid for a license or not. There's a very sophisticated system that supports that, all supported by the store. Obviously if you manually give them a sort of side load it or give them a file share to get the manifest file from, you can't enforce that so easily, but if it's gone through the store then there are APIs where it will give tokens and manage that for you and track licenses and make sure that users are paid and give them the appropriate features. We mentioned a little bit about this, but you can...so we talked about the various different ways we can deploy it. I covered that in the earlier slides. Don't forget that you've got the Microsoft Graph API, so that's all the time improving. That gives you...it's really a search driven, practically artificial intelligence that's looking at organizations. So just think what you can do with this plus that. You could build something very powerful indeed which would sort of knows about your organization and can suggest things to people or help people find other people that know about topics. Just endless possibilities I think as more and more information is in there and it's all retrievable using search technology. We can start suggesting things to users and make their lives easier. As this unification across the authorization mechanisms that now reach out into Outlook.com as well as Office 365. As this all is gradually being brought together, we started off with 1.2 billion and we can add another 400 million to that as well if we include people who are using Outlook.com. So I'm going to wrap up quickly because I'm probably on red here. So really the point about these add-ins is you can get a lot of business benefits, a lot of business clout with really a minuscule amount of effort proportionately because you can use all these skills that you've already got. You can use all those end points and use things like Office Graph to build...use any JavaScript library you like, pull in any mapping system you like or any external system. The limit is really your imagination. You can bring all these things together and surface them in the application like Word or Excel that business people are using all the time. So it makes it really easy for them to acquire these things and use them. If you haven't already done so, I suggest you sign up for the Office 365 Developer Program. Dev.Office.com is the place to go now for all the information around Office 365 and Office Development. It's all being pulled together and really easy to get to. It used to be scattered all over the place now. It's all in one place and really helpful links there. It's all the time improving. I'm sure we'll see even more things becoming available in a few months' time. As you go home tonight, I hope you've enjoyed the conference. I certainly have. If nothing else, I hope that you'll at least have a few ideas and you can think of applications for Office Add-ins perhaps as you travel home or over the weekend. So thank you very much indeed for that. I'll just leave some resources up there for you, but thanks very much indeed for coming. Hope it's been useful. Please take a handful of the green stickers on your way out and drop them into the box. Thanks very much indeed for coming. Thank you.
that into the mix as well. So there's a huge technology. And then mobile devices as well. So our development skills increases as we move that we've also moved to SharePoint add-ins also, you can use APIs, of course, like REST to have to do a little bit of the provisioning technology you're familiar with to build the terrific reach as a technology to deliver this. ones that are using the other applications like website. And that can be hosted anywhere. So it don't or some users don't like when they use get to on the web we can make use of. And then generator to do the same thing as well. So we'll Visto templates, Visual Studio Tools for Office, as if you were building an application in the is a mobile application we have and it the Office 365 waffle. If you want to sell it, will give tokens and manage that for you and really a minuscule amount of effort think of applications for Office Add-ins perhaps