 Hello, my name is Juan Balmorri. I'm a program manager on the Office Extensibility team focusing on world programmability. And during this webcast, I'm going to introduce you how you can use our Word JavaScript APIs to create amazing Office add-ins for Word. As many of you have might recall, back in Office 2013, we shipped our first release of JavaScript APIs for Office. But back then, our focus was more about data-driven solutions across Excel, Word, and PowerPoint. We created an API to enable add-ins that could run across all those applications and across platforms using the same code base. With the recent Office 2016 release, we are taking this investment a huge step forward. We are introducing an app-specific APIs that enable developers to code against well-known and strongly typed objects in Word and Excel. I would not like you to introduce the capabilities of the API, but before I do that, I want you to keep in mind that what you will see in these webcasts is really just our first deliverable of the API. Our reduced ship cycles today will enable us to frequently ship updates and include more and more of the objects that you can use today in BBA or BSTO. We'll prioritize those objects to be exposed based on the most common extensibility scenarios in Word. And as a result of the feedback of many customers, ISVs, MVPs, and the Office developer community in general. So you should expect more and more additions in the months to come. Now, on this diagram, you can see the set of objects that we shipped in Office 2016. We prioritized the assembling document scenario, and we are offering enough objects to achieve those tasks in Microsoft Word. So our main objects are document object, which is the main entry point of the API and recognizes three important parts of any Word document. First, we have sections, body, and selection. Our sectional object, as you can see on this diagram, it's in the strict Word object model sense, the object that provides entry points for the headers and footers in the document. This is an object that was not available previously, and it was critical to be included given the fact that in enterprise scenarios, 90% of document customizations happen in the header. So for us, it was critical to provide entry points to primary, first, and even pages, header, and footers. Future additions of section object will include other section-related features like defining the page layouts, margins, and so on. The body object represents the main content of the document or section and provides access to a couple of important collections that effectively compose a document, the paragraphs and content controls. For those of you not very familiar with content controls in Word, it is a critical component in Word programmability and enables developers to refer to placeholders or locations in a document to read and write content. It's important to know that following the Word OM design, most of the objects contain a range definition, meaning a continuous array in a document. The range can be used for inserting and reading content in many different formats, as well as formatting the text that is part of that range. So using the range font object, developers can implement rich text formatting like bold, italics, underlines, color highlighting, changing the font by specifying a font name or a specific pre-shipped style. And finally, a selection is also an important object to recognize and represent either a continuous range in a document or simply the current insertion point. A selection is also treated as a range within Word. So in summary, on this first cycle of the API, we are providing enough methods to, A, navigate through the document to a specific set of core elements like paragraphs and content controls, and we will add more in the future. B, we are enabling rich text and full paragraph formatting and alignment. And C, we're enabling data binding through full access to content control functionality. We're enabling other scenarios like, for instance, search and selection, so you can basically search through the document and select the content and return an array of ranges. And we also support the insertion of pictures with a strongly typed object. Something that in the previous API was only supported by writing Office Open XML. So those are the basic functional areas of the API on this release, and I will proceed to show you all of those in action. Hopefully, this demo will trigger ideas on how you can use these APIs to create Word Office add-ins within your company or sell them through the Office Store. Let's go to the demo. So the demo that I want to show you today is actually about the scenario that is very common while creating Word documents. It's rare that someone starts a Word document from scratch. Most Word users typically start with an already created document, do a few customizations here and there. With add-ins, we can achieve the next level of productivity by making it even more easy to create such document instances. So my example is about creating a very common document, a statement of work. And I'm gonna touch again all the functional areas of the API. Everything that you're gonna see here is actually using the APIs underneath. So the first thing that I wanna do here is I'm sure I'm gonna insert a template into the document. So as you can see, the API is able to write text that is vertical, tables, and in this case, this was inserted using Office Open XML. So this is still supported on this release of the API. But then I'm gonna add a few more things to this document. I'm gonna go to step two to add some paragraphs. So I'm using the API here to add paragraphs into the document. And as you can see, I'm able to also set up styles on each paragraphs. For instance, this one is a heading, heading styling, normal, text in the paragraph. The other thing that I can do is that I can insert content control. As you can see here, this element is a content control inside the document. And later, I will replace it with some more interesting information. But I am adding basically more content to this document. The other thing that you notice here is that I am adding content at the end of this document. So it's an important capability that in the API you can actually write at the beginning or at the end of the document. And then what I'm gonna do here is that this picture is not showing properly. So I'm gonna change it. Notice that I'm not selecting the document. I'm just gonna click on Change Logo. And here I am using the API to actually insert a picture in the header of the document. And then what I'm gonna do here, as you can see in the statement of work, this document is gonna change very little from customer to customer. So what I really wanna do here is to actually find all the instances of the Contoso in case of this customer. So what I'm gonna do here is that I'm gonna search for those entries and then I'm gonna wrap them with a content control. The idea here is that, as you can see, I searched through the document, I found Contoso on this number of times. And then what I want to provide is an experience to just the user to pick a customer in my solution and just to replace each of the instances with a new customer. So these, as you can see here, I used both search. I used the search return me a set of ranges. And then those ranges, actually I provided a different format. In this case, I'm highlighting them. And I am writing it. As you can see here, I'm wrapping them with a content control. With these content controls, we're inserted with a specific tag on them. So all of them have a tag customer. And the API provides a method that you can get all the content controls by tag. So you can actually change all the content controls that have the same tag. On this case, what I'm gonna do is, I'm just gonna replace Contoso with a new customer with Fabricam in this case. So you will notice that when I click on this button, you will see that I am changing Fabricam in all the documents. It is basically traversing that collection of content controls and replacing them with what's needed. And since that's a range, what we have inside content controls or ranges are basically I can change the format and I can change whatever we need, no? Another aspect that is important during creating a document or assembling a document is our customers like a lot to reuse documents. So they want to reuse specific tables or specific content contained in other documents here. So the API also enables the developers to actually insert files. As you're gonna see here, I have inserted a content control here, a project costs, and it happens to be in my hypothetical scenario that we have a document somewhere. This document can be on SharePoint or can be anywhere, you know? But I have a standard format of presenting the cost of the project. So you can see this is actually inserting a document here. I'm reusing content. And another feature of the API is searching, but you can do more advanced types of searches. For instance, you can actually search with wildcards. And the example that I want to show here is that I want to highlight, you know, all the numbers that have currency in this case, for instance, right? So when I click it, you will see that I'm gonna just highlight, you know, the numbers that have the dollar currency, you know, and have, you know, two decimals. So you can actually search for regular expressions and do more sophisticated searches. Remember that those searches are returned, you know, as ranges, and then once you have that collection of ranges, you can actually navigate through those ranges and do the formatting you need or change them or do, you know, more sophisticated solutions. And finally, as I told you earlier, you know, 90% of document customizations happen on the header or footer. So number eight, step number eight is actually adding some data, you know, in the header and footer. So as you can see here, I am adding not only some, you know, confidential note here, but also, you know, we are adding a page number. So it can be numbering the pages in the footer. And finally, what I want to show you is that we also can, for all the objects that we don't support right now on the API, you will always also have the option of representing them with Office Open XML or O XML as you know it here. In this case, I'm going to start, you know, I have here also the option of a team builder and I can, you know, enable, you know, users to easily create a team. So selecting a leave, you know, or changing the cost here, and then you can actually insert the team into the document. And what you will see here is that I actually am inserting like a chart, organizational chart. And this is actually a shape that we currently don't support on the API, but you can totally do it with Office Open XML. So it gives you the power you need to insert other shapes that are not yet exposed as strongly typed objects. So this demo covers in a very quick way, you know, many of the things that you can do with the API today. But probably the part that I like most is when you actually have exactly the same solution running across platforms. So what I'm going to show you right now is exactly the solution of working on an iPad. So let me switch to my iPad right now. Okay, what I'm going to do here in the iPad is I'm basically going to start a blank document here. And then I'm going to insert exactly the same, you know, adding that you saw in my desktop, you know. So the app is going to get activated here. And as you can see, I'm not going to go through all the detail, but what I want to show you is that if I start, you know, working with the solution, it's going to behave exactly in the same way, which is what we want, you know. As part of my team is we're super happy to provide extensions to not only the Windows platform, but we want to be exactly where office users are. So here, you can see we added the paragraphs. We can actually change the logo that was on the header. We can have content controls. So content controls are supported in the iPad as well. I can change the customer, insert files. Search with wildcards and insert footers, you know. So the key message here is that our platform is also supported in Word for iOS. And now I'm going to show you exactly the same solution working in another platform, which is Mac. So I'm going to switch back to my laptop and show you that from there. Okay, so basically I'm enabled a remote connection to a Mac, and you will see that it's a Mac here by the menus, where I already inserted, you know, the same app, exactly the same app. And here, again, the key message here is I just want to show you, you know, that exactly the same APIs are supported. So I can insert XML, I can insert more paragraphs in the document, can change the logos. So we can start in pictures, and content controls are also supported, and so on and so forth. So what I just show you is one of the main value added propositions of our new platform, that you can call your word add-ins once, and they will run whatever office runs, Windows, iOS, Mac, and web. The statement of work sample that I just show you should give you a very good insight into what types of solutions you can build with our first JavaScript API release. And by the way, if you can get the source code, you can get the source code in our GitHub repositories and play with it. But now I want to show you a real world add-in that can take advantage of the new word JavaScript APIs. So one of the aspects that I liked a lot about how we ended up with this feature set is that my team collaborated very closely with many different stakeholders to design the scope of this first release. We talked with customers, ISBs, and office development community to reach it. In fact, the following real world add-in was one of the solutions that resulted as part of that effort, and was built by our partner Office at Work. So, Office at Work add-in takes productivity to the next level by allowing end users to very quickly create day-to-day documents by just selecting a few fields in the task bin. The Office at Work solution is composed of two add-ins as you can see here. You know, on the left, we have the template designer, document designer, and this is the template that designers use to create a connected template. On the right-hand side, we have the document wizard, which is started in end users and provides a simple experience of just picking up organization, in this case, a signature, recipient, and commercial contacts. And then in a matter of seconds, you can actually create a professional and beautiful corporate standard-looking document. So designing a template is basically taking an existing document and dropping content controls inside of it. So what you see here, this document has a lot of content controls here for the logo of the enterprise and the organization within the corporation that is sending this document, as well as the customer that is targeting to and the signature that needs to go with this document. And basically what the template designer needs to do is, basically they need to create a new data connection. And this is a very interesting scenario because, for instance, the organizations that I want to be using on this sample are actually coming from a SharePoint site. As you can see here, I'm showing you, we are looking at a list that has all the organizations and it has the name of the organization, the address, SIP code, and so on and so forth, as well as the logos that we should be using as a corporate designs. So what I'm doing here is that I'm creating, actually this example has four different data connections. The first one is, it's basically a SharePoint list. So as you can see, I can create connections to many Office 365 sources or just a SharePoint list. By the way, I recommend you to see Gina Arena's session about the Graph API and how you can connect to these services and extract and use calendars, contacts, users. In this case, I'm accessing a SharePoint list for the organizations. So I need to supply the list settings URL, give it a little name, which is the name that is gonna be displaying in the document wizard and the section. So that you can actually group the controls here. And that's it, I have a data connection defined. And then once I have a data connection defined, I can actually create content controls that are kind of bound to those data connections. For example, the recipient full name, you can see here that there are multiple properties of content controls and in the value property is the most important one that is actually binding with a specific field of this contact. In this case, this is the list of fields for an Office 365 contact. And then once this is created, content control gets added into the document and then users can actually create instances of this document, very simple. So you can see here that I can actually choose another organization. I can type, for instance, Contoso, and it will show up a filter of all those different organizations. And as you can see here, when I select the Surik office, it will update the header. It can select another one. So for example, Contoso is gonna filter, I'm gonna pick the Hong Kong office. This one has a green theme and a different address. You can see all the content controls here are updated. And then the user of this document can also select, who's signing this document. This case is Katie, but I can change it here. I can actually pick another user. I can search for it. I can just type, just letter A, for instance, and it will show up the filter. I can select a new contact and then immediately it will get updated with the name, the title, phone number, and so on and so forth. So in a matter of really seconds, I was able to create one letter with all the corporate imaging requirements and very simple to use. So this is a very good example of how you can actually create an Office 365 solutions that are accessing our Graph API, plus using the word JavaScript API. So with that, I really just want to, again, I show you a bunch of the functionality of the API, but now I want to show you some code snippets so that you can actually get a feel of how whole programming this JavaScript API looks like. So let's go ahead and see what's happening behind the scenes. So the first thing you need to do as a developer is to basically initialize a context. So this is basically you're gonna get a context object and then you can call the rest of the objects of the API. Once you have the context, in this case, this example is about inserting a content control in the document, in the current selection. So idea here is that by using the context object, you can actually get the current selection of the document which is returned as a range. And then the range, you can actually insert a content control. Once this content control is inserted, you can actually change the properties of it, for example, the tag, title, style, and so on and so forth. And remember, these instructions are being batched. So they are not executed in the host until you call context.sync. When you call context.sync, all these batch instructions are gonna be sent to the client and depending on where the solution is executed, it could be iOS, desktop, or the web, they will get to the host and will start executing one by one in the order of your script. And when the host is done executing those instructions, we're gonna call the then part of the context.sync, and then you can do further instructions as you need it. However, if there's an error with your instructions and some invalid settings, basically you're gonna get an exception. So you are able to catch it and do handle the error as you need. So you will see that this is the pattern for all the APIs that we are exposing and you can get to the examples and play with the other objects and see how you can do. I hope that you find this presentation useful. So you can find a ton of great documentation and examples on GitHub repositories. Make sure to send us feedback, what APIs you would like to see in the future or any issue that you find with our APIs using Stack Overflow. Thank you very much for listening and happy coding.