Nuno Árias Silva

Body:

​Today, we launched new capabilities to allow JavaScript developers to interact with the Office 365 APIs. The OneDrive for Business and Sites APIs now have cross-origin resource sharing (CORS) support and Mail/Calendar/Contacts are coming soon. As more Office 365 API endpoints come online for services they will also support this including Office Graph, Yammer, Video Portal, Skype and content services.

Developers now have the choice to call the Office 365 APIs from the server-side or client-side. This means developers can write single page applications, which have a better user experience and better performance, because they don’t have to proxy all their calls through a server-side façade service.

As we have said in the past, we are listening on all the channels we encourage you to participate on (UserVoice, Yammer, StackOverflow, Twitter). CORS support for the Office 365 APIs was taken as a high priority based on this feedback and we appreciate the communities support in providing the justifications for this. We encourage you to continue to provide this feedback for future feature requests.

This approach in JavaScript leverages CORS, which enables a web client in one domain to request back-end resources in another; it has long been a means to enable an HTTP request/response flow between domains with different origins, while still respecting the same-origin policy.

 
1
2
3
4
var xhr = new XMLHttpRequest();
xhr.open(“GET”,“http://contoso.sharepoint.com/_api/lists/getByTitle(‘Employees’)/items?$select=ID,FirstName,LastName&$orderby=LastName,FirstName”);
xhr.setRequestHeader(“Authorization”, “Bearer “ + auth_token);
xhr.send();

Code example illustrating how easy it is to authenticate to the Office 365 API with client-side code using XMLHttpRequest().

Getting started

To get started check out the documentation on MSDN published this week on supporting the CORS scenario.

Samples from Dan Wahlin and Andrew Connell are available in our code samples directory with the other Angular samples. The “Expense Manager” scenario was originally written with an ASP.NET Web API server-side component to call the Office 365 APIs. Now with the Active Directory Authentication Library JavaScript  (ADAL.JS) libraries, the sample has been refactored to be purely client-side. In addition, there is also a series of hands on labs for building apps for Office in Outlook, Word and Excel with the Brackets IDE and a web browser. This illustrates the desire for the Office 365 platform to be open for developers on all platforms.

Paving the way with the ADAL.JS v1.0 library

The Active Directory (AD) team made the ADAL.JS v1.0 library generally available on February 19th. This paved the way for the Office 365 APIs, which leverage AD authentication, to support CORS and take advantage of the ADAL.JS library.

In the example above, developers have to use the access token returned by the implicit flow in Azure AD. The ADAL.JS library makes it significantly easier to handle authentication in your web applications in JavaScript. This makes the code much cleaner and handles the authentication for you.

 
1
2
var empsPromise = this.$http.get(
‘http://contoso.sharepoint.com/_api/lists/getByTitle(‘Employees’)/items?$select=ID,FirstName,LastName&$orderby=LastName,FirstName’, this.getOptions);

Code example illustrating how easy it is to authenticate to the Office 365 API with client-side code using ADAL.JS and Angular Framework.

Vittorio Bertocci, from the Azure AD team, wrote a great blog post introducing the design concepts of ADAL.JS v1. Most business applications will have a server-side API component for user authentication into the web application itself for security reasons. The Azure AD team have three key samples that give guidance on how this can be implemented.

ng-conf.com–Angular conference

This week at ng-conf.com, Angular developers from across the globe got together to see the future of the leading JavaScript frameworks. Dan Wahlin (@DanWahlin) and Andrew Connell (@AndrewConnell) presented on building single page applications using Angular and TypeScript, which call the Office 365 APIs using this new ADAL.JS library. The TypeScript team have been busy with the release of v1.5 and have worked in collaboration with the Angular team to integrate both frameworks.

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  var deferred = this.$q.defer();
  var empsPromise = this.$http.get(this.baseSPListsUrl +
    ‘getByTitle(‘Employees’)/items?$select=ID,FirstName,LastName&$orderby=LastName,FirstName’, this.getOptions);
  var expensesPromise = this.$http.get(this.baseSPListsUrl +
‘getByTitle(‘Expenses’)/items?$select=ID,Amount,Created,ExpenseCategory,Title,Receipt,Employee/Id’ +
‘&$expand=Employee/Id’, this.getOptions);
 
  this.$q.all([empsPromise, expensesPromise])
    .then((results) => {
  var employees = (results[0].data.d) ? this.caseProps(results[0].data.d.results, this.PropStyle.camelCase) : []; //Get employees data
                                                  
  var expenses = (results[1].data.d) ? this.caseProps(results[1].data.d.results, this.PropStyle.camelCase) : []; //Get expenses data
                                                    
  this.mapEmployeeToExpenses(employees, expenses);
  deferred.resolve(employees);

 Code example illustrating how easy it is to fetch data from a SharePoint Lists with client-side code using the Angular framework, TypeScript and ADAL.JS.

Teams of developers also engaged in an Office hackathon—building Apps for Office in the IDE of their choice, which ran in Outlook and Excel in the browser. We are working hard to make sure the experience across IDEs, like Brackets, can easily be used to build solutions that extend the Office 365 platform.

Increasing opportunities for JavaScript developers 1 

Screenshot illustrating using the Brackets IDE to build Apps for Office calling the Office 365 API on Mac OS X.

There were 11 teams who competed in the hackathon. The teams had two hours to build their first app for Office in Outlook or Excel Online in OSX using Brackets IDE. The judges, (Dan Wahlin, Andrew Connell, Sean Laberee, Rob Howard, Venkat Ayyadevara and Jeremy Thake), selected three winning teams. All team participants won a JamBox Mini and the winnings team participants each won an Xbox One.

  • The first team of four people built an Outlook Compose app that injected a 1 pixel by 1 pixel tracking image and used the keen.io to monitor who read the emails. They also built an Outlook Read app, which showed the information from keen.io on how many had read the mail and when.
  • The second team of two people built an Excel Content app, which read data binded into the sheet and used the D3.JS framework to show some cool visualizations of the data.
  • The third team of one person built an Outlook Read app, which took the body of the email and used Bing Translator to translate it to the users selected language.

The API Sandbox

Visit the API Sandbox to gain hands on experience using the browser-based method to execute snippets of code to show how the API works.

Increasing opportunities for JavaScript developers 2 

Dev podcasts

We have hosted many of the engineering team involved in the Office 365 APIs on the weekly “Office 365 Developer Podcast.” Check out shows with Brian Jones, Chakkaradeep Chandran, Rob Howard, Mauricio Ordonez  and Matthias Leibmann.

Useful links

Source: http://blogs.office.com/2015/03/06/increasing-opportunities-javascript-developers-office-365-platform/

Published: 3/9/2015 14:57
]]>