office365 - Excel Javascript 插件 : how to open ExecuteFunction in the taskpane rather than new iframe?

Question

我正在尝试使用 Excel Javascript API 创建一个插件:

在主页选项卡上添加多个按钮。

每个按钮都会将任务 Pane 打开到不同的屏幕。

这些任务 Pane 中的每一个都在同一个运行时运行(例如，我可以在它们之间共享数据，只需在 window.data = "data" 中设置数据)。

据我所知，不可能用多个 ShowTaskpane 来做到这一点。按钮上的操作，因为这不会出现 work with the shared runtime .

我目前采取的方法是:

将我的函数文件设置为

<FunctionFile resid="Taskpane.Url"/>

(其中 <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/> )

定义以下操作:

<Control xsi:type="Button" id="FirstButton">
    ...
    <Action xsi:type="ExecuteFunction">
        <FunctionName>first</FunctionName>
    </Action>
</Control>
<Control xsi:type="Button" id="SecondButton">
    ...
    <Action xsi:type="ExecuteFunction">
        <FunctionName>second</FunctionName>
    </Action>
</Control>

定义 first和 second作为全局范围内的函数(并在 taskpane.html 文件中定义)。这些函数中的每一个 a) 在 Taskpane 应用程序中设置一些状态(以使其显示不同的内容，具体取决于函数调用)，然后调用 Office.addin.showAsTaskpane() .代码大致如下:

但是，这不会按预期工作。也就是说，它在任务 Pane 一侧的单独 iframe 中打开任务 Pane 。它看起来像这样:



当我添加 Office.addin.showAsTaskpane()调用 share函数，它看起来像这样:



如何使用执行功能操作但在任务 Pane 中执行此操作？我想要一个共享的运行时，并且我希望所有的运行时都打开并位于任务 Pane 中。该文档使 AppDomains 似乎可以实现这一目标，但我不确定我做错了什么。

感谢您提供任何信息 - 我真的很感激!

Answer 1

我认为这里的关键问题是您想根据函数执行更改任务 Pane 中的某些状态。这实际上很简单，您不需要共享运行时。
在您的任务 Pane 中，在初始化部分，您必须注册事件监听器以进行存储。

window.addEventListener('storage', () => {
  console.log('your local storage has changed');
});

在您的函数中，您可以利用本地存储，在其中写入值，在您的任务 Pane 中，您可以在引发事件时访问这些值。

// example globally exposed function to be called using ExecuteFunction
function first(event) {
   localStorage.setItem('routePath', 'firstRoute');
   event.completed();
}

然后在您的任务 Pane 应用程序中，您可以拥有

window.addEventListener('storage', () => {
  const askedPath = localStorage.getItem('routePath');
  if (askedPath !== existingPath) {
    reRouteApp(localStorage.getItem('routePath')
  }
});

根据您选择的框架，您可能需要注意注册此事件监听器的方式。举个例子，如果你使用 react和 hash-router ，您可以像这样使用重新路由方法:

const reRouteApp = (route) => {
  window.location.hash = route;
}

同时确保在 onComponentMount 上注册监听器事件的app.js或与 useEffect以确保您最终不会有多个听众。