Speaking at the Collab365 Summit 2016 – May 11th 2016 – “Office 365 Add-Ins – a web developer’s playground”

I delighted to say that at very short notice, I am speaking at the Collab365 Summit virtual conference on May 11th 2016.

https://collab365.events/collab365-summit-2016/

The presentation will be recorded and there will be a live chat session while it is being broadcast

Monday May 11th 12pm CST

co1

Title
Office 365 Add-Ins – a web developer’s playground

Abstract
A web developer’s exploration into the capabilities and integration opportunities exposed by O365 and the Office Add-In model. Like most office workers, we all spend a significant amount of time in our “Microsoft Office” productivity tools. Even email is still a productivity tool. Productivity starts to diminish though if we have to move outside of our Office environment and hunt for information and/or complete business workflow processes.

With the creation of Office 365 Add-Ins, Microsoft has presented web developers with a new opportunity to create rich, engaging and integrated user experiences without having to leave the “experience” of our Office applications. Developers have the ability to create Add-Ins using HTML/JS/CSS and these run in the Windows Client, on the web, on our phones and even on the OS X desktop client.

In this presentation Mark will provide lots of demonstrations of how to get started with Office Add-Ins. These will include: creating your first Add-In in under 2 minutes, how to simplify workflow approval without having to leave your email client, how to pull report and analytics data into your Office product suite applications and how to integrate your content with cognitive analytics. All of this, written without a single line of C#.

Come to the presentation and find out why Office 365 Add-Ins are a modern web developer’s playground.

Advertisements

Office 365 Add-Ins Dialog API released

In this article I will briefly touch on the new Dialog API, the fact that it works in Outlook and that you need to have the most recent version of Office 2016 to get this to work.

Introduction

In his recent article Simon Jaeger published information about the new Office 365 API “DialogAPI” functionality

http://simonjaeger.com/lets-have-a-dialog-about-the-dialog-api/

This is a really nice UX item added to the Office 365 Add-In suite of functionality. If I need to ask the user to interact with the application and/or make a decision, it is now available right there from within the Add-In.

Not just for Word

While Simon’s example was created in Word, using the following code it was really simple to test and see if it was available in Outlook as well.

It is !!

d1

I used my firebuglite Add-In example to quickly load up an existing Add-In and paste the code into the console window. Took 2 minutes to verify which was great.

        var dialogUrl = location.href

        // Display the dialog.
        Office.context.ui.displayDialogAsync(dialogUrl, { width: 15, height: 27, requireHTTPS: true }, function (asyncResult) {
            if (asyncResult.status !== Office.AsyncResultStatus.Succeeded) {
                // TODO: Handle error.
                return;
            }

            // Get the dialog and register event handlers.
            var dialog = asyncResult.value;
            dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived, function (asyncResult) {
                if (asyncResult.type !== Microsoft.Office.WebExtension.EventType.DialogMessageReceived) {
                    // TODO: Handle unknown message.
                    return;
                }

                // Parse the message.
                var data = JSON.parse(asyncResult.message);
                showNotification('Hello #Office365Dev', data.name);

                // TODO: Do something with the data.

                // We got our data, time to close the dialog.
                dialog.close();
            });
        });

In Simon’s post he also referenced the Channel 9 video created to go along with the announcement. In that the presenters demo how to use the new dialog API to Authenticate to O365 and return the token back to the Add-In. This is a more elegant method than what I have been using with the whole new IE window opening. I will be looking into combining the methods for my own nefarious use in the near future….. 🙂

Office Version (April 2016)

I wasted over a day being frustrated with why my code would not worked, and it turns out that my version of Office was not up to date. You need to go to the following site to download the latest version of Office (https://github.com/OfficeDev/Office-Add-in-Commands-Samples/blob/master/Tools/LatestOfficeBuild.md).

 

Conclusion

The new Dialog API presents a new option for developers in their continued ability to bring functionality into the Office 365 environment.

 

Creating an O365 Authorization Token via Chrome Extension

In this article I will show how I extended my method for generating an O365 OAuth token and incorporated it into a chrome extension.

Introduction

When I created the O365Token project on GitHub it was for the express purpose of being able to generate an OAuth token for an O365 Add-In project. I have since been tasked with integrating O365 into an application via a Chrome Extension. Using the same methodolgy it turned out to be relatively simple to do.

Creating a Chrome Extension

There is an extensive API for creating Chrome extensions which allows us to execute JavaScript at run time for a given website. What is particularly useful is that we are able to execute different scripts based on the site being accessed.

The basic extension

I created a extension locally with nothing more than the basic inclusion of a manifest and a JavaScript hello world.

g1

The background.js file is very simple

$(document).ready(function() {
    console.log('hello world');
})

and when I visit an https://xomino365.com site I see the extension log in the console.

g2

Adding O365Token to the extension

In the github project we have two files, Home.js and App.js. These two files are added to the chrome extension and the folder structure.

The Home.js file is modified with the necessary parameters for generating the OAuthToken as described in this previous article. I also modified the replyURL as in this case it is not an Office Add-In.

g3

You will also notice that I changed the first few lines of code to remove the call to Office.js.

Executing the Chrome extension

Once the code has been implemented, I go to a https://xomino365.com webpage and I am immediately prompted with a new window requesting O365 Authentication.

g4

g5

Once I authenticate, an OAuthToken is created and set as a cookie within the xomino365.com domain. Using this I can then add O365 application data into my xomino365.com website seamlessly.

I

Because of the ability to “match” the website which this occurs in, within my extension, this functionality will only appear on this website.

Updating the O365Token Github

I have updated the O365Token Github site with the Chrome extension as a separate folder within the repository. Please feel free to try it out for yourself with your own O365 sites.

 

Conclusion

In this article we have seen how a simple Chrome Extension is constructed and how we can add O365 Authorization capabilities to it.

The ability to easily integrate O365 through a Chrome Extension opens up the future possibility for integration between existing applications and O365 through the use of DOM insertion. More on this in a later article.

Corporate Tools to come…..

What is intriguing to me is that unless you’re using corporate GMail, Chrome itself is not normally a “default browser” inside a company using O365. More likely of interest to corporate world is that Microsoft Edge Extensions are coming (as of April 2016) and they are supposedly going to be very similar to Chrome extensions. This could very well have a lot more developer leverage in that environment. I guess I need to get on that train and find out……

 

 

Getting attachments from an O365 SharePoint list item Cross-Domain

In this article I will demonstrate the nuances of being able to get Office 365 SharePoint attachments in the same domain and in the Cross-Domain scenarios.

Getting information about a list item

When requesting information from a list in SharePoint, the detail returned does not by default contain any information about attachments other than “yep I got some”. The image below shows a typical response from a simple request to show the first value in the list

var path = "https://psclistensdev.sharepoint.com/sites/demo/";
$.ajax({
  url: path+"_api/web/lists/GetByTitle('Company')/Items?$top=1",
  type: "GET",
  headers: {
    "Accept": "application/json",
    "Authorization": "Bearer " +  app.getCookie("OAuthToken")
  },
  contentType: "application/json;odata=verbose"
}).done(function(res){
    console.log(res)
})

s1

To be able to see information about the Attachments we add the $expand=AttachmentFiles parameter to the URL

var path = "https://psclistensdev.sharepoint.com/sites/demo/";
$.ajax({
  url: path+"_api/web/lists/GetByTitle('Company')/Items?$expand=AttachmentFiles&$top=1",
  type: "GET",
  headers: {
    "Accept": "application/json",
    "Authorization": "Bearer " +  app.getCookie("OAuthToken")
  },
  contentType: "application/json;odata=verbose"
}).done(function(res){
    console.log(res)
})

s2

Looking at the Attachment information

There are multiple URLs which are returned in the JSON – looking at each of them we find that some open/download the file

  1. //psclistensdev.sharepoint.com/sites/demo/Lists/Company/Attachments/1/quickstart_guide.pdf
    • works great file downloads
  2. //psclistensdev.sharepoint.com/sites/demo/_api/Web/Lists(guid’eaf7c922-649e-4447-b695-df9030e85072′)/Items(1)/AttachmentFiles(‘quickstart_guide.pdf’)
    • Creates a file called “AttachmentFiles(‘quickstart_guide.pdf’)” which when opened in notepad is actually an XML reference document…

So when downloading the file attachment in the same domain – requesting the file via the first URL – works just fine

s3

But if we move to a different domain (which has previously been added as a trusted App through Azure AD) we find that the Cross Domain headers are not provided and therefore the download fails…..

s7

I believe (although I cannot be sure) that this is because the direct URL for the attachment does not use the “_api” it is not being picked up by the Azure AD App permission process and the headers are not being added.

Doing it the other way

Going back to URL #2 (which if you remember returns an XML file)

  • //psclistensdev.sharepoint.com/sites/demo/_api/Web/Lists(guid’eaf7c922-649e-4447-b695-df9030e85072′)/Items(1)/AttachmentFiles(‘quickstart_guide.pdf’)

If we try to request this, it does actually work…..but returns the JSON version of the XML file (cos I asked it to in the headers)

s5

The trick here is to add “$value” to the end of the URL. This triggers SharePoint to send out the attachment itself

  • //psclistensdev.sharepoint.com/sites/demo/_api/Web/Lists(guid’eaf7c922-649e-4447-b695-df9030e85072′)/Items(1)/AttachmentFiles(‘quickstart_guide.pdf’)/$value

s6

Conclusion

In this article we have seen how there are multiple ways to collect the reference to a file attachment from a list item in O365 SharePoint. While both URLs work when requested from the same domain, only one of them triggers the Azure AD App registration model to add the appropriate HTTP Headers to the request, allowing a Cross-Domain request to be successfully executed.