Erstellen eines Outlook-Add-Ins für einen Onlinebesprechungsanbieter

  • Artikel

Das Einrichten einer Onlinebesprechung ist eine zentrale Benutzeroberfläche für einen Outlook-Benutzer, und es ist einfach, eine Teams-Besprechung mit Outlook zu erstellen. Das Erstellen einer Onlinebesprechung in Outlook mit einem Nicht-Microsoft-Dienst kann jedoch umständlich sein. Durch die Implementierung dieses Features können Dienstanbieter die Erstellung und Teilnahmeerfahrung für Onlinebesprechung für ihre Outlook-Add-In-Benutzer optimieren.

Wichtig

Dieses Feature wird in Outlook im Web, Windows (klassisch und neu (Vorschau)), Mac, Android und iOS mit einem Microsoft 365-Abonnement unterstützt.

In diesem Artikel erfahren Sie, wie Sie Ihr Outlook-Add-In einrichten, damit Benutzer mithilfe Ihres Onlinebesprechungsdiensts eine Besprechung organisieren und daran teilnehmen können. In diesem Artikel wird der fiktive Onlinebesprechungsdienstanbieter "Contoso" verwendet.

Einrichten der Umgebung

Schließen Sie den Outlook-Schnellstart ab , der ein Add-In-Projekt mit dem Yeoman-Generator für Office-Add-Ins erstellt.

Konfigurieren des Manifests

Damit Benutzer Onlinebesprechungen mit Ihrem Add-In erstellen können, müssen Sie das Manifest konfigurieren. Das Markup unterscheidet sich je nach zwei Variablen:

Wenn Ihr Add-In ein XML-Manifest verwendet und das Add-In nur in Outlook im Web, Windows (klassisch und neu (Vorschau)) und Mac unterstützt wird, wählen Sie die Registerkarte Windows, Mac, Web aus. Wenn Ihr Add-In jedoch auch in Outlook unter Android und iOS unterstützt wird, wählen Sie die Registerkarte Mobil aus.

Wenn das Add-In das einheitliche Manifest (Vorschau) verwendet, wählen Sie die Registerkarte Einheitliches Manifest für Microsoft 365 (Entwicklervorschau) aus.

Wichtig

Onlinebesprechungsanbieter werden für das einheitliche Manifest (Vorschau) noch nicht unterstützt. Wir arbeiten daran, diesen Support bald bereitzustellen.

  1. Öffnen Sie in Ihrem Code-Editor das Outlook-Schnellstartprojekt, das Sie erstellt haben.

  2. Öffnen Sie die manifest.xml Datei, die sich im Stammverzeichnis Ihres Projekts befindet.

  3. Wählen Sie den gesamten <VersionOverrides-Knoten> (einschließlich Open- und Close-Tags) aus, und ersetzen Sie ihn durch den folgenden XML-Code.

<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">
    <Description resid="residDescription"></Description>
    <Requirements>
      <bt:Sets>
        <bt:Set Name="Mailbox" MinVersion="1.3"/>
      </bt:Sets>
    </Requirements>
    <Hosts>
      <Host xsi:type="MailHost">
        <DesktopFormFactor>
          <FunctionFile resid="residFunctionFile"/>
          <ExtensionPoint xsi:type="AppointmentOrganizerCommandSurface">
            <OfficeTab id="TabDefault">
              <Group id="apptComposeGroup">
                <Label resid="residDescription"/>
                <Control xsi:type="Button" id="insertMeetingButton">
                  <Label resid="residLabel"/>
                  <Supertip>
                    <Title resid="residLabel"/>
                    <Description resid="residTooltip"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="icon-16"/>
                    <bt:Image size="32" resid="icon-32"/>
                    <bt:Image size="64" resid="icon-64"/>
                    <bt:Image size="80" resid="icon-80"/>
                  </Icon>
                  <Action xsi:type="ExecuteFunction">
                    <FunctionName>insertContosoMeeting</FunctionName>
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="icon-16" DefaultValue="https://contoso.com/assets/icon-16.png"/>
        <bt:Image id="icon-32" DefaultValue="https://contoso.com/assets/icon-32.png"/>
        <bt:Image id="icon-48" DefaultValue="https://contoso.com/assets/icon-48.png"/>
        <bt:Image id="icon-64" DefaultValue="https://contoso.com/assets/icon-64.png"/>
        <bt:Image id="icon-80" DefaultValue="https://contoso.com/assets/icon-80.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="residFunctionFile" DefaultValue="https://contoso.com/commands.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="residDescription" DefaultValue="Contoso meeting"/>
        <bt:String id="residLabel" DefaultValue="Add a contoso meeting"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="residTooltip" DefaultValue="Add a contoso meeting to this appointment."/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</VersionOverrides>

Tipp

Weitere Informationen zu Manifesten für Outlook-Add-Ins finden Sie unter Office-Add-In-Manifeste und Hinzufügen von Unterstützung für Add-In-Befehle in Outlook auf mobilen Geräten.

Implementieren des Hinzufügens von Onlinebesprechungsdetails

In diesem Abschnitt erfahren Sie, wie Ihr Add-In-Skript die Besprechung eines Benutzers aktualisieren kann, um Onlinebesprechungsdetails einzuschließen. Folgendes gilt für alle unterstützten Plattformen.

  1. Öffnen Sie im selben Schnellstartprojekt die Datei ./src/commands/commands.js in Ihrem Code-Editor.

  2. Ersetzen Sie den gesamten Inhalt der commands.js-Datei durch den folgenden JavaScript-Code.

    // 1. How to construct online meeting details.
// Not shown: How to get the meeting organizer's ID and other details from your service.
const newBody = '<br>' +
    '<a href="https://contoso.com/meeting?id=123456789" target="_blank">Join Contoso meeting</a>' +
    '<br><br>' +
    'Phone Dial-in: +1(123)456-7890' +
    '<br><br>' +
    'Meeting ID: 123 456 789' +
    '<br><br>' +
    'Want to test your video connection?' +
    '<br><br>' +
    '<a href="https://contoso.com/testmeeting" target="_blank">Join test meeting</a>' +
    '<br><br>';

let mailboxItem;

// Office is ready.
Office.onReady(function () {
        mailboxItem = Office.context.mailbox.item;
    }
);

// 2. How to define and register a function command named `insertContosoMeeting` (referenced in the manifest)
//    to update the meeting body with the online meeting details.
function insertContosoMeeting(event) {
    // Get HTML body from the client.
    mailboxItem.body.getAsync("html",
        { asyncContext: event },
        function (getBodyResult) {
            if (getBodyResult.status === Office.AsyncResultStatus.Succeeded) {
                updateBody(getBodyResult.asyncContext, getBodyResult.value);
            } else {
                console.error("Failed to get HTML body.");
                getBodyResult.asyncContext.completed({ allowEvent: false });
            }
        }
    );
}
// Register the function.
Office.actions.associate("insertContosoMeeting", insertContosoMeeting);

// 3. How to implement a supporting function `updateBody`
//    that appends the online meeting details to the current body of the meeting.
function updateBody(event, existingBody) {
    // Append new body to the existing body.
    mailboxItem.body.setAsync(existingBody + newBody,
        { asyncContext: event, coercionType: "html" },
        function (setBodyResult) {
            if (setBodyResult.status === Office.AsyncResultStatus.Succeeded) {
                setBodyResult.asyncContext.completed({ allowEvent: true });
            } else {
                console.error("Failed to set HTML body.");
                setBodyResult.asyncContext.completed({ allowEvent: false });
            }
        }
    );
}

Testen und Überprüfen

Befolgen Sie die üblichen Anleitungen, um Ihr Add-In zu testen und zu überprüfen, und laden Sie dann das Manifest in Outlook im Web, unter Windows (klassisch oder neu (Vorschau)) oder unter Mac quer. Wenn Ihr Add-In auch mobile Geräte unterstützt, starten Sie Outlook auf Ihrem Android- oder iOS-Gerät nach dem Querladen neu. Nachdem das Add-In quergeladen wurde, erstellen Sie eine neue Besprechung, und vergewissern Sie sich, dass der Microsoft Teams- oder Skype-Umschalter durch Ihre eigene ersetzt wird.

Besprechungsbenutzeroberfläche erstellen

Als Besprechungsorganisator sollten Bildschirme ähnlich den folgenden drei Bildern angezeigt werden, wenn Sie eine Besprechung erstellen.

Der Bildschirm Der Bildschirm Der Bildschirm

Benutzeroberfläche für Besprechungen teilnehmen

Als Besprechungsteilnehmer sollte beim Anzeigen der Besprechung ein Bildschirm ähnlich der folgenden Abbildung angezeigt werden.

Der Bildschirm

Wichtig

Die Schaltfläche "Beitreten" wird nur in Outlook im Web, unter Mac, Android, iOS und in outlook unter Windows (Vorschau) unterstützt. Wenn nur ein Besprechungslink angezeigt wird, aber die Schaltfläche Teilnehmen in einem unterstützten Client nicht angezeigt wird, ist die Onlinebesprechungsvorlage für Ihren Dienst möglicherweise nicht auf unseren Servern registriert. Weitere Informationen finden Sie im Abschnitt Registrieren Ihrer Onlinebesprechungsvorlage .

Registrieren Ihrer Onlinebesprechungsvorlage

Die Registrierung Ihres Onlinebesprechungs-Add-Ins ist optional. Dies gilt nur, wenn Sie die Schaltfläche Teilnehmen zusätzlich zum Besprechungslink in Besprechungen anzeigen möchten. Nachdem Sie Ihr Onlinebesprechungs-Add-In entwickelt haben und es registrieren möchten, erstellen Sie mithilfe der folgenden Anleitung ein GitHub-Problem. Wir setzen uns mit Ihnen in Verbindung, um eine Registrierung Zeitleiste zu koordinieren.

Wichtig

Die Schaltfläche "Beitreten" wird nur in Outlook im Web, unter Mac, Android, iOS und in outlook unter Windows (Vorschau) unterstützt.

  1. Erstellen Sie ein neues GitHub-Problem.
  2. Legen Sie den Titel des neuen Problems auf "Outlook: Registrieren der Onlinebesprechungsvorlage für my-service" fest, und my-service ersetzen Sie durch Ihren Dienstnamen.
  3. Ersetzen Sie im Issuetext den vorhandenen Text durch die Zeichenfolge, die Sie in der newBody variablen oder einer ähnlichen Variable im Abschnitt Hinzufügen von Onlinebesprechungsdetails implementieren weiter oben in diesem Artikel festgelegt haben.
  4. Klicken Sie auf Neues Issue übermitteln.

Ein neuer GitHub-Problembildschirm mit Contoso-Beispielinhalten.

Verfügbare APIs

Für dieses Feature sind die folgenden APIs verfügbar.

Einschränkungen

Es gelten mehrere Einschränkungen.

  • Gilt nur für Onlinebesprechungsdienstanbieter.
  • Nur vom Administrator installierte Add-Ins werden auf dem Bildschirm zum Verfassen von Besprechungen angezeigt, wobei die Standardoption Teams oder Skype ersetzt wird. Vom Benutzer installierte Add-Ins werden nicht aktiviert.
  • Das Add-In-Symbol sollte in Graustufen mit Hexadezimalcode #919191 oder dessen Entsprechung in anderen Farbformaten vorliegen.
  • Nur ein Funktionsbefehl wird im Terminorganisationsmodus (Verfassen) unterstützt.
  • Das Add-In sollte die Besprechungsdetails im Terminformular innerhalb des Timeoutzeitraums von einer Minute aktualisieren. Allerdings ist jede Zeit, die das Add-In z. B. in einem Dialogfeld für die Authentifizierung geöffnet hat, vom Timeoutzeitraum ausgeschlossen.

Siehe auch