Multiple Task Panes - Office JS Excel

Question

I finally got my "dialog" code working for gathering simple user input when I decided that I would prefer to utilize the Task Pane if possible. I've been investigating multiple taskpanes and have it working two different ways. But, I am using a Shared Runtime and read the below.

The following quote from MS Docs says this:

Don't design your add-in to use multiple task panes if you are planning to use a shared runtime. A shared runtime only supports the use of one task pane. Note that any task pane without a <TaskpaneID> is considered a different task pane.

Is there a best way to utilize multiple taskpanes and is this OK? Does this mean multiple OPEN taskpanes and/or taskpanes w/ different <TaskpaneID>? I won't need two taskpanes running at the same time, they are simply for gathering user input and running a subroutine. I haven't tested extensively my setup yet, but so far, I'm able to open the taskpanes just fine w/ different HTML files.

My first attempt (working) was to have one TaskPane defined in the XML w/ a script which redirects the page loaded after taskpane.html to the desired page.

I did this via the following function in the taskpane.js which is called from a command add-in:

Office.onReady((info) => {

});

function Do_OpenURLInTaskPane(URL, event) {
    console.log("URL:"+URL)
    location.href = URL
    event.completed();
    return true;
};


function getGlobal() {
    return typeof self !== "undefined"
        ? self
        : typeof window !== "undefined"
            ? window
            : typeof global !== "undefined"
                ? global
                : undefined;
}

var g = getGlobal();

//Add-In Commands
g.Do_OpenURLInTaskPane = Do_OpenURLInTaskPane;

My second attempt was to utilize 2x different HTML URLs in the manifest.xml

What I did was leave the original taskpane.html defined under the follow:

<FunctionFile resid="Taskpane.Url"/>

and

<SourceLocation resid="Taskpane.Url"/>

and

<Runtimes>
  <Runtime resid="Taskpane.Url" lifetime="long" />
</Runtimes>

I then deleted the button that called this and defined two new buttons to open the URLs desired like so:

             <Control xsi:type="Button" id="FirstTPBT">
                  <Label resid="TaskpaneButton.Label"/>
                  <Supertip>
                      <Title resid="TaskpaneButton.Label"/>
                      <Description resid="TaskpaneButton.Tooltip"/>
                  </Supertip>
                  <Icon>
                      <bt:Image size="16" resid="Icon.16x16"/>
                      <bt:Image size="32" resid="Icon.32x32"/>
                      <bt:Image size="80" resid="Icon.80x80"/>
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                      <TaskpaneId>ButtonId1</TaskpaneId>
                      <SourceLocation resid="FirstTP.Url"/>
                  </Action>
              </Control>
              <Control xsi:type="Button" id="SecondTPBY">
                  <Label resid="TaskpaneButton.Label"/>
                  <Supertip>
                      <Title resid="TaskpaneButton.Label"/>
                      <Description resid="TaskpaneButton.Tooltip"/>
                  </Supertip>
                  <Icon>
                      <bt:Image size="16" resid="Icon.16x16"/>
                      <bt:Image size="32" resid="Icon.32x32"/>
                      <bt:Image size="80" resid="Icon.80x80"/>
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                      <TaskpaneId>ButtonId1</TaskpaneId>
                      <SourceLocation resid="SecondTP.Url"/>
                  </Action>
              </Control>

Basically, I'd prefer NOT to use dialog when gathering user input is required and use an individually tailored taskpane and then use commands when no input is required.

Looking for feedback on these options and/or reasons why to choose one method over the other or another approach all together.

Answer 1

I have the your same issue, now i'm coding an Office Add-in for Excel (local and non shared runtime) and also i'm using React framework. I tried two different way to perform this:

1. Using React-Router-Dom, i try to install this package to do a react routing but the Office Add-in block some features in browser and this type of solution not working;
2. Using Window element of html, for first i create an html template (.hbs) and i called "taskpane.html" and i copied all thing from taskpane.html to taskpane.hbs. I use this template because in that case i can use some parameter inside the html file. The main part of html file is this:

  window.SOME_PARAMS = {
    ENTRYPOINT: "{{htmlWebpackPlugin.options.entryPoint}}",
  };

After that i modified the webpack.config.js adding different entry_point for every taskpane

taskpane1: [
  "./path/of/specific/entrypointJS/entrypoint.js"
]

At the end i use the params defined in html to navigate between different taskpane

switch(window.SOME_PARAMS.ENTRYPOINT) {
  case 'Taskpane1':
    return (
      ...
    );
      break;
  case 'Taskpane2':
    return(
      ...
    );
  break;
  case 'TaskPane3':
    return(
     ...
    );
    break;
}

Your manifest file is correct, but you have to differentiate the urls of taskpane button

    <bt:Url id="Taskpane_1.Url" DefaultValue="https://localhost:3000/taskpane-1.html"/>
    <bt:Url id="Taskpane_2.Url" DefaultValue="https://localhost:3000/taskpane-2.html"/>
    <bt:Url id="Taskpane_2.Url" DefaultValue="https://localhost:3000/taskpane-3.html"/>