Блог

Главная - Вопросы по программированию - Использование надстройки Office Outlook 2002 для отправки с помощью VueJS

Использование надстройки Office Outlook 2002 для отправки с помощью VueJS

#office-js

#office-js

Вопрос:

Мы создаем надстройку Office Outlook с помощью VueJS. Мы хотим использовать функцию отправки при отправке для проверки тела наших приглашений в сообщении. Если это пройдет, приглашение будет удалено. В противном случае пользователь получит уведомление о внесении необходимых изменений.

Приложение VueJS создается с помощью командной строки, но мы читаем в одном основном 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>

Любые предложения о том, как сделать перехват, будут оценены.

Спасибо

Ответ №1:

Я не очень знаком с VueJS, однако функция отправки при отправке ищет функцию обработчика в JS надстройки, используя значение FunctionName , указанное в манифесте. Это значение обрабатывается как литеральная строка. Это не оценивается с помощью eval . Так app.$methods.validateBody не будет работать.

Попробуйте создать validateBody простую глобальную функцию в своих надстройках JS и установите ее в качестве FunctionName в своем манифесте.

В качестве альтернативного предложения попробуйте вручную добавить свою функцию к window объекту, чтобы посмотреть, работает ли это вместо этого.

 window.validateBody = app.$methods.validateBody;

Комментарии:

1. Спасибо. Я попробую.