启用showLoadingIndicator致Microsoft Teams配置标签页首次保存失败

在manifest文件中设置showLoadingIndicator: true，在_host.cshtml中加载MicrosoftTeams.js文件后立即调用JavaScript的notifySuccess方法，导致配置标签页出现异常。搜索并选择结果后点击保存，会抛出“无法保存标签设置”的错误，但第二次点击保存却能正常生效。

_host.cshtml #

<script src="https://res.cdn.office.net/teams-js/2.5.0/js/MicrosoftTeams.min.js"
        integrity="sha384-0lOzlvRkoNWAcLkbUTuao6TaDa7zI7v+q2PUAm3lrMxUp43PFwf2kaQu7FYT9fjS"
        crossorigin="anonymous"></script>
<script src="~/js/utils.js"></script>

utils.js #

function AppLoaded() {
    microsoftTeams.app.initialize().then(() => {
        microsoftTeams.app.notifySuccess();
        console.log("app loaded");
    });
}

AppLoaded();

config.cshtml 相关代码 #

private async void SetSelectedResult(SearchModel selectedItem)
{      
    _selectedItem = selectedItem;
    if (_selectedItem != null)
    {
        var settings = new TeamsInstanceSettings
            {
                SuggestedDisplayName = _selectedItem.Description,
                EntityId = _selectedItem.ID.ToString(),
                ContentUrl = "contenturl",
                WebsiteUrl = "websiteurl",
                RemoveUrl = "removeUrl"
            };

        await MicrosoftTeams.InitializeAsync();
        await MicrosoftTeams.RegisterOnSaveHandlerAsync(settings);
    }
}

问题根源 #

notifySuccess调用时机过早。当showLoadingIndicator: true时，Teams会等待配置页通过notifySuccess通知加载完成，之后才会启用保存按钮并正常处理保存逻辑。如果在配置逻辑还未就绪（比如还没注册保存处理器）就调用notifySuccess，Teams会认为页面已加载完成，但此时保存逻辑未初始化，第一次点击保存就会报错；第二次点击时保存逻辑已经注册完成，所以能正常生效。

修复步骤 #

1. 调整前端notifySuccess调用时机
   修改utils.js，移除初始化后立即调用的notifySuccess，改为暴露一个方法供后端在配置就绪后调用：

   let teamsInitialized = false;
   function AppLoaded() {
       microsoftTeams.app.initialize().then(() => {
           teamsInitialized = true;
           console.log("app loaded");
       });
   }
   // 供后端调用，通知Teams配置页已就绪
   function notifyTeamsReady() {
       if (teamsInitialized) {
           microsoftTeams.app.notifySuccess();
       }
   }
   AppLoaded();
   

2. 修正后端异步方法并触发就绪通知
   将SetSelectedResult的返回类型从async void改为async Task（避免异步上下文丢失），并在注册保存处理器后调用前端的notifyTeamsReady方法：

   private async Task SetSelectedResult(SearchModel selectedItem)
   {      
       _selectedItem = selectedItem;
       if (_selectedItem != null)
       {
           var settings = new TeamsInstanceSettings
               {
                   SuggestedDisplayName = _selectedItem.Description,
                   EntityId = _selectedItem.ID.ToString(),
                   ContentUrl = "contenturl",
                   WebsiteUrl = "websiteurl",
                   RemoveUrl = "removeUrl"
               };
   
           await MicrosoftTeams.InitializeAsync();
           await MicrosoftTeams.RegisterOnSaveHandlerAsync(settings);
           // 通知Teams配置页已就绪
           await JSRuntime.InvokeVoidAsync("notifyTeamsReady");
       }
   }
   

3. 额外注意事项

   • 如果页面初始化时没有默认配置项，需要确保在页面加载完成且配置逻辑就绪后再调用notifySuccess，避免Teams提前启用保存按钮。
   • 确保MicrosoftTeams.InitializeAsync只调用一次，避免重复初始化导致的异常。

内容的提问来源于stack exchange，提问作者user25879