search

OfficeDev / office-js

A repo and NPM package for Office.js, corresponding to a copy of what gets published to the official "evergreen" Office.js CDN, at https://appsforoffice.microsoft.com/lib/1/hosted/office.js.
https://learn.microsoft.com/javascript/api/overview
Other
685 stars 95 forks source link

Q&A Office-Js - How do I modify the manifest to add custom tab or custom button? #4293

Closed SKYC829 closed 7 months ago

SKYC829 commented 7 months ago

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

  <Host xsi:type='Workbook'>
    <!-- 外形规格。当前只支持 DesktopFormFactor。 -->
    <DesktopFormFactor>
      <!--“此代码将启用可自定义的消息，在单独安装成功加载外接程序时进行显示。”-->
      <GetStarted>
        <!-- “入门”标注的标题。resid 属性指向 ShortString 资源 -->
        <Title resid='Contoso.GetStarted.Title'/>

        <!-- 入门标注的描述。ResID 指向 LongString 资源 -->
        <Description resid='Contoso.GetStarted.Description'/>

        <!-- 指向详细说明外接程序使用方法的 URL 资源。 -->
        <LearnMoreUrl resid='Contoso.GetStarted.LearnMoreUrl'/>
      </GetStarted>
      <!-- 函数文件是包含 JavaScript 的 HTML 页面，将在此页面中调用用于 ExecuteAction 的函数。             将 FunctionFile 视为代码隐藏 ExecuteFunction。 -->
      <FunctionFile resid='Contoso.DesktopFunctionFile.Url' />

      <!-- PrimaryCommandSurface 为 Office 主功能区。 -->
      <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>
    </DesktopFormFactor>
  </Host>
</Hosts>

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

image

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:

sample was uploaded at my github repo

SKYC829 commented 7 months ago

By the way, what is the meaning of the Page tag on follow config:

<AllFormFactors>
          <ExtensionPoint xsi:type="CustomFunctions">
              <Script>
                  <SourceLocation resid="UDF.Url"/>
              </Script>
              <Page>
                  <SourceLocation resid="UDF.Page.Url"/>
              </Page>
              <Metadata>
                  <SourceLocation resid="UDF.Meta.Url"/>
              </Metadata>
              <Namespace resid="MyTest.Group.Label"/>
          </ExtensionPoint>
</AllFormFactors>
<Resources>
    <bt:Urls>
         <bt:Url id="UDF.Url" DefaultValue="~remoteAppUrl/udfs.js"/>
         <bt:Url id="UDF.Page.Url" DefaultValue="~remoteAppUrl/udfs.js"/>
         <bt:Url id="UDF.Meta.Url" DefaultValue="~remoteAppUrl/udfs.meta.json"/>
    </bt:Urls>
</Resources>

according the tag FunctionFile 's summary, it seems to it is meaning of where the js function will executes on. but i don't know why my add-in will crashed when my udf was executing.