Integrating Microsoft OneDrive/Office/365 Files into Obsidian

[sam.baron]

With new features such as iframes and application URIs, there are more opportunities to integrate Obsidian with external apps and files. Here are some options with Microsoft OneDrive and 365 (formerly Office) files.

Iframe Embed

For those not familiar with iframes, they are an html tag that allows you to embed one webpage into another. Many web apps and cloud storage services provide the iframe embed code with special widgets for file interaction.

In OneDrive, you can right-click or select a file and choose Embed to get the iframe code. There are also additional embed options depending on the file type.

The <iframe> code can be copied directly into an Obsidian note and will render in preview mode.

But in OneDrive embeds, files are not editable . . .

File Link

Since OneDrive embeds are not editable, you may want to open the file from Obsidian. For those who have used Microsoft OneNote, you are familiar with this - you can view the static Excel or Word document in your note, but you need to double-click to open and edit.

The first option would be to use the file link from OneDrive. This will open the file in the “online” app. But now that Obsidian supports application URIs, you can create a link that will open the file in the Microsoft desktop app (I prefer this). This is an extra step, and you cannot use the OneDrive “ID-based” link.

You must use the OneDrive “path-based” link, which has this schema:

https://d.docs.live.net/[account ID]/[account path]/[filename with extension]
https://d.docs.live.net/1234567890/Documents/Files/my_excel_workbook.xlsx

Spaces in URLs must be replaced with %20.

You can also get the “path-based” file location in the desktop app by going to File and right-clicking a file or going to Info for the current file.

To open this file in the Microsoft desktop app, you must prepend the URL with the Office URI scheme for the app you are using. More info here https://docs.microsoft.com/en-us/office/client-developer/office-uri-schemes. For our above example, this URI would open the file in the Microsoft Excel desktop app:

ms-excel:ofe|u|https://d.docs.live.net/1234567890/Documents/Files/my_excel_workbook.xlsx

Other Link Options

1. It is also possible to use the file:/// URI scheme to open the local file, but this would not be portable across devices, and it’s more of a pain to generate. In this case, our link would be:

file:///C:/users/username/OneDrive/Documents/Files/my_excel_workbook.xlsx

2. There is a very new Windows feature where you can set links to use the desktop app by default without prepending the URI scheme, but I could not get that to work. https://support.microsoft.com/en-us/office/open-file-links-directly-in-office-desktop-apps-fe241745-9e05-4142-9ba8-1bb1dc044773

Putting this together in Obsidian

Obsidian doesn’t recognize many non-md files, including Microsoft 365 files. Personally, I’m okay with that because I’ve developed a compromise solution that I think takes advantage of Obsidian features while not bloating my vault and maintaining flexibility on where I save files.

For files that I use in conjunction with Obsidian notes, I create a “wrapper” note for that file.

Now we can link or embed this “file” note into a working note.

And now I get all of Obsidian’s link, graph and search features to see where this file is being used. I can also use my wrapper note to apply additional tags, links and metadata to the file.

Conclusion - Still a WIP

I’m still experimenting with these workflows, but given that this is very similar to the file interaction in OneNote, this feels sustainable. I could foresee a script or future plugin to automate iframe, link, and note creation. I also wonder about the “file wrapper note” as a conceptual template for working with other non-md files.

[Peanut]

Thank you so much OP for this post. i don’t know much about html so i didn’t even know all this was possible. Even more is possible, for those who are wondering. You can even embed a live version of the webpage, just like interacting with the page in the web browser. for example, i just embeded the webpage for my todo list app ticktick inside an obsidian page using the code below:
<iframe width= "1000" height= "500" src="https://ticktick.com/webapp/#q/all/tasks"/>

initially it showed me the homepage of the ticktick website. i then navigated to the sign in page, signed in and viola! my todo list was visible inside obsidian, fully interactable, without ever opening a web browser.
i did a quick close and open of the obsidian app, and i found that i was still signed in to ticktick. i wonder how i can delete the login infomation cache from obsidian when i want to. if somebody knows please let me know.
i tried to do the same whole webpage embed for a google sheets page but what i get is a blank iframe box… i persume this is something google has done to prevent iframe embeds. If anyone knows a solution, please let us know here.
embedding a google docs file like the OP did for MS files is actually pretty straightforward (and commonly used, as i now realise). it is explained in this link: https://wordpress.com/support/google-docs/#:~:text=To%20embed%20a%20Google%20Doc,and%20copy%20the%20embed%20code.

[ottovanluchene]

For the moment is just “link” with a tag for files outside the vault:
#onedrive"searchterm"

So I know I can use windows search to find the file on my System/OneDrive.
I use windows search heavily before obsidian so i’m used to this way of finding files/folders.

Example: Research about an history event where I’ve collected images in a Onedrive folder. In Obsidian I would add “#onedrive foldername”

[RikD]

This seems a little bit how Joplin handles “external” files.
Certainly a valid approach which is shown here.
Perhaps some joined thinking with the community will help us evolve to a “final” solution.
Good work! Appreciated!

[stelo424]

@sam.baron Very interesting post. Can I ask if what you show in this post can be implemented for Sublime Text instead of MS Excel?

What I have in mind is to be able to embed in Obsidian a file open though Sublime Text (for which syntax highlighting is supported by Sublime Text but not by Obsidian).

Thanks,
Stefano

[Ritallaska]

Hi OP, what are the plugins and settings you used to get that look? I’m talking about having 2 panes—one for edit and one for preview.

And did you typed all of this manually lr used a template?

Sorry, i couldn’t find any information on it.

[Nils.Srvd]

Maybe you here are looking for something like this:

Embedding cloud-hosted documents and working collaboratively in teams

If you want to embed documents hosted in the cloud (surveys, word processors or online spreadsheets for collaborative work, etc.), it can be achieved using iframe but you must pay attention to some details and tricks. Embedding documents hosted in the cloud Can I, for example, view documents hosted on Google Drive from Obsidian? Of course yes. Any document hosted on Google Drive and with read-only permission for any user with the link can be displayed as an iframe in Obsidian’s markdown notes…

[Signynt]

Anyone know a way how to do this with OneNote files? There’s an “embed” option for them, but it just embeds a link to click on that opens the notebook not an actual preview.

[Maley_typek]

I think that “ms-excel:ofe|u|” does not work in newest Obsidian version.

[atsuto]

I’m having an issue with signing into SharePoint through the iframe.

I get the iframe working but when i click on the ‘sign in’ button nothing happens.

had a look at dev tools and i can see the following error message
“Blocked opening https://…loginapp.js in a new window because the request was made in a sandboxed frame whose ‘allow-popups’ permission is not set.”

Is there a setting in obsidian app I was supposed to change?

Can iframe sandbox restrictions be removed via a plugin?

iframe elements inside a note have some limitations in the preview. They are sandboxed with the following parameters: sandbox = "allow-forms allow-presentation allow-same-origin allow-scripts allow-modals" but it does not include the permissions "allow-popups" or "allow-popups-to-escape-sandbox" I’m sure there are pretty good reasons for this, but it is inconvenient in some scenarios in which the iframe requires some kind of user login. For example: iframes to preview private documents stor…

[Baytars]

Is it possible to further integrate Obsidian with SharePoint using the SharePoint API? Theoretically the markdown document of Obsidian can be transformed into .aspx pages by inserting the content into the MarkDown webpart of a news post and vice versa. Bidirection links can be created with Quick Links webpart. Also, the term store from the SharePoint Admin serves as tags for the document (or, as metadata whose structure can be recognized by the Breadcombs plugin). Document metadata will be inserted into columns of the SharePoint pages. In this way, news posts can be managed in the Obsidian way.