Freigeben über

Erweiterte Schnellansichtsfunktionen

  • Artikel

Dieses Lernprogramm baut auf dem Lernprogramm Erweiterte Kartenansichtsfunktionen auf.

Beginnen Sie mit der HelloWorld-Erweiterung für Adaptive Karten aus dem vorherigen Lernprogramm Erweiterte Kartenansichtsfunktionen. Die HelloWorld-Erweiterung zeigt entweder die Gesamtanzahl der Schritte oder jeweils einen einzelnen Schritt an. Mithilfe der Schnellansicht kann die Erweiterung für adaptive Karten eine Liste aller Schritte anzeigen. Darüber hinaus kann die Erweiterung weitere Details zu einem bestimmten Schritt anzeigen, wenn er ausgewählt ist.

Anzeigen aller Elemente in der Schnellansicht

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

  2. Aktualisieren Sie den Code in der Datei QuickView.ts mit den folgenden Änderungen:

    import { IListItem } from '../HelloWorldAdaptiveCardExtension';

..

export interface IQuickViewData {
  items: IListItem[];
}

..

public get data(): IQuickViewData {
  return {
    items: this.state.items
  };
}

  3. Anschließend suchen und öffnen Sie die Datei: src/adaptiveCardExtensions/helloWorld/quickView/template/QuickViewTemplate.json und ersetzen ihren Inhalt durch den folgenden JSON-Code. Dadurch wird die in der Erweiterung für adaptive Karten gerenderte Schnellansichtskarte aktualisiert:

    {
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "Container",
      "$data": "${items}",
      "selectAction": {
        "type": "Action.Submit",
        "data": {
          "id": "selectAction",
          "newIndex": "${index}"
        }
      },
      "separator": true,
      "items": [
        {
          "type": "TextBlock",
          "text": "${title}",
          "color": "dark",
          "weight": "Bolder",
          "size": "large",
          "wrap": true,
          "maxLines": 1,
          "spacing": "None"
        },
        {
          "type": "TextBlock",
          "text": "${description}",
          "color": "dark",
          "wrap": true,
          "size": "medium",
          "maxLines": 1,
          "spacing": "None"
        }
      ]
    }
  ]
}

  4. Wie Sie in der JSON-Vorlage sehen können, verwenden wir ${index}, um den ausgewählten Elementindex an die Schnellansicht zu übergeben. Damit dies funktioniert, müssen wir die -Eigenschaft des IListItem im vorherigen Tutorial definierten Objekts hinzufügen und auffüllenindex. Öffnen und suchen Sie die Datei ./src/adaptiveCardExtensions/helloWorld/HelloWorldAdaptiveCardExtension.ts, fügen Sie dann die Eigenschaft index zur IListItem-Definition hinzu:

    export interface IListItem {
  title: string;
  description: string;
  index: number;
}

  5. Suchen Sie abschließend die fetchData()-Methode in derselben Klasse, und ändern Sie die darin enthaltene Zuordnungsfunktion für Folgendes:

    ...
.then((jsonResponse) => jsonResponse.value.map(
    (item, index) => { return { title: item.Title, description: item.Description, index: index }; })
)
...

Erstellen und starten Sie die Erweiterung für adaptive Karten in der gehosteten Workbench:

gulp serve

Sobald der lokale Webserver geladen wurde, navigieren Sie zur gehosteten Workbench: https://{tenant}.sharepoint.com/_layouts/15/workbench.aspx.

Öffnen Sie die Toolbox, und wählen Sie Ihre Erweiterung aus. Wählen Sie die Karte aus, um die Schnellansicht zu öffnen:

Gerenderte Schnellansicht

Da der onAction()-Handler nicht geändert wurde, um den Elementklick zu verarbeiten, führt die Auswahl eines Elements zu keiner Reaktion. Dies gehen Sie im nächsten Schritt an.

Erstellen einer neuen Schnellansicht

  1. Erstellen Sie eine neue Datei zum Speichern einer neuen Schnellansichtskarte: ./src/adaptiveCardExtensions/helloWorld/quickView/DetailedQuickViewTemplate.json.

  2. Fügen Sie der Datei DetailedQuickViewTemplate.json den folgenden JSON-Code hinzu:

    {
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "text": "${title}",
              "size": "ExtraLarge"
            },
            {
              "type": "TextBlock",
              "text": "${description}",
              "size": "Medium"
            }
          ]
        },
        {
          "type": "Column",
          "style": "emphasis",
          "items": [
            {
              "type": "TextBlock",
              "text": "${details}",
              "weight": "Lighter"
            }
          ]
        }
      ]
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Back",
          "data": {
            "id": "back"
          }
        }
      ]
    }
  ]
}

  3. Erstellen Sie eine neue Datei zum Implementieren einer neuen Schnellansicht: ./src/adaptiveCardExtensions/helloWorld/quickView/DetailedQuickView.ts

  4. Fügen Sie der Datei DetailedQuickView.ts den folgenden Code hinzu:

    import { BaseAdaptiveCardView, IActionArguments, ISPFxAdaptiveCard } from '@microsoft/sp-adaptive-card-extension-base';
import { IHelloWorldAdaptiveCardExtensionProps, IHelloWorldAdaptiveCardExtensionState } from '../HelloWorldAdaptiveCardExtension';

export interface IDetailedViewData {
  title: string;
  description: string;
  details: string;
}

export class DetailedView extends BaseAdaptiveCardView<
  IHelloWorldAdaptiveCardExtensionProps,
  IHelloWorldAdaptiveCardExtensionState,
  IDetailedViewData
> {
  public get data(): IDetailedViewData {
    const { description, title } = this.state.items[this.state.currentIndex];
    return {
      description,
      title,
      details: 'More details'
    };
  }

  public get template(): ISPFxAdaptiveCard {
    return require('./template/DetailedQuickViewTemplate.json');
  }
}

Registrieren der neuen Schnellansicht

Nachdem die neue detaillierte Schnellansicht erstellt wurde, müssen Sie sie jetzt bei der Erweiterung für adaptive Karten registrieren:

  1. Suchen und öffnen Sie die folgende Datei in Ihrem Projekt: ./src/adaptiveCardExtensions/helloWorld/HelloWorldAdaptiveCardExtension.ts.

  2. Nehmen Sie an dem Code in der Datei HelloWorldAdaptiveCardExtension.ts die folgenden Änderungen vor:

    import { DetailedView } from './quickView/DetailedQuickView';

..

export const DETAILED_QUICK_VIEW_REGISTRY_ID: string = 'HelloWorld_DETAILED_QUICK_VIEW';

..

public onInit(): Promise<void> {
  // ...
  this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());
  this.quickViewNavigator.register(DETAILED_QUICK_VIEW_REGISTRY_ID, () => new DetailedView());
  // ...
}

ViewNavigator

cardNavigator und quickViewNavigator der Erweiterung für adaptive Karten sind Instanzen eines ViewNavigator-Objekts.

Die ViewNavigator-Funktionen gehen über das Registrieren neuer Ansichten hinaus. ViewNavigator ist eine Statusverwaltungs-API für Karten und Schnellansichten. Wenn Ansichten erstellt werden, werden sie automatisch in einen Ansichtsstapel gepusht.

Erweiterungen für adaptive Karten können ViewNavigator verwenden, um den Stapel zu bearbeiten.

  • ViewNavigator.push(): Verschiebt eine neue Ansicht an den Anfang des Ansichtsstapels.
  • ViewNavigator.replace(): Ersetzt die oberste Ansicht durch eine neue Ansicht.
  • ViewNavigator.pop(): Wenn mehrere Ansichten vorhanden sind, wird die oberste Ansicht aus dem Ansichtsstapel angezeigt.
  • ViewNavigator.close(): Schließt die aktuelle Ansicht und entfernt die oberste Ansicht aus dem Ansichtsstapel.

Aktualisieren Sie die Schnellansicht, um zwischen Ansichten zu navigieren:

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

  2. Aktualisieren Sie den Code in der Datei QuickView.ts, der verarbeitet werden soll, wenn ein Element in der Schnellansicht ausgewählt wird:

    import { DETAILED_QUICK_VIEW_REGISTRY_ID } from '../HelloWorldAdaptiveCardExtension';

..

public onAction(action: IActionArguments): void {
  if (action.type === 'Submit') {
    const { id, newIndex } = action.data;
    if (id === 'selectAction') {
      this.quickViewNavigator.push(DETAILED_QUICK_VIEW_REGISTRY_ID, true);
      this.setState({ currentIndex: newIndex});
    }
  }
}

  3. Suchen und öffnen Sie die folgende Datei in Ihrem Projekt: ./src/adaptiveCardExtensions/helloWorld/quickView/DetailedQuickView.ts.

  4. Aktualisieren Sie den Code in der Datei DetailedQuickView.ts so, dass er verarbeitet wird, wenn die Schaltfläche "Zurück" der detaillierten Schnellansicht angeklickt wird:

    public onAction(action: IActionArguments): void {
  if (action.type === 'Submit') {
    const { id } = action.data;
    if (id === 'back') {
      this.quickViewNavigator.pop();
    }
  }
}

Laden Sie die Workbench erneut, klicken Sie auf die Karte, um die Schnellansicht zu öffnen, und klicken Sie auf ein Element in der Schnellansicht.

Anklicken eines Elements in der Schnellansicht

Versuchen Sie, auf Zurück zu klicken und ein anderes Element anzuklicken.

onRenderTypeChanged()

Wenn eine Erweiterung für Adaptive Karten von einem RenderType zu einem anderen übergeht, wird die onRenderTypeChanged()-Methode mit dem vorherigen RenderType; aufgerufen. this.renderType wird zu diesem Zeitpunkt aktualisiert. Dies kann für alle Aufgaben nützlich sein, die zwischen dem Übergang ausgeführt werden.

Sie können z. B. den Kartenstatus beibehalten, wenn Sie die Schnellansicht öffnen. Lassen Sie uns Folgendes implementieren:

  1. Suchen und öffnen Sie die folgende Datei in Ihrem Projekt: ./src/adaptiveCardExtensions/helloWorld/HelloWorldAdaptiveCardExtension.ts.

  2. Aktualisieren Sie den Code in der Datei HelloWorldAdaptiveCardExtension.ts, um ein privates Mitglied einzufügen, der den vorherigen Index während einer RenderType-Änderung erfasst:

    import { RenderType } from '@microsoft/sp-adaptive-card-extension-base';
import { DetailedView } from './quickView/DetailedQuickView';

private _cardIndex: number;

..

protected onRenderTypeChanged(oldRenderType: RenderType): void {
  if (oldRenderType === 'QuickView') {
    // Reset to the Card state when the Quick View was opened.
    this.setState({ currentIndex: this._cardIndex });
  } else {
    // The Quick View is opened, save the current index.
    this._cardIndex = this.state.currentIndex;
  }
}

Laden Sie die Workbench neu. Öffnen Sie die Schnellansicht, klicken Sie auf verschiedene Elemente, und schließen Sie die Ansicht wieder. Die Kartenansicht wird in dem Zustand verbleiben, in dem sie geöffnet wurde.

Schlussbemerkung

Nach diesem Lab sollten Sie mit Folgendem vertraut sein:

  • Erstellen und Registrieren von Schnellansichten
  • Verwenden von ViewNavigator für die Navigation
  • Behandeln von Aktionen aus der Schnellansicht
  • Verwenden von onRenderTypeChanged()
  • Erweiterte Bearbeitung der Schnellansicht