page_type	urlFragment	products	languages	extensions	description
sample	excel-blazor-add-in	office-add-ins office	javascript C#	contentType technologies createdDate samples Add-ins 05/26/2022 10:00:00 PM	Create a Blazor Webassembly Excel add-in showcasing some samples.

Create a Blazor Webassembly Excel add-in

This sample shows how to build an Excel add-in using .NET Blazor technologies. Blazor Webassembly allows you to build Office Add-ins using .NET, C#, and JavaScript to interact with the Office JS API. The add-in uses JavaScript to work with the document and Office JS APIs, but you build the user interface and all other non-Office interactions in C# and .NET Core Blazor technologies.

• Work with Blazor Webassembly in the context of Office.
• Build cross-platform Office Add-ins using Blazor, C# and JavaScript Interop.
• Initialize the Office JavaScript API library in Blazor context.
• Interact with Excel to manipulate worksheets.
• Interact with workbook content through Office JavaScript APIs.

Applies to

• Excel on the web, Windows, and Mac.

Prerequisites

• Microsoft 365 - Get a free developer sandbox that provides a renewable 90-day Microsoft 365 E5 developer subscription.

Run the sample

1. Download or clone the Office Add-ins samples repository.
2. Open Visual Studio 2022 and open the Office-Add-in-samples\Samples\blazor-add-in\excel-blazor-add-in\excel-blazor-add-in.sln solution. (Do not open Visual Studio "as administrator". There is a bug that will prevent the add-in from sideloading when Visual Studio is elevated in this way.)
3. Choose Debug > Start Debugging. Or press F5 to start the solution.
4. When Excel opens, choose Home > Show Taskpane.

Next, try out the controls.

Understand an Office Add-in in Blazor Context

An Office Add-in is a web application that extends Office with additional functionality for the user. For example, an add-in can add ribbon buttons, a task pane, or a content pane with the functionality you want. Because an Office Add-in is a web application, you must provide a web server to host the files. Building the Office Add-in as a Blazor Webassembly allows you to build a .NET Core compliant website that interacts with the Office JS APIs. If your background is with VBA, VSTO, or COM add-in development, you may find that building Office Add-ins using Blazor Webassembly is a familiar development technique.

Key parts of this sample

This sample uses a Blazor Webassembly file that runs cross-platform in various browsers supporting WASM (Webassembly). The Blazor WASM App demonstrates some basic Excel functions.

The purpose of this sample is to show you how to build and interact with the Blazor, C# and JavaScript Interop options. If you're looking for more examples of interacting with Excel and Office JS APIs, see Script Lab.

Blazor pages

The Pages folder contains the Blazor pages, such as Index.razor. Each .razor page also contains two code-behind pages, for example, Index.razor.cs and Index.razor.js. The C# file first establishes an interop connection with the JavaScript file.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  if (firstRender)
  {
    JSModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Pages/Index.razor.js");
  }
}

For any events that need to interact with the Office document, the C# file calls through interop to the JavaScript file.

private async Task HelloButton() =>
  await JSModule.InvokeVoidAsync("helloButton");

The JavaScript runs the code to interact with the worksheet and returns.

export function helloButton() {
    return Excel.run(context => {
        // Insert text 'Hello world!' into cell A1.
        context.workbook.worksheets.getActiveWorksheet().getRange("A1").values = [['Hello world!']];

        // sync the context to run the previous API call, and return.
        return context.sync();
    });
}

The fundamental pattern includes the following steps.

1. Call JSRuntime.InvokeAsync to set up the interop between C# and JavaScript.
2. Use JSModule.InvokeVoidAsync to call JavaScript functions from your C# code.
3. Call Office JS APIs to interact with the worksheet from JavaScript code.

Questions and comments

We'd love to get your feedback about this sample. Please send your feedback to us in the Issues section of this repository. Questions about developing Office Add-ins should be posted to Microsoft Q&A using the office-js-dev tag.

Solution

Solution	Authors
Create a Blazor Webassembly Excel add-in	Maarten van Stam

Version history

Version	Date	Comments
1.0	May 27, 2022	Initial release

Copyright

Copyright(c) Maarten van Stam. All rights reserved.Licensed under the MIT License.

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Note: The index.html file contains an image URL that tracks diagnostic data for this sample add-in. Please remove the image tag if you reuse this sample in your own code project.