Creating new Office documents for OneDrive for Business from another ASPX page

Recently one of my clients wanted to add a new control to their widget dashboard that would give them access to OneDrive for Business functionality. As part of the control they wanted the ability to create new Word, Excel and PowerPoint files. These files would then be edited using Office Web Apps.

Our control has been written as a single page application deployed to the My Site Host of the Office 365 Tenant. It would then be accessed via an IFRAME on a non ASPX page.

This blog will look at how to create a Word, Excel or PowerPoint file and start editing it using Office Web Applications.

To achieve this we need to do the following:

1. Determine where the users OneDrive for business site collection is on the tenant
2. Create the new document within OneDrive
3. Navigate to Office Web Apps to open the new document

Determine location of OneDrive for Business site collection

One of the problems we face is that we do not know which site collection our logged in user has been allocated for OneDrive. We make use of the SP.UserProfiles.PeopleManager  REST API to retrieve the PersonalUrl of the user. We use jQuery to make the GET request.

[code language=”javascript”]
function getPersonalUrl(success, failure) {

var url = _spPageContextInfo.siteAbsoluteUrl +
"/_api/SP.UserProfiles.PeopleManager/GetMyProperties/PersonalUrl";

$.ajax({
type: ‘GET’,
headers: {
‘accept’: ‘application/json;odata=verbose’
},
xhrFields: {
withCredentials: true
},
url: url,
success: function (data) {
var personalUrl = data.d.PersonalUrl;
success(personalUrl);
},
failure: function () {
failure();
}
});
}
[/code]

Create the new document within OneDrive

Once we know where the user’s site collection is we create a new file at the root of the Documents library. Using the PersonalUrl retrieved previously, we open a reference to the personal sites Client Context and then call the list.createDocument method to create a blank document for that document Type.

For reference the mapping of docType:

• 1 – Word
• 2 – Excel
• 3 – PowerPoint

We then retrieve the URL of the newly created file by using the the item.getWOPIFrameUrl method.

[code language=”javascript”]
function createNewDefaultDocument(personalUrl, docType) {

var clientContext = new SP.ClientContext(personalUrl);

var web = clientContext.get_web();
clientContext.load(web);

var folder = list.get_rootFolder();

var item = list.createDocument(null, folder, docType);

var wopiFrameActionEnum = SP.Utilities.SPWOPIFrameAction;
var wopiUrl = item.getWOPIFrameUrl(wopiFrameActionEnum.edit);

context.executeQueryAsync(onSuccess, onFailure);

function onSuccess() {

var wopiUrlValue = wopiUrl.get_value();

if (Boolean(wopiUrlValue)) {
wopiUrlValue = wopiUrlValue.replace("action=edit", "action=editnew");
GoToPage(wopiUrlValue); // Use core.js GoToPage method
}
}

function onFailure(sender, args) {
// Handle failure
}
}
[/code]

Navigate to Office Web Apps to open the new document

Once we retrieve the URL of the document (wopiUrlValue) we need to replace the action from edit to editnew.

Lastly we use the GoToPage method (core.js) to navigate to the modifed Url. This will open the file in Office Web Apps in the same browser tab.