在VueJS上使用发送的外接Office Outlook 2002构建

编程问答 2022-08-14

问题描述

我们使用VueJS构建Office Outlook加载项。我们想使用发送功能来检查消息邀请的正文。如果通过，邀请将消失。否则，将通知用户进行必要的更改。

VueJS应用是通过CLI构建的，但我们正在读取一个主index.js文件。我们没有使用组件。我在https：// localhost：3000上运行。

我从Microsoft：Contoso Message Body Checker（带有清单XML）下载了示例代码到我的本地主机中。它像冠军一样奔跑。

但是，当我尝试将其放入manifest.xml中时，却不确定如何将其挂接到我们的index.js文件中。

代码很长。但是，我加载了manifest.xml和vue应用程序的顶部。

这是Contorso邮件正文检查器清单：

<?xml version="1.0" encoding="utf-8"?>
<OfficeApp
  xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
  xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides"
  xsi:type="MailApp">

  <Id>D0590B2A-0CB8-4B4F-AD70-C520AFA6E3FC</Id>
  <Version>1.0</Version>
  <ProviderName>Contoso</ProviderName>
  <DefaultLocale>en-us</DefaultLocale>
  <DisplayName DefaultValue="Contoso Message Body Checker" />
  <Description DefaultValue="Contoso Message Body Checker" />

  <Requirements>
    <Sets DefaultMinVersion="1.1">
      <Set Name="Mailbox" />
    </Sets>
  </Requirements>

  <FormSettings>
    <Form xsi:type="ItemEdit">
      <DesktopSettings>
        <SourceLocation DefaultValue="https://localhost:3000/index_checker.html" />
      </DesktopSettings>
    </Form>
  </FormSettings>

  <Permissions>ReadWriteMailbox</Permissions>

  <Rule xsi:type="RuleCollection" Mode="Or">
    <Rule xsi:type="ItemIs" ItemType="Message" FormType="Edit" />
    <Rule xsi:type="ItemIs" ItemType="Appointment" FormType="Edit" />
  </Rule>

  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
    <!-- On Send requires VersionOverridesV1_1 -->
    <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
      <Description resid="residAppDescription" />
      <Requirements>
        <bt:Sets DefaultMinVersion="1.3">
          <bt:Set Name="Mailbox" />
        </bt:Sets>
      </Requirements>
      <Hosts>
        <Host xsi:type="MailHost">
          <DesktopFormFactor>
            <!-- The functionfile and function name to call on message send.  -->
            <!-- In this particular case the function validateBody will be called within the JavaScript code referenced in residUILessFunctionFileUrl. -->
            <FunctionFile resid="residUILessFunctionFileUrl" />
            <ExtensionPoint xsi:type="Events">
              <Event Type="ItemSend" FunctionExecution="synchronous" FunctionName="validateBody" />
            </ExtensionPoint>
          </DesktopFormFactor>
        </Host>
      </Hosts>
      <Resources>
        <bt:Urls>
           <!-- The JavaScript code is hosted on a secure and trusted web server. -->
          <bt:Url id="residUILessFunctionFileUrl" DefaultValue="https://localhost:3000/index_checker.html" ></bt:Url>
        </bt:Urls>
      </Resources>
    </VersionOverrides>
  </VersionOverrides>
</OfficeApp>

这是带有上述添加内容的manifest.xml 

<?xml version="1.0" encoding="UTF-8"?>
<!--Created:ce44715c-8c4e-446b-879c-ea9ebe0f09c8-->
<OfficeApp
          xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
          xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0"
          xsi:type="MailApp">

  <!-- Begin Basic Settings: Add-in metadata,used for all versions of Office unless override provided. -->

  <!-- IMPORTANT! Id must be unique for your add-in,if you reuse this manifest ensure that you change this id to a new GUID. -->
  <Id>3f1a65ac-9e5a-4ce7-8203-2ff6f626e81e</Id>

  <!--Version. Updates from the store only get triggered if there is a version change. -->
  <Version>0.0.0.7</Version>
  <ProviderName>App Name</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>

  <!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
  <DisplayName DefaultValue="App Name" />
  <Description DefaultValue="App Name"/>
  <IconUrl DefaultValue="http://localhost:3000/images/icon64.png"/>
  <HighResolutionIconUrl DefaultValue="http://localhost:3000/images/icon128.png" />

  <!-- Domains that will be allowed when navigating. For example,if you use ShowTaskpane and then have an href link,navigation will only be allowed if the domain is on this list. -->
  <AppDomains>
    <AppDomain>AppDomain1</AppDomain>
  </AppDomains>
  <!--End Basic Settings. -->

  <Hosts>
    <Host Name="Mailbox" />
  </Hosts>
  <Requirements>
    <Sets>
      <Set Name="Mailbox" MinVersion="1.1" />
    </Sets>
  </Requirements>
  <FormSettings>
    <Form xsi:type="ItemRead">
      <DesktopSettings>
        <SourceLocation DefaultValue="http://localhost:3000/index.html"/>
        <RequestedHeight>250</RequestedHeight>
      </DesktopSettings>
    </Form>
  </FormSettings>

  <Permissions>ReadWriteItem</Permissions>
  <Rule xsi:type="RuleCollection" Mode="Or">
    <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read" />
    <Rule xsi:type="ItemIs" ItemType="Message" FormType="Edit" />
    <Rule xsi:type="ItemIs" ItemType="Appointment" FormType="Read" />
    <Rule xsi:type="ItemIs" ItemType="Appointment" FormType="Edit" />
  </Rule>
  <DisableEntityHighlighting>false</DisableEntityHighlighting>

  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
    <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
      <Requirements>
        <bt:Sets DefaultMinVersion="1.3">
          <bt:Set Name="Mailbox" />
        </bt:Sets>
      </Requirements>
      <Hosts>
        <Host xsi:type="MailHost">
          <DesktopFormFactor>

            <!-- The functionfile and function name to call on message send.  -->
            <!-- In this particular case the function validateBody will be called within the JavaScript code referenced in residUILessFunctionFileUrl. -->
            <FunctionFile resid="residUILessFunctionFileUrl" />
            <ExtensionPoint xsi:type="Events">
              <Event Type="ItemSend" FunctionExecution="synchronous" FunctionName="app.$methods.validateBody" />
            </ExtensionPoint>

            <!-- Appointment Edit -->
            <ExtensionPoint xsi:type="AppointmentOrganizerCommandSurface">
              <!-- Use the default tab of the ExtensionPoint or create your own with <CustomTab id="myTab"> -->
              <OfficeTab id="TabDefault">
                <!-- Up to 6 Groups added per Tab -->
                <Group id="msgReadGroup">
                  <Label resid="groupLabel" />
                  <!-- Launch the add-in : task pane button -->
                  <Control xsi:type="Button" id="msgReadOpenPaneButton">
                    <Label resid="paneReadButtonLabel" />
                    <Supertip>
                      <Title resid="paneReadSuperTipTitle" />
                      <Description resid="paneReadSuperTipDescription" />
                    </Supertip>
                    <Icon>
                      <bt:Image size="16" resid="icon16" />
                      <bt:Image size="32" resid="icon32" />
                      <bt:Image size="80" resid="icon80" />
                    </Icon>
                    <Action xsi:type="ShowTaskpane">
                      <!--<TaskpaneId>Office.AutoShowTaskpaneWithDocument</TaskpaneId>-->
                      <SourceLocation resid="messageReadTaskPaneUrl" />
                    </Action>
                  </Control>
                  <!-- Go to http://aka.ms/ButtonCommands to learn how to add more Controls: ExecuteFunction and Menu -->
                </Group>
              </OfficeTab>
            </ExtensionPoint>

            <ExtensionPoint xsi:type="AppointmentAttendeeCommandSurface">
              <!-- Use the default tab of the ExtensionPoint or create your own with <CustomTab id="myTab"> -->
              <OfficeTab id="TabDefault">
                <!-- Up to 6 Groups added per Tab -->
                <Group id="msgReadGroup2">
                  <Label resid="groupLabel" />
                  <!-- Launch the add-in : task pane button -->
                  <Control xsi:type="Button" id="msgReadOpenPaneButton2">
                    <Label resid="paneReadButtonLabel" />
                    <Supertip>
                      <Title resid="paneReadSuperTipTitle" />
                      <Description resid="paneReadSuperTipDescription" />
                    </Supertip>
                    <Icon>
                      <bt:Image size="16" resid="icon16" />
                      <bt:Image size="32" resid="icon32" />
                      <bt:Image size="80" resid="icon80" />
                    </Icon>
                    <Action xsi:type="ShowTaskpane">
                      <SourceLocation resid="messageReadTaskPaneUrl" />
                    </Action>
                  </Control>
                  <!-- Go to http://aka.ms/ButtonCommands to learn how to add more Controls: ExecuteFunction and Menu -->
                </Group>
              </OfficeTab>
            </ExtensionPoint>

            <!-- Go to http://aka.ms/ExtensionPointsCommands to learn how to add more Extension Points: MessageRead,AppointmentOrganizer,AppointmentAttendee -->
          </DesktopFormFactor>
        </Host>
      </Hosts>

      <Resources>
        <bt:Images>
          <bt:Image id="icon16" DefaultValue="http://localhost:3000/images/icon16.png"/>
          <bt:Image id="icon32" DefaultValue="http://localhost:3000/images/icon32.png"/>
          <bt:Image id="icon80" DefaultValue="http://localhost:3000/images/icon80.png"/>
        </bt:Images>
        <bt:Urls>
          <bt:Url id="functionFile" DefaultValue="http://localhost:3000/index.html"/>
          <bt:Url id="messageReadTaskPaneUrl" DefaultValue="http://localhost:3000/index.html"/>
          <bt:Url id="residUILessFunctionFileUrl" DefaultValue="https://localhost:3000/index.html" ></bt:Url>
        </bt:Urls>
        <bt:ShortStrings>
          <bt:String id="groupLabel" DefaultValue="App Name (Local)"/>
          <bt:String id="customTabLabel"  DefaultValue="App Name"/>
          <bt:String id="paneReadButtonLabel" DefaultValue="App Name"/>
          <bt:String id="paneReadSuperTipTitle" DefaultValue="App Name"/>
        </bt:ShortStrings>
        <bt:LongStrings>
          <bt:String id="paneReadSuperTipDescription" DefaultValue="Click here to add/edit the agenda for this meeting."/>
        </bt:LongStrings>
      </Resources>
    </VersionOverrides>
  </VersionOverrides>
</OfficeApp>

index.js的开始，用于创建视图片段。这是通过index.html

引入的 
Office.onReady().then(function (info) {

    document.body.style.zoom = 1.0;
    document.getElementById("confirmDeleteModal").removeAttribute("style");

    Vue.use(VueI18n);

    if (info.host === Office.HostType.Outlook) {
            //put in the stuff here...
        var app = new Vue({
            el: '#vueApp',

我认为问题出在这里...我试图将vue作为外部函数调用。

            <FunctionFile resid="residUILessFunctionFileUrl" />
            <ExtensionPoint xsi:type="Events">
              <Event Type="ItemSend" FunctionExecution="synchronous" FunctionName="app.$methods.validateBody" />
            </ExtensionPoint>

任何有关如何制作钩子的建议将不胜感激。

谢谢

解决方法

我对VueJS不太熟悉，但是On-Send功能通过使用清单中提供的FunctionName的值在外接程序JS中查找处理函数。该值被视为文字字符串。 {strong>不用eval评估。因此app.$methods.validateBody将不起作用。

尝试将validateBody设为外接程序JS中的简单全局函数，并将其设置为清单中的FunctionName。

作为替代建议，请尝试将函数手动添加到window对象中，以查看它是否起作用。

window.validateBody = app.$methods.validateBody;
office-js

相关问答

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd impor...
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：...
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon:...
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Alt...
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirem...