Office-Js - How do I modify the manifest to add custom tab or custom button?

Question

I am the newer of office web addin, i create my first office web addin by using "Excel Web Add-in" template which is on visual studio 2022 and the i follow the manifest file summary tutial try to add another button after the "ShowTaskPane" button. i don't know why my add-in crash when excel ready, here is my manifest code-snap:

Assume all resources are exists

<ExtensionPoint xsi:type='PrimaryCommandSurface'>
        <!-- 使用 OfficeTab 来扩展现有选项卡。使用 CustomTab 来创建新选项卡。 -->
        <OfficeTab id='TabHome'>
          <!-- 确保为组提供唯一 ID。建议 ID 为使用公司名的命名空间。 -->
          <Group id='Contoso.Group1'>
            <!-- 为组指定标签。resid 必须指向 ShortString 资源。 -->
            <Label resid='Contoso.Group1Label' />
            <!-- 图标。必需大小: 16、32、80，可选大小: 20、24、40、48、64。强烈建议为大 UX 提供所有大小。 -->
            <!-- 使用 PNG 图标。资源部分中的所有 URL 必须使用 HTTPS。 -->
            <Icon>
              <bt:Image size='16' resid='Contoso.tpicon_16x16' />
              <bt:Image size='32' resid='Contoso.tpicon_32x32' />
              <bt:Image size='80' resid='Contoso.tpicon_80x80' />
            </Icon>

            <!-- 控件。可以为“按钮”类型或“菜单”类型。 -->
            <Control xsi:type='Button' id='Contoso.TaskpaneButton'>
              <Label resid='Contoso.TaskpaneButton.Label' />
              <Supertip>
                <!-- 工具提示标题。resid 必须指向 ShortString 资源。 -->
                <Title resid='Contoso.TaskpaneButton.Label' />
                <!-- 工具提示标题。resid 必须指向 LongString 资源。 -->
                <Description resid='Contoso.TaskpaneButton.Tooltip' />
              </Supertip>
              <Icon>
                <bt:Image size='16' resid='Contoso.tpicon_16x16' />
                <bt:Image size='32' resid='Contoso.tpicon_32x32' />
                <bt:Image size='80' resid='Contoso.tpicon_80x80' />
              </Icon>

              <!-- 这是触发命令时的操作(例如单击功能区)。支持的操作为 ExecuteFunction 或 ShowTaskpane。 -->
              <Action xsi:type='ShowTaskpane'>
                <TaskpaneId>ButtonId1</TaskpaneId>
                <!-- 提供将显示在任务窗格上的位置的 URL 资源 ID。 -->
                <SourceLocation resid='Contoso.Taskpane.Url' />
              </Action>
            </Control>
              <!--My Button-->
              <Control xsi:type='Button' id='DOGS.Button'>
                  <Label resid='DOGS.GROUP.ID.LABEL'/>
                  <Supertip>
                      <Title resid='DOGS.GROUP.ID.LABEL'/>
                      <Description resid='DOGS.GROUP.ID.LABEL'/>
                  </Supertip>
                  <Icon>
                      <bt:Image resid='Contoso.tpicon_32x32' size='32'/>
                  </Icon>
                  <Action xsi:type='ExecuteFunction'>
                      <FunctionName>helloworld</FunctionName>
                  </Action>
              </Control>
          </Group>
        </OfficeTab>
      </ExtensionPoint>

And the task pane which is auto open said this error:

And nothing appears on the expected Tab. how can i do so that i can add tab or button correctly? Does this have anything to do with the fact that my Web application uses a Blazor Web App?

What i tried:

• reset the manifest file to the "clean version" then my addin can works
• copy the Show TaskPane as another button and just only these two button exists then my addin crashed

why i can't add xml code snap..

Answer 1

You have to have 3 <Image> elements inside <Icon>. See Icon for a code example.