Outlook にピン留め可能な作業ウィンドウを実装する

アドイン コマンドの 作業ウィンドウ UX 図形は、開いているメッセージまたは会議出席依頼の右側に垂直作業ウィンドウを開きます。 これにより、アドインは、複数のテキスト フィールドに入力するなど、より詳細な操作のための UI を提供できます。 この作業ウィンドウは、メッセージの一覧を表示するときに閲覧ウィンドウに表示でき、メッセージをすばやく処理できます。

ただし、既定では、ユーザーが閲覧ウィンドウでメッセージのアドイン作業ウィンドウを開き、新しいメッセージを選択すると、作業ウィンドウは自動的に閉じられます。 頻繁に使用されるアドインの場合、ユーザーはそのウィンドウを開いたままにして、メッセージごとにアドインを有効化する手間がなくなることを望むでしょう。 ピン留め可能な作業ウィンドウを使用すると、アドインでユーザーにそのオプションを指定できます。

作業ウィンドウのピン留めをサポートする

ピン留めのサポートを追加する際の最初の手順は、アドインのマニフェストで実行します。 マークアップは、アドインで使用するマニフェストの種類によって異なります。

"actions": [
    {
        "id": "OpenTaskPane",
        "type": "openPage",
        "view": "TaskPaneView",
        "displayName": "OpenTaskPane",
        "pinnable": true
    }
]

<!-- 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="green-icon-16" />
    <bt:Image size="32" resid="green-icon-32" />
    <bt:Image size="80" resid="green-icon-80" />
  </Icon>
  <Action xsi:type="ShowTaskpane">
    <SourceLocation resid="readTaskPaneUrl" />
    <SupportsPinning>true</SupportsPinning>
  </Action>
</Control>

完全な例については、command-demo のサンプル マニフェストの msgReadOpenPaneButton コントロールをご覧ください。

現在選択されているメッセージに基づいた UI の更新を処理する

現在のアイテムに基づいて作業ウィンドウの UI または内部変数を更新するには、変更の通知を受け取るイベント ハンドラの登録が必要になります。

イベント ハンドラを実装する

イベント ハンドラは、オブジェクト リテラルの単一パラメーターを受け入れる必要があります。 このオブジェクトの type プロパティは、Office.EventType.ItemChanged に設定されます。 イベントが呼び出されたときには、既に、Office.context.mailbox.item オブジェクトは現在選択されているアイテムを反映するように更新されています。

function itemChanged(eventArgs) {
  // Update UI based on the new current item.
  updateTaskPaneUI(Office.context.mailbox.item);
}

// Example implementation.
function updateTaskPaneUI(item) {
  // Assuming that item is always a read item (instead of a compose item).
  if (item != null) console.log(item.subject);
}

イベント ハンドラーを登録する

Office.context.mailbox.addHandlerAsync メソッドを使用して、Office.EventType.ItemChanged イベント用のイベント ハンドラを登録します。 これは、作業ウィンドウの Office.onReady 関数で行う必要があります。

Office.onReady(() => {
  $(document).ready(() => {
    // Set up the ItemChanged event.
    Office.context.mailbox.addHandlerAsync(Office.EventType.ItemChanged, itemChanged);
    updateTaskPaneUI(Office.context.mailbox.item);
  });
});

複数選択での作業ウィンドウのピン留め

Outlook on the webおよび新しい Outlook on Windows (プレビュー) で、アイテムの複数選択機能を実装するアドインの作業ウィンドウが開くと、Outlook クライアントに自動的にピン留めされます。 ユーザーが別のメール アイテムに切り替えたり、作業ウィンドウからピン アイコンを選択した場合でも、 ピン 留めされたままになります。 作業ウィンドウを閉じるには、作業ウィンドウから [ 閉じる ] ボタンを選択する必要があります。

逆に、従来の Outlook on Windows と Outlook on Mac では、ユーザーが別のメール アイテムに切り替えたときに、複数選択アドインの作業ウィンドウが自動的にピン留めされ、閉じられません。

ユーザーにデプロイする

Outlook アドインを AppSource に発行する予定で、ピン留め可能な作業ウィンドウで構成されている場合、アドイン のコンテンツは静的ではなく、メールボックスで開いている、または選択されているメッセージに関連するデータを明確に表示する必要があります。 これにより、アドインが AppSource 検証に合格します。

関連項目

ピン留め可能な作業ウィンドウを実装するサンプル アドインについては、GitHub の command-demo をご覧ください。