Erstellen einer Erweiterung für adaptive Karten mit Medienauswahlaktion

Erstellen eines Gerüsts für ein Projekt für Erweiterungen adaptiver Karten

Erstellen Sie ein neues Projektverzeichnis für Ihr Projekt, und ändern Sie Ihren aktuellen Ordner zu diesem Verzeichnis.

Erstellen Sie ein neues Projekt, indem Sie den Yeoman SharePoint-Generator aus dem neuen Verzeichnis heraus, das Sie erstellt haben, ausführen:

yo @microsoft/sharepoint

Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Werte ein (wählen Sie für alle unten nicht aufgeführten Eingabeaufforderungen die Standardoption aus):

• Wie lautet der Name Ihrer Lösung? media-upload-tutorial
• Welchen Typ von clientseitiger Komponente möchten Sie erstellen? Erweiterung für adaptive Karten
• Welche Vorlage möchten Sie verwenden? Primäre Textvorlage
• Wie lautet der Name Ihrer Erweiterung für adaptive Karten? MediaUpload

An diesem Punkt installiert Yeoman die erforderlichen Abhängigkeiten und erstellt ein Gerüst für die Lösungsdateien. Dieser Vorgang kann einige Minuten dauern.

Aktualisieren der URL der gehosteten Workbench Ihres Projekts

Wenn Sie die gulp-Task serve verwenden, wird standardmäßig ein Browser mit der angegebenen URL der gehosteten Workbench gestartet, die in Ihrem Projekt angegeben ist. Die Standard-URL für die gehostete Workbench in einem neuen Projekt verweist auf eine ungültige URL.

• Suchen und öffnen Sie die Datei ./config/serve.json in Ihrem Projekt.

• Suchen Sie die Eigenschaft initialPage:

  {
    "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
    "port": 4321,
    "https": true,
    "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
  }
  

• Ändern Sie die enter-your-SharePoint-site-Domäne in die URL Ihres SharePoint-Mandanten und dessen Website, die Sie zu Testzwecken verwenden möchten. Zum Beispiel: https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx.

Wenn Sie an diesem Punkt dies tun gulp serve, wird die MediaUpload Karte angezeigt:

Hinzufügen einer Medienuploadaktion zu Ihrer Erweiterung für adaptive Karten

An diesem Punkt verfügen wir über den standardmäßigen Code für die Erweiterung adaptiver Karten. Jetzt ist es an der Zeit, die Elemente mit der Auswahl von Medien aus den Karten- und Schnellansichten aufzuflackern.

In der Kartenansicht stellen wir eine Schaltfläche bereit, die die folgenden Aktionen ausführt:

• Hochladen einer Bilddatei

Aktualisieren Sie die Etiketten, die auf der Karte erscheinen werden

Bevor wir mit dem Hinzufügen der Aktionen beginnen, lassen Sie uns zuerst die Zeichenfolgen aktualisieren, die auf der Karte angezeigt werden.

Suchen Sie dazu die folgende Datei in Ihrem Projekt, und öffnen Sie sie: ./src/adaptiveCardExtensions/mediaUpload/loc/en-us.js

Ersetzen Sie den Inhalt dieser Datei durch:

define([], function() {
  return {
    "PropertyPaneDescription": "Tutorial on media upload action in ACE.",
    "TitleFieldLabel": "MediaUpload",
    "Title": "Media Upload",
    "SubTitle": "Media Upload Actions",
    "PrimaryText": "Media Upload Demo",
    "Description": "Demonstrating Media Upload Capabilities",
    "UploadPNG": "Upload PNG file"
  }
});

Suchen Sie als Nächstes die folgende Datei in Ihrem Projekt, und öffnen Sie sie: ./src/adaptiveCardExtensions/mediaUpload/loc/mystring.d.ts

Fügen Sie Folgendes hinzu:

UploadPNG: string;

an die IMediaUploadAdaptiveCardExtensionStrings Schnittstelle.

Hinzufügen von Aktionen in der Kartenansicht

Wie bereits erwähnt, fügen wir in der Kartenansicht eine Schaltfläche hinzu, die es dem Benutzer ermöglicht, eine PNG-Datei hochzuladen, wenn er auf die Kartenansicht klickt.

Suchen und öffnen Sie die folgende Datei in Ihrem Projekt: ./src/adaptiveCardExtensions/mediaUpload/cardView/CardView.ts

Ersetzen Sie hier die Definition der cardButtons Funktion durch die folgende:

public get cardButtons(): [ICardButton] | [ICardButton, ICardButton] | undefined {
  return [
    {
      title: strings.UploadPNG,
      action: {
        type: 'VivaAction.SelectMedia'
        parameters: {
            mediaType: MediaType.Image
        }
      }
    }
  ];
}

Mit dieser Änderung haben wir eine Schaltfläche mit bezeichnung Upload PNG file und bei Klick aktion ist VivaAction.SelectMediakonfiguriert, die den Dateiuploader modal lädt.

Ersetzen Sie als Nächstes den Inhalt onCardSelection Funktion durch Folgendes:

public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
  return {
      type: 'QuickView',
      parameters: {
        view: QUICK_VIEW_REGISTRY_ID
      }
  };
}

Diese Änderung bedeutet, dass ein Benutzer, der auf die Kartenansicht klickt, eine Schnellansicht öffnen sollte.

Mit den bisher vorgenommenen Änderungen würde Ihre Kartenansicht wie folgt aussehen:

Hinzufügen von Aktionen in der Schnellansicht

In der Schnellansicht werden Schaltflächen für drei Aktionen eingeführt:

• Hochladen einer PNG-Datei
• Hochladen einer JPG-Datei
• Hochladen einer PNG- und JPG-Datei

Zunächst definieren wir die Vorlage für die Schnellansicht. Suchen Sie dazu die folgende Datei in Ihrem Projekt, und öffnen Sie sie: ./src/adaptiveCardExtensions/mediaUpload/quickView/template/QuickViewTemplate.json

Ersetzen Sie den Inhalt dieser Datei durch den folgenden Text:

{
  "schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "TextBlock",
      "text": "${filesUploaded}"
    }
  ],
  "actions": [
    {
      "title": "Upload a png",
      "type": "VivaAction.SelectMedia",
      "parameters": {
        "mediaType": "MediaType.Image",
        "allowMultipleCapture": false,
        "supportedFileFormats": "png"
      }
    },
    {
      "title": "Upload a jpg",
      "type": "VivaAction.SelectMedia",
      "parameters": {
        "mediaType": "MediaType.Image",
        "allowMultipleCapture": false,
        "supportedFileFormats": "jpg"
      }
    },
    {
      "title": "Upload a png and jpg",
      "type": "VivaAction.SelectMedia",
      "parameters": {
        "mediaType": "MediaType.Image",
        "allowMultipleCapture": true,
        "supportedFileFormats": "png jpg"
      }
    }
  ]
}

Nachdem Sie diese Aktionen hinzugefügt haben, würde Ihre Schnellansicht wie folgt aussehen:

Richten Sie den Status für unsere Adaptive Card Extension ein

Bislang haben wir unsere Kartenansicht und Schnellansicht erstellt. Wenn Sie an diesem Punkt eine gulp serve ausführen, können Sie die oben beschriebenen Aktionen ausführen.

Aber jetzt wollen wir noch einen Schritt weiter gehen.

Wir möchten nun alle Dateien anzeigen, die in der Schnellansicht hochgeladen wurden, wenn die jeweiligen Aktionen ausgeführt werden.

Wir müssen einige schnelle Änderungen vornehmen, um zunächst neue Zustände einzuführen. Suchen und öffnen Sie zunächst die folgende Datei in Ihrem Projekt: ./src/adaptiveCardExtensions/mediaUpload/MediaUploadAdaptiveCardExtension.ts

Fügen Sie hier der Schnittstelle states Folgendes IMediaUploadAdaptiveCardExtensionState hinzu:

filesUploaded: string;

Ändern Sie als Nächstes in der onInit Funktion this.state={} in

this.state = {
  filesUploaded: ''
};

Wir werden nun ähnliche Änderungen auch in der Schnellansicht vornehmen.

Suchen und öffnen Sie die folgende Datei in Ihrem Projekt: ./src/adaptiveCardExtensions/mediaUpload/quickView/QuickView.ts

Fügen Sie der IQuickViewData Schnittstelle die folgenden Eigenschaften hinzu:

filesUploaded: string;

und fügen Sie dann die folgenden beiden Zeilen im zurückgegebenen Objekt von data Getter hinzu:

filesUploaded: this.state.filesUploaded

Implementieren Sie die Funktion onAction

Bisher haben wir unsere Medienupload-Aktion definiert und in unseren Zuständen verkabelt. Jetzt können wir endlich die onAction Funktion implementieren, die dem Drittanbieter die Möglichkeit gibt, zu entscheiden, was er mit den hochgeladenen Medieninformationen tun möchte.

Öffnen Sie hierzu die Datei QuickView.ts (./src/adaptiveCardExtensions/mediaUpload/quickView/QuickView.ts), und importieren Sie die ISelectMediaActionArguments Schnittstelle wie folgt:

import {ISelectMediaActionArguments} from '@microsoft/sp-adaptive-card-extension-base';

Schließlich führen Sie die folgende onAction Funktion in der QuickView-Klasse ein, damit wir eine Liste unserer Dateien erhalten können:

public onAction(action: ISelectMediaActionArguments): void {
  if (action.type === 'VivaAction.SelectMedia') {
    // media is an array of attachment objects which contain the content and filename
    this.setState({
        filesUploaded: action.media.map(attachment => attachment.fileName).join(',')
    });
  }
}

Wenn also die VivaAction.SelectMedia Aktion in der Schnellansicht ausgelöst wird, übergibt das Framework für adaptive Kartenerweiterungen abhängig von den übergebenen Parametern eine Medienanlage an den onAction Rückruf. In der oben freigegebenen Implementierung überprüfen wir, ob der action Typ vom Typ ist, und wenn dies der Wert VivaAction.SelectMediaist, rendern wir die Schnellansicht erneut, indem wir einen setStateausführen, in dem der filesUploaded Textblock aktualisiert wird.

An diesem Punkt können Sie gulp serve erneut ausführen und sehen, wie alle bisher vorgenommenen Änderungen zusammengekommen sind.

Das ist es! Herzlichen Glückwunsch zum erfolgreichen Erstellen der Erweiterung für adaptive Karten mit Medienuploadaktion.