How to add office js into existing vsto project

Question

I have an exiting VSTO add-in but I want to add a new report that would be SO MUCH BETTER as a little web browser control pop up. Would be ideal to use the Office js api for that. Would also help reuse code we already use in the web platform we have. Apparently it’s possible but I can’t find any solid examples.

See the comment section of the accepted answer: Office VSTO Add-ins vs Office Add-ins using Office JS API

Comely

Which parts of the Office API do you need? Your VSTO can create a custom WinForm or WPF control that hosts an embedded browser that can display any HTML served from the local file system or a web server – Donata

^ warning, if you're embedding that browser control to a spreadsheet through worksheet.AddControl, it's won't render if the spreadsheet is zoomed in or out – Yul

Answer 1

There is no direct conversion between Office COM add-ins (VSTO) and Office web add-ins (OfficeJS), nor communication between the two. They use entirely different approach for the development process. VSTO add-ins exist on Windows only because they are based on the COM technology. Office web add-ins can be considered as regular web applications that can be run on any platform including web browsers, any mobile OS and Mac OS. So, if you need to support other platforms you may consider developing an Office web add-in from scratch, see Develop Office Add-ins for more information.

If you need to add existing web parts into your VSTO add-ins without supporting other platforms you may consider placing a web browser control to a task pane or form region (in case of Outlook) where you could load the existing web app and communicate with it programmatically. Read more about that in the Introduction to Microsoft Edge WebView2 article. The Microsoft Edge WebView2 control allows you to embed web technologies (HTML, CSS, and JavaScript) in your native apps. The WebView2 control uses Microsoft Edge as the rendering engine to display the web content in native apps.

Finally, if you want to re-use your existing code from Office web add-ins, you may consider creating a web assembly for that. WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications. Blazor can help with such tasks.

Corral

Answer 2

I'm sorry but this is not possible. The comment in the accepted answer that you linked to is mistaken. The embedded webview controls in which Office.js runs are specially modified. (See Runtimes in Office Add-ins.) Office.js cannot initialize in an ordinary embedded control created with WinForms or WPF.

Maine

Answer 3

It's frustrating that VSTO, Office Task Pane Add-ins, and Office Content Add-ins cover different capabilities but aren't designed to work together. Also, the use case seems so natural (present an html-based report) but for some reason it's not supported.

Eugene gave good advice, but I wanted to add my findings in case you are searching for the same thing I was, a web browser control embedded in a spreadsheet. If that's a strict requirement, your (not-so-great) options are:

1. Embed a winforms web control (or a WPF one hosted in a winforms control) to a spreadsheet through worksheet.AddControl. This doesn't require modifying the registry like you do to manually add an ActiveX WebBrowser to the spreadsheet. However, it won't render if the spreadsheet is zoomed in or out, and you have to roll your own move/resize controls.

2. Use a custom ActiveX control and OleObjects.Add to embed a winforms/WPF web browser in the sheet. This resolves the zoom issues but I won't begin to elaborate on the issues with creating ActiveX controls in 2023.

3. Create a custom web browser control and "embed" it "into the spreadsheet" by making the Workbook's HWND its parent using Win32. You'd have to manually handle the control's visibility based on what spreadsheet is showing, etc.

4. Make an Office Content Add-in a "sister" application to your VSTO one. I didn't get to look into how to deploy these together or start them together. Also, the UX flow won't be great because for some reason Microsoft have decided they won't allow the user to programmatically open instances of the Content Add-in. It's required to go through the ribbon.

However, if this isn't an issue for you, I was able to get a prototype working where my VSTO app told my Content Add-in's embedded web browser what html to render, using the method detailed in this page. From the author:

The solution is to use the Document as a communication medium. In the particular case we used CustomXMLParts in the document. Here is how it would work:

One add-in would need to send an update to the other, so it would write a CustomXMLPart with a specific namespace and a “context” (basically, I am the TaskPane communicating) to the document.

Both add-ins will have a window.setInterval() thread running to check the documents for CustomXMLParts in that given namespace.

The timer on the Content Add-in would fire, find the new customXMLPart from the taskpane, read the contents and then update itself as needed and finally, delete the CustomXMLPart.

Yul