Renew Blazor Samples to Hybrid Blazor Samples#1455
Open
aafvstam wants to merge 110 commits into
Open
Conversation
- Added Fluent UI dependencies and set target framework to .NET 9.0. - Redesigned Counter, Weather, and Home components to use Fluent UI. - Updated Program.cs and _Imports.razor to include Fluent UI services and namespaces. - Restructured MainLayout and NavMenu for a modern UI experience. - Introduced ThemeSelector and Theme components for user theme selection. - Added JavaScript initializers for loading and Office.js integration. - Updated CSS for new Fluent UI styles and layout. - Created package management files for JavaScript dependencies and added TypeScript configuration. - Removed old favicon and replaced with a new image file.
Update Blazor PowerPoint Add-in with Fluent UI components
Update copyright to comply with MS standards and enhance project structure This commit updates copyright comments across multiple files to include a license statement indicating that the code is licensed under the MIT License. Key files such as `Counter.razor`, `Counter.razor.cs`, `Program.cs`, and `_Imports.razor` have been modified accordingly. Additionally, the `package.json` file has been updated with new versioning, repository information, author details, and new scripts for starting and validating the add-in. The project also includes new icons and images, along with modifications to the manifest files for the PowerPoint add-in, improving its metadata and functionality.
Added npm sideloader options and included test scripts and Manifests.
Added initial Readme Info
- Added project section for `README.md` and `assets/sample.json` in the solution file. - Removed `Pages\Home.razor.ts` from compilation in `Blazor.PowerPoint.AddIn.Client.csproj`. - Modified `MainLayout.razor` to change `FluentStack` orientation to vertical. - Significantly revamped `Home.razor` with new layout, page directive, and button for JavaScript invocation. - Updated `Weather.razor` to use new `StreamRendering` attribute. - Introduced `sample.json` with metadata for a PowerPoint hybrid Blazor add-in sample. - Created `Home.razor.cs` for code-behind logic, including JavaScript interop. - Included TypeScript version of `helloButton` in `Home.razor.ts`.
Update Blazor PowerPoint Add-in with new features
- Introduced `LoadingProgress` component in `Home.razor` for non-browser loading indication. - Updated `_Imports.razor` to include new component namespace. - Restructured `MainLayout.razor` to enhance layout with header, footer, and improved responsiveness. - Modified `MainLayout.razor.css` to set `main` as a flex container and reduced sidebar width. - Adjusted `NavMenu.razor.css` for consistent sidebar visibility and scrolling behavior. - Updated `app.css` to maintain maximum width for navigation menu.
Add loading indicator and restructure layout components
- Enhance `.gitignore` to ignore Blazor TS generated JS files. - Add alignment properties to `FluentStack` in `Counter.razor`, `ThemeSelector.razor`, and `Theme.razor`. - Replace standard HTML elements with `Fluent` components in `Weather.razor`, including a new `FluentDataGrid` and `FluentToolbar`. - Implement loading state and refresh functionality in `Weather.razor.cs`. - Update `README.md` to acknowledge contributions from Rudy Cortembert.
Update components and improve user experience
- Introduced `HostInformation` class for managing state outside Office (added Sideload message as is used in the standard Office Development Kit templates. - Updated `Home.razor` to conditionally display content based on initialization state accordingly. - Modified layouts in `Counter.razor`, `Home.razor`, `Theme.razor`, and `Weather.razor` to include emojis and improve styling. - Renamed `Home.razor.js` to `Home.razor.ts` in comment and added a new `commands.js` for PowerPoint integration. - Adjusted `manifestlocal.xml` for new button actions and added string resources. - Ribbon now has an 'Action' (no taskpane involved) function. - Updated CSS to accommodate new UI elements.
Added Action Feature Button, and a lot of styling updates.
Replaced the "Say Hello World in PowerPoint!" button's functionality with a new method `CreateSlide`. This method creates a new slide in the PowerPoint presentation and adds welcome messages in text boxes. The previous JavaScript function `helloButton` has been removed and replaced with `createSlide`, which includes additional logic for slide creation and image insertion, enhancing the user experience.
Update button functionality to create a new slide
- Updated `Home.razor` to include a new page route for "/home" and set render mode to `InteractiveWebAssembly`. - Bumped `@types/office-js-preview` version in `package.json` from `^1.0.559` to `^1.0.567`. - Changed `<Id>` and `<Version>` in `manifestlocal.xml`, and added a new `<Requirements>` section for Office API versions. - Updated `<Control>` elements in `manifestlocal.xml` to reflect new task pane button structure, adding buttons for "Weather", "Counter", and "Theme". - Adjusted minimum height in `.main` class of `app.css` and commented out a border style in the `footer`.
Add new home route and update manifest and styles
- 🛠️ Added pre-build and post-build targets in .csproj - 🗑️ Removed HelloButton method from Home.razor.cs - 📦 Updated package.json to streamline project setup - 📄 Enhanced manifest files with new requirements and IDs - 📚 Updated README.md for improved documentation - 🔄 Ensured consistent dependency tracking in package-lock.json - MvS
Update Blazor PowerPoint add-in configuration and files
Sync with main
- ✨ Introduced `SayHello` method in `Home.razor.cs` for greeting. - 🆕 Added `callBlazorOnHome` function in `commands.js` to create text boxes in PowerPoint slides. - 🔄 Updated Office manifest to link new function and changed button labels/tooltips. - MvS
Sync branches
- ✨ Added `SayHelloCounter` method in `Counter.razor.cs` - 🔄 Renamed `SayHello` to `SayHelloHome` in `Home` - 📜 Updated `beforeWebAssemblyStart` and `beforeWebStart` in `lib.module.ts` - 🆕 Introduced `callBlazorOnCounter` in `commands.js` - 📝 Improved logging for better debugging - 🔧 Updated `manifest.local.xml` and `manifest.production.xml` - MvS
Add JS interop methods and enhance logging
- ContentControls.razor.cs: add IAsyncDisposable, static _isImported guard, set _isImported=true on successful import, guard PrepareDocument re-import, add DisposeAsync calling DeregisterContentControlsFunction - Weather.razor.cs: remove [AllowNull] and unused using - Home.razor.cs: remove [AllowNull] and unused using - WasmBridge.razor.cs: wrap signalDotNetReady in try-catch+rethrow - ServerBridge.razor.cs: same as WasmBridge - Home.razor.ts: rethrow error in insertParagraph catch block - Weather.razor.ts: rethrow error in createWeatherTable catch block - ContentControls.razor.ts: chain .catch()+rethrow on all 7 Word.run calls; fix eventContexts = null -> eventContexts = [] in deregisterEvents Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
… nullability Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Extract EnsureImportedAsync() to prevent double-import if PrepareDocument and OnAfterRenderAsync race. Both callers now use the shared guard. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- OfficeUtilities: replace unsynchronized _isImported flag with SemaphoreSlim double-check lock to prevent race condition on concurrent EnsureImportedAsync calls - Weather: declare JSModule as nullable (IJSObjectReference?), add null guards to CreateSlideButton/CopyButton, implement IAsyncDisposable, migrate host detection to OfficeUtilities.IsRunningInHostAsync, add [SupportedOSPlatform(browser)], remove useless Console.WriteLine(forecasts) - Weather.razor: remove ineffective @Attribute [StreamRendering] (prerender is disabled) - BubbleChart: migrate host detection to OfficeUtilities.IsRunningInHostAsync, implement IAsyncDisposable, add static import guard with SemaphoreSlim to CreateBubbles, fix [Inject] pattern - BubbleChart.razor: fix <PageTitle> from 'Home' to 'Bubble Chart', add <RenderModeInfo />, update field reference to _hostInformation - WorldClock.razor: fix timezone labels (EST->ET, CET->CET/CEST) to correctly reflect DST-aware timezone IDs - Home.razor.cs: rename HostInformation field to _hostInformation to match naming convention - commands.ts: fix pre-existing TypeScript TS2454 error (timeoutId used before assigned) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
fix: apply code review recommendations
Agent-Logs-Url: https://github.com/aafvstam/Blazor.Excel.AddIn/sessions/e30dff18-8eda-4167-950a-d7eabe4c2db6 Co-authored-by: aafvstam <5305682+aafvstam@users.noreply.github.com>
Fix code review issues
Fix code review issues and update npm dependencies
The TypeScript migration of commands.js is complete. commands.ts compiles correctly and all generated .js files are gitignored. Remove the TypeScriptCompile Remove and None Include items for Pages\Home.razor.ts that were added as a workaround for old compilation errors. These items did not prevent tsc from compiling the file (tsconfig.json controls what tsc compiles), but they did remove Home.razor.ts from MSBuild's incremental build input tracking, causing changes to the file to be silently skipped on incremental builds. Closes #10 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…js-to-typescript Remove redundant TypeScriptCompile exclusion for Home.razor.ts
- ✨ Introduced core helpers for Office event and .NET bridge handling - ♻️ Replaced repeated try/catch with withOfficeEvent wrapper - ✨ Added invokeDotNetString and invokeDotNetVoid helpers - 🧹 Streamlined ribbon command handlers to use new helpers - ⬆️ Upgraded @types/office-js-preview to 1.0.708 - 📝 Improved documentation and comments in commands.ts = Maarten =
* Added detailed Copilot instructions for Blazor.<host>.AddIn. * Included repository summary, project roles, and tech stack. * Documented .NET/JS interop and TypeScript command bridging. * Clarified git commit message structure and signature format.
- ✨ Modularized ribbon command handlers in commands.ts - 🔨 Added helpers for Office event and .NET bridge handling - 🧹 Replaced legacy interop with invokeDotNetString/Void - 📝 Updated tooltips for FunctionButton3/4 in manifest - ⬆️ Upgraded @types/office-js-preview to 1.0.708 - ⚙️ Added Node.js >=20 engine requirement - 📄 Added copilot-instructions.md with repo and usage info -= Maarten =-
- ✨ Renamed ribbon command handlers and manifest function names for clarity - 📝 Updated tooltips, labels, and documentation for new naming - ♻️ Refactored commands.ts/js for modular event handling and .NET interop - 🧹 Simplified BubbleChart interop and exposed CreateBubbles for WASM - ⬆️ Upgraded npm dependencies and Office.js/TypeScript types - 🗑️ Cleaned up obsolete code and improved comments - 💄 Minor UI and logic fixes in Blazor components - 🔧 Improved package-lock and peer dependency declarations = Maarten =
Changed build/restore to use .slnx, updated docs for Visual Studio 2026, clarified debugging steps for Blazor.Excel.AddIn, switched code sample to TypeScript, and updated port references to 7217.
Updated all references from .sln to .slnx in tasks.json and README.md. Changed Visual Studio version to 2026 and clarified instructions for editing project files. Updated notes and CLI examples to match new solution file and project structure.
- ✨ Clarified TypeScript usage and Blazor hybrid model in README - 📝 Updated Visual Studio version and solution references - ✨ Added detailed VS Code usage and troubleshooting section - ✨ Added .vscode/launch.json for attach-and-sideload debugging - ✨ Added .vscode/tasks.json for build, run, sideload, and npm tasks - 🛠️ Improved developer workflow for both VS and VS Code -= Maarten =-
- Move legacy excel/outlook/word Blazor samples into archived folder - Update root and sample READMEs with new Blazor.* links and solution info - Reactivate telemetry images and remove TODO placeholders - Remove unused download-clock-icons script Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Refresh Blazor add-in READMEs and archive legacy samples
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What's in this Pull Request?
This pull request introduces a new Blazor Hybrid Excel Office Add-in sample that focuses on .NET and JavaScript interop and sets up a modern, maintainable development environment. It includes project scaffolding, VS Code build-and-debug automation, and several reusable Blazor components for Office add-in scenarios. The main themes are project setup, developer tooling, Blazor component infrastructure, and interop bridges for Office JS.
Project and Build System Setup
Blazor.Excel.AddIn(ASP.NET Core host) andBlazor.Excel.AddIn.Client(Blazor WebAssembly client), including up-to-date.csprojconfiguration, TypeScript build integration, and npm restore automation (Blazor.Excel.AddIn.Client.csproj)..vscode/launch.json,.vscode/tasks.json). [1] [2]Blazor Components and Interop Bridges
ServerBridge.razor/.cs,WasmBridge.razor/.cs) to register .NET command handlers with JavaScript viaDotNetObjectReference, supporting both server and WebAssembly render modes for Office JS interop. [1] [2] [3] [4]LoadingProgress.razorfor loading state,RenderModeInfo.razorto display current Blazor render mode, andThemeSelector.razor/.csfor theme switching using Fluent UI. [1] [2] [3] [4]Sample Models and Pages
HostInformation.cs,WeatherForecast.cs). [1] [2]BubbleChart.razorpage demonstrating UI, render mode, and Office host detection.Copilot and Contributor Guidance
copilot-instructions.mdfor repository context, naming conventions, and Copilot usage instructions, including rebranding notes for Microsoft 365 Agents Toolkit.These changes provide a comprehensive foundation for building, debugging, and extending a Blazor-based Office add-in with modern development practices.
Guidance
Included in the README.md files