Erstellen einer Dashboardregisterkarten-App

2024-12-30

Ein Dashboard ist ein Tool zum Nachverfolgen, Analysieren und Anzeigen von Daten, um Einblicke in eine organization oder einen bestimmten Prozess zu erhalten. Mithilfe von Dashboards in Teams können Sie wichtige Metriken überwachen und anzeigen.

Mit der Registerkartenvorlage Dashboard aus Microsoft 365 Agents Toolkit (früher als Teams Toolkit bezeichnet) können Sie mit der Integration einer Canvas mit mehreren Karten beginnen, die eine Übersicht über Inhalte in Teams bieten. Sie haben folgende Möglichkeiten:

Verwenden Sie Widgets, um Inhalte aus Apps und Diensten auf Der Registerkarte Dashboard anzuzeigen.
Integrieren Sie Ihre App in Graph-API, um Details zur Implementierung der ausgewählten Daten zu visualisieren.
Erstellen Sie anpassbare Dashboards, die es Ihrem Unternehmen ermöglichen, bestimmte Ziele festzulegen, die Ihnen helfen, die Informationen nachzuverfolgen, die Sie in mehreren Bereichen und abteilungsübergreifend anzeigen müssen.

Screenshot: Beispiel einer Dashboard

Ihr Team kann die neuesten Updates aus verschiedenen Quellen in Teams abrufen, indem Sie die App teams Dashboard Registerkarte verwenden. Verwenden Sie Dashboard Registerkarten-Apps, um zahlreiche Metriken, Datenquellen, APIs und Dienste zu verbinden. Dashboard-Registerkarten-Apps helfen Ihrem Unternehmen, relevante Informationen aus den Quellen zu extrahieren und den Benutzern zu präsentieren.

Hinzufügen eines neuen Dashboard

Nachdem Sie eine Dashboard Registerkarten-App erstellt haben, können Sie eine neue Dashboard hinzufügen.

Führen Sie die folgenden Schritte aus, um eine neue Dashboard hinzuzufügen:

Erstellen einer Dashboard-Klasse
Überschreiben von Methoden zum Anpassen Dashboard Registerkarten-App
Hinzufügen einer Route für die neue Dashboard-Registerkarten-App
Ändern des Manifests zum Hinzufügen einer neuen Dashboard-Registerkarten-App

Erstellen einer Dashboard-Klasse

Erstellen Sie eine Datei mit der .tsx Erweiterung für Ihre Dashboard im src/dashboards Verzeichnis, z. BYourDashboard.tsx. . Erstellen Sie dann eine Klasse, die die BaseDashboard class from
@microsoft/teamsfx-react.

JavaScript
TypeScript

// Create a dashboard class - https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/build-a-dashboard-tab-app#create-a-dashboard-class
import { BaseDashboard } from "@microsoft/teamsfx-react";

export default class SampleDashboard extends BaseDashboard { }

//YourDashboard.tsx
import { BaseDashboard } from "@microsoft/teamsfx-react";

export default class YourDashboard extends BaseDashboard<any, any> {}

Hinweis

Alle Methoden sind optional. Wenn Sie keine Methode überschreiben, wird das Standardlayout Dashboard verwendet.

Überschreiben von Methoden zum Anpassen Dashboard Registerkarten-App

Die BaseDashboard -Klasse stellt einige Methoden bereit, die Sie überschreiben können, um das Dashboard Layout anzupassen. In der folgenden Tabelle sind die Methoden aufgeführt, die Sie überschreiben können:

Methoden	Funktion
`styling()`	Passen Sie den Stil der Dashboard an.
`layout()`	Definieren Sie das Widgetlayout.

Der folgende Code ist ein Beispiel zum Anpassen des Dashboard Layouts:

.your-dashboard-layout {
  grid-template-columns: 6fr 4fr;
}

JavaScript
TypeScript

import { BaseDashboard } from "@microsoft/teamsfx-react";
import ListWidget from "../widgets/ListWidget";
import ChartWidget from "../widgets/ChartWidget";

export default class YourDashboard extends BaseDashboard {
  styling() {
    return "your-dashboard-layout";
  }

  layout() {
    return (
      <>
        <ListWidget />
        <ChartWidget />
      </>
    );
  }
}

import { BaseDashboard } from "@microsoft/teamsfx-react";
import ListWidget from "../widgets/ListWidget";
import ChartWidget from "../widgets/ChartWidget";

export default class YourDashboard extends BaseDashboard<any, any> {
  override styling(): string {
    return "your-dashboard-layout";
  }

  override layout(): JSX.Element | undefined {
    return (
      <>
        <ListWidget />
        <ChartWidget />
      </>
    );
  }
}

Hinzufügen einer Route für die neue Dashboard-Registerkarten-App

Sie müssen Ihr Widget mit einer Datenquellendatei verknüpfen. Das Widget übernimmt die daten, die im Dashboard aus der Quelldatei angezeigt werden.

Öffnen Sie die src/App.tsx Datei, und fügen Sie eine Route für die neue Dashboard hinzu. Hier ist ein Beispiel:

JavaScript
TypeScript

import YourDashboard from "./dashboards/YourDashboard";

export default function App() {
  ...
  <Route path="/yourdashboard" element={<yourdashboard />} />
  ...
}

import YourDashboard from "./dashboards/YourDashboard";

export default function App() {
  ...
  <Route path="/yourdashboard" element={<YourDashboard />} />
  ...
}

Ändern des Manifests zum Hinzufügen einer neuen Dashboard-Registerkarten-App

Öffnen Sie die appPackage/manifest.json Datei, und fügen Sie eine neue Dashboard Registerkarte unter hinzustaticTabs. Weitere Informationen finden Sie unter App-Manifest. Hier ist ein Beispiel:

{
  "entityId": "index1",
  "name": "Your Dashboard",
  "contentUrl": "${{TAB_ENDPOINT}}/index.html#/yourdashboard",
  "websiteUrl": "${{TAB_ENDPOINT}}/index.html#/yourdashboard",
  "scopes": ["personal"]
}

Anpassen des Dashboard-Layouts

TeamsFx bietet praktische Methoden zum Definieren und Ändern des Layouts der Dashboard. Im Folgenden sind die Methoden aufgeführt:

Drei Widgets in einer Reihe mit einer Höhe von 350 px belegen jeweils 20 Prozent, 60 Prozent bzw. 20 Prozent der Breite.

.customize-class-name {
  grid-template-rows: 350px;
  grid-template-columns: 2fr 6fr 2fr;
}

JavaScript
TypeScript

export default class SampleDashboard extends BaseDashboard {
    styling() {
      return "customize-class-name";
    }

    layout() {
      return (
        <>
          <ListWidget />
          <ChartWidget />
          <NewsWidget />
        </>
      );
    }
  }

export default class SampleDashboard extends BaseDashboard<any, any> {

  override styling(): string {
    return "customize-class-name";
  }

  override layout(): JSX.Element | undefined {
    return (
      <>
       <ListWidget />
       <ChartWidget />
       <NewsWidget />
      </>
    );
  }
}

Screenshot des angepassten Dashboard Layouts

Zwei Widgets in einer Reihe mit einer Breite von 600 px und 1100 px. Die Höhe der ersten Zeile ist die maximale Höhe ihres Inhalts, und die Höhe der zweiten Zeile beträgt 400 px.

.customize-class-name {
  grid-template-rows: max-content 400px;
  grid-template-columns: 600px 1100px;
}

JavaScript
TypeScript

export default class SampleDashboard extends Dashboard {
  styling() {
    return "customize-class-name";
  }

  layout() {
    return (
      <>
        <ListWidget />
        <ChartWidget />
        <NewsWidget />
      </>
    );
  }
}

    export default class SampleDashboard extends Dashboard {
  override styling(): string {
    return "customize-class-name";
  }

  override layout(): JSX.Element | undefined {
    return (
      <>
    <ListWidget />
    <ChartWidget />
    <NewsWidget />
      </>
    );
  }
    }

Screenshot: Anpassung der Höhe und Breite des Dashboard Layouts

Ordnen Sie zwei Widgets in einer Spalte an.

.one-column {
    display: grid;
    gap: 20px;
    grid-template-rows: 1fr 1fr;
  }

JavaScript
TypeScript

export default class SampleDashboard extends BaseDashboard {
  layout() {
    return (
      <>
        <ListWidget />
        <ChartWidget />
      </>
    );
  }
}

  export default class SampleDashboard extends BaseDashboard<any, any> {
    override layout(): JSX.Element | undefined {
      return (
        <>
          <NewsWidget />
          <div className="one-column">
            <ListWidget />
            <ChartWidget />          
          </div>
        </>
      );
    }
  }

App-Abstraktion auf der Registerkarte "Dashboard"

Um das Layout der Dashboard anzupassen, stellt TeamsFx eine BaseDashboard Klasse bereit, mit der die Entwickler eine Dashboard implementieren können.

Der folgende Code ist ein Beispiel für eine BaseDashboard Klasse:

function dashboardStyle(isMobile?: boolean) {
  return mergeStyles({
    display: "grid",
    gap: "20px",
    padding: "20px",
    gridTemplateRows: "1fr",
    gridTemplateColumns: "4fr 6fr",
    ...(isMobile === true ? { gridTemplateColumns: "1fr", gridTemplateRows: "1fr" } : {}),
  });
}

interface BaseDashboardState {
  isMobile?: boolean;
  showLogin?: boolean;
  observer?: ResizeObserver;
}

export class BaseDashboard<P, S> extends Component<P, S & BaseDashboardState> {
  private ref: React.RefObject<HTMLDivElement>;

  public constructor(props: Readonly<P>) {
    super(props);
    this.state = {
      isMobile: undefined,
      showLogin: undefined,
      observer: undefined,
    } as S & BaseDashboardState;
    this.ref = React.createRef<HTMLDivElement>();
  }

  public async componentDidMount() {
    const observer = new ResizeObserver((entries) => {
      for (const entry of entries) {
        if (entry.target === this.ref.current) {
          const { width } = entry.contentRect;
          this.setState({ isMobile: width < 600 } as S & BaseDashboardState);
        }
      }
    });
    observer.observe(this.ref.current!);
  }

  public componentWillUnmount(): void {
    if (this.state.observer && this.ref.current) {
      this.state.observer.unobserve(this.ref.current);
    }
  }

  public render() {
    return (
      <div
        ref={this.ref}
        className={mergeStyles(dashboardStyle(this.state.isMobile), this.styling())}
      >
        {this.layout()}
      </div>
    );
  }

  protected layout(): JSX.Element | undefined {
    return undefined;
  }

  protected styling(): string {
    return null;
  }
}

In der BaseDashboard -Klasse stellt TeamsFx grundlegende Layouts mit anpassbaren Methoden bereit. Die Dashboard ist immer noch eine React-Komponente, und TeamsFx bietet grundlegende Implementierungen von Funktionen basierend auf dem Lebenszyklus von React-Komponenten, z. B.:

Implementieren einer grundlegenden Renderlogik basierend auf dem Rasterlayout.
Hinzufügen eines Beobachters zur automatischen Anpassung an mobile Geräte.

Im Folgenden sind die anpassbaren Methoden aufgeführt, die überschrieben werden können:

Methoden	Funktion	Außerkraftsetzung empfehlen
`constructor()`	Initialisiert den Dashboard Zustand und die Variablen.	Nein
`componentDidMount()`	Ruft auf, nachdem eine Komponente eingebunden wurde.	Nein
`componentWillUnmount()`	Ruft auf, wenn die Bereitstellung einer Komponente aufgehoben wird.	Nein
`render()`	Ruft auf, wenn ein Update vorhanden ist. Das Dashboard Standardlayout ist in dieser Methode definiert.	Nein
`layout`	Definiert das Layout des Widgets im Dashboard. Sie können diese Methode überschreiben.	Ja
`styling()`	So passen Sie den Stil der Dashboard an. Sie können diese Methode überschreiben.	Ja

Widgets zeigen konfigurierbare Informationen und Diagramme auf Dashboards an. Sie werden auf dem Widgetboard angezeigt, wo Sie Widgets anheften, lösen, anordnen, ihre Größe ändern und anpassen können, um Ihre Interessen widerzuspiegeln. Ihr Widgetboard ist optimiert, um relevante Widgets und personalisierte Inhalte basierend auf Ihrer Nutzung anzuzeigen.

Sie können das Widget anpassen, indem Sie die folgenden Methoden in der BaseWidget -Klasse überschreiben:

Überschreiben header()Sie , body()und footer() , um das Widget anzupassen.

export class NewsWidget extends BaseWidget<any, any> {
override header(): JSX.Element | undefined {
return (
  <div>
    <News28Regular />
    <Text>Your News</Text>
    <Button icon={<MoreHorizontal32Regular />} appearance="transparent" />
  </div>
);
}

override body(): JSX.Element | undefined {
return (
  <div>
    <Image src="image.svg" />
    <Text>Lorem Ipsum Dolor</Text>
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Enim,
      elementum sed
    </Text>
  </div>
);
}

override footer(): JSX.Element | undefined {
return (
  <Button
    appearance="transparent"
    icon={<ArrowRight16Filled />}
    iconPosition="after"
    size="small"
  >
    View details
  </Button>
);
}
}

Screenshot: Beispiel für Kopf-, Text- und Fußzeileninhalte in einem Widget.

Überschreiben Sie body() und footer() , um das Widget anzupassen.

export class NewsWidget extends BaseWidget<any, any> {
override body(): JSX.Element | undefined {
return (
  <div>
    <Image src="image.svg" />
    <Text>Lorem Ipsum Dolor</Text>
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Enim,
      elementum sed
    </Text>
  </div>
);
}

override footer(): JSX.Element | undefined {
return (
  <Button
    appearance="transparent"
    icon={<ArrowRight16Filled />}
    iconPosition="after"
    size="small"
  >
    View details
  </Button>
);
}
}

Screenshot: Textkörper und Fußzeileninhalt in einem Widget

Überschreiben body() Sie, um das Widget anzupassen.

export class NewsWidget extends BaseWidget<any, any> {
override body(): JSX.Element | undefined {
return (
  <div>
    <Image src="image.svg" />
    <Text>Lorem Ipsum Dolor</Text>
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Enim,
      elementum sed
    </Text>
  </div>
);
}
}

Screenshot: Textinhalt in einem Widget

Einschließen eines Datenladeprogramms

Wenn Sie ihrem Widget vor dem Laden des Widgets ein Datenladeprogramm hinzufügen möchten, können Sie dem Zustand des Widgets eine -Eigenschaft hinzufügen, um anzugeben, dass das Datenladeprogramm ist loading(). Sie können diese Eigenschaft verwenden, um dem Benutzer einen Ladeindikator anzuzeigen.

Beispiel:

    override loading(): JSX.Element | undefined {
     return (
      <div className="loading">
       <Spinner label="Loading..." labelPosition="below" />
      </div>
     );
    }

Nun wird der Ladedreher angezeigt, während die Daten geladen werden. Wenn die Daten geladen werden, wird der Ladedreher ausgeblendet, und die Listendaten und die Fußzeilenschaltfläche werden angezeigt.

Behandeln des leeren Zustands

Sie können einen bestimmten Inhalt in Ihrem Widget anzeigen, wenn die Daten leer sind. Dazu müssen Sie die body -Methode in Ihrer Widgetdatei so ändern, dass unterschiedliche Zustände der Daten übernommen werden.

Das folgende Beispiel zeigt, wie ein leeres Bild angezeigt wird, wenn die Daten von ListWidget leer sind.

override body(): JSX.Element | undefined {
  let hasData = this.state.data && this.state.data.length > 0;
  return (
    <div>
      {hasData ? (
        <>
          {this.state.data?.map((t: ListModel) => {
            ...
          })}
        </>
      ) : (
        <div>
          <Image src="empty-default.svg" height="150px" />
          <Text align="center">No data</Text>
        </div>
      )}
    </div>
  );
}

Sie können einen ähnlichen Ansatz verwenden, um den Fußzeileninhalt Ihres Widgets zu entfernen, wenn die Daten leer sind.

  override footer(): JSX.Element | undefined {
    let hasData = this.state.data && this.state.data.length > 0;
    if (hasData) {
      return <Button>...</Button>;
    }
  }

Wenn Daten leer sind, wird Ihr Listenwidget wie folgt angezeigt:

Screenshot: Keine Daten in der Liste

Daten wie geplant aktualisieren

Das folgende Beispiel zeigt, wie Echtzeitdaten in einem Widget angezeigt werden. Das Widget zeigt die aktuelle Uhrzeit und die aktuellen Updates an.

interface IRefreshWidgetState {
  data: string;
}

export class RefreshWidget extends BaseWidget<any, IRefreshWidgetState> {
  override body(): JSX.Element | undefined {
    return <>{this.state.data}</>;
  }

  async componentDidMount() {
    setInterval(() => {
      this.setState({ data: new Date().toLocaleTimeString() });
    }, 1000);
  }
}

Sie können die -Methode ändern setInterval , um Ihre eigene Funktion aufzurufen, um Daten wie diese setInterval(() => yourGetDataFunction(), 1000)zu aktualisieren.

Um die Entwicklung eines Widgets zu vereinfachen, stellt TeamsFx SDK eine BaseWidget Klasse bereit, die Entwickler erben können, um ein Widget zu implementieren, das ihren Anforderungen entspricht, ohne viel Aufmerksamkeit auf die Implementierung des Widgetlayouts zu legen.

Der folgende Code ist ein Beispiel für die BaseWidget-Klasse:

export interface IWidgetClassNames {
  root?: string;
  header?: string;
  body?: string;
  footer?: string;
}

const classNames: IWidgetClassNames = mergeStyleSets({
  root: {
    display: "grid",
    padding: "1.25rem 2rem 1.25rem 2rem",
    backgroundColor: tokens.colorNeutralBackground1,
    border: "1px solid var(--colorTransparentStroke)",
    boxShadow: tokens.shadow4,
    borderRadius: tokens.borderRadiusMedium,
    gap: tokens.spacingHorizontalL,
    gridTemplateRows: "max-content 1fr max-content",
  },
  header: {
    display: "grid",
    height: "max-content",
    "& div": {
      display: "grid",
      gap: tokens.spacingHorizontalS,
      alignItems: "center",
      gridTemplateColumns: "min-content 1fr min-content",
    },
    "& svg": {
      height: "1.5rem",
      width: "1.5rem",
    },
    "& span": {
      fontWeight: tokens.fontWeightSemibold,
      lineHeight: tokens.lineHeightBase200,
      fontSize: tokens.fontSizeBase200,
    },
  },
  footer: {
    "& button": {
      width: "fit-content",
    },
  },
});

interface BaseWidgetState {
  loading?: boolean;
}

export class BaseWidget<P, S> extends Component<P, S & BaseWidgetState> {
  public constructor(props: Readonly<P>) {
    super(props);
    this.state = { loading: undefined } as S & BaseWidgetState;
  }

  public async componentDidMount() {
    this.setState({ ...(await this.getData()), loading: false });
  }

  public render() {
    const { root, header, body, footer } = this.styling();
    const showLoading = this.state.loading !== false && this.loading() !== undefined;
    return (
      <div className={mergeStyles(classNames.root, root)}>
        {this.header() && (
          <div className={mergeStyles(classNames.header, header)}>{this.header()}</div>
        )}
        {showLoading ? (
          this.loading()
        ) : (
          <>
            {this.body() !== undefined && <div className={body}>{this.body()}</div>}
            {this.footer() !== undefined && (
              <div className={mergeStyles(classNames.footer, footer)}>{this.footer()}</div>
            )}
          </>
        )}
      </div>
    );
  }

  protected async getData(): Promise<S> {
    return undefined;
  }

  protected header(): JSX.Element | undefined {
    return undefined;
  }

  protected body(): JSX.Element | undefined {
    return undefined;
  }

  protected footer(): JSX.Element | undefined {
    return undefined;
  }

  protected loading(): JSX.Element | undefined {
    return undefined;
  }

  protected styling(): IWidgetClassNames {
    return {};
  }
}

Es folgen die empfohlenen Methoden zum Überschreiben:

Methoden	Funktion	Außerkraftsetzung empfehlen
`constructor()`	Ruft den anfänglichen `this.state` und den Konstruktor der Superklasse `React.Component`auf.	Nein
`componentDidMount()`	Ruft auf, nachdem eine Komponente eingebunden wurde, und weist der `data` -Eigenschaft des Zustands durch Aufrufen der `getData()` -Methode einen Wert zu.	Nein
`render()`	Ruft immer dann auf, wenn ein Update vorhanden ist. Das Dashboard Standardlayout ist in dieser Methode definiert.	Nein
`getData()`	Ruft die vom Widget benötigten Daten auf. Der von dieser Methode zurückgegebene Wert wird auf `this.state.data`festgelegt.	Ja
`header()`	Ruft auf, wie der Widgetheader aussieht. Sie können diese Methode außer Kraft setzen, um ein Widget anzupassen oder nicht. Wenn dies nicht der Fall ist, hat das Widget keinen Header.	Ja
`body()`	Ruft auf, wie der Text des Widgets aussieht. Sie können diese Methode außer Kraft setzen, um ein Widget anzupassen oder nicht. Wenn dies nicht der Fall ist, hat das Widget keinen Textkörper.	Ja
`footer()`	Ruft auf, wie die Fußzeile des Widgets aussieht. Sie können diese Methode außer Kraft setzen, um ein Widget anzupassen oder nicht. Wenn dies nicht der Fall ist, verfügt das Widget nicht über eine Fußzeile.	Ja
`loading()`	Ruft auf, wenn das Widget gerade Daten abruft. Wenn ein Ladeindikator erforderlich ist, kann die Methode ein `JSX.Element` zurückgeben, das die erforderlichen Komponenten zum Rendern des Ladeindikators enthält.	Ja
`style()`	Ruft ein -Objekt auf, das die Klassennamen für die verschiedenen Teile des Widgets definiert.	Ja

Microsoft Graph Toolkit ist eine Reihe von erneuerbaren, frameworkunabhängigen Webkomponenten, die den Zugriff auf und die Arbeit mit Microsoft Graph unterstützen. Sie können das Microsoft Graph-Toolkit mit jedem Webframework oder ohne Framework verwenden.

Führen Sie die folgenden Schritte aus, um das Microsoft Graph-Toolkit als Widgetinhalt zu verwenden:

Hinzufügen des SSO-Features zu Ihrer Teams-App: Microsoft Teams bietet eine Funktion für einmaliges Anmelden (Single Sign-On, SSO) für eine App zum Abrufen eines angemeldeten Teams-Benutzertokens für den Zugriff auf Microsoft Graph. Weitere Informationen finden Sie unter SSO-Feature für Ihre Teams-App.
Installieren Sie die erforderlichen npm Pakete.

Führen Sie den folgenden Befehl in Ihrem Projektordner tabs aus, um die erforderlichen npm Pakete zu installieren:
```
npm install @microsoft/mgt-react @microsoft/mgt-teamsfx-provider
```

Hinzufügen eines neuen Graph Toolkit-Widgets: Erstellen Sie eine neue Widgetdatei in Ihrem Projektordner src/views/widgets , GraphWidget.tsxz. B. . In diesem Widget führen wir Benutzer dazu an, ihrer App den Zugriff auf Microsoft Graph zuzustimmen und dann die Aufgabenliste des Benutzers mithilfe des Microsoft Graph-Toolkits anzuzeigen.

Der folgende Code ist ein Beispiel für die Verwendung der Todo-Komponente aus dem Microsoft Graph-Toolkit im Widget:

import { Providers, ProviderState, Todo } from "@microsoft/mgt-react";
import { TeamsFxProvider } from "@microsoft/mgt-teamsfx-provider";

import { loginAction } from "../../internal/login";
import { TeamsUserCredentialContext } from "../../internal/singletonContext";
import { BaseWidget } from "@microsoft/teamsfx-react";

interface IGraphWidgetState {
  needLogin: boolean;
}

export class GraphWidget extends Widget<any, IGraphWidgetState> {
  override body(): JSX.Element | undefined {
    return <div>{this.state.needLogin === false && <Todo />}</div>;
  }

  async componentDidMount() {
    super.componentDidMount();

    // Initialize TeamsFx provider
    const provider = new TeamsFxProvider(TeamsUserCredentialContext.getInstance().getCredential(), [
     "Tasks.ReadWrite",
]);
    Providers.globalProvider = provider;

    // Check if user is signed in
    if (await this.checkIsConsentNeeded()) {
      await loginAction(["Tasks.ReadWrite"]);
}

// Update signed in state
Providers.globalProvider.setState(ProviderState.SignedIn);
this.setState({ needLogin: false });

  }

  /**

  * Check if user needs to consent
  * @returns true if user needs to consent
  */

  async checkIsConsentNeeded() {
    let needConsent = false;
    try {
      await TeamsUserCredentialContext.getInstance().getCredential().getToken(["Tasks.ReadWrite"]);
    } catch (error) {
      needConsent = true;
    }
    return needConsent;
  }
}

Sie können alternative Komponenten des Microsoft Graph-Toolkits in Ihrem Widget verwenden. Weitere Informationen finden Sie unter Microsoft Graph Toolkit.

Fügen Sie das Widget Dashboard Layout hinzu. Fügen Sie das neue Widget in Ihre Dashboard-Datei ein.

...
export default class YourDashboard extends BaseDashboard<any, any> {
  ...
  override layout(): undefined | JSX.Element {
    return (
      <>
        <GraphWiget />
      </>
    );
  }
  ...
}

Starten oder aktualisieren Sie nun Ihre Teams-App. Das neue Widget wird mithilfe des Microsoft Graph-Toolkits angezeigt.

Graph-API Anruf

Microsoft Graph-API ist eine Web-API, die Sie für die Kommunikation mit der Microsoft-Cloud und anderen Diensten verwenden können. Benutzerdefinierte Anwendungen können die Microsoft Graph-API verwenden, um eine Verbindung mit Daten herzustellen und sie in benutzerdefinierten Anwendungen zu verwenden, um die Produktivität im Unternehmen zu steigern.

Bevor Sie Ihre Graph-API Aufruflogik implementieren, müssen Sie SSO für Ihr Dashboard-Projekt aktivieren. Weitere Informationen finden Sie unter Hinzufügen des einmaligen Anmeldens zur Teams-App.

So fügen Sie einen Graph-API Anruf hinzu:

Aufrufen Graph-API über das Front-End (verwenden Sie delegierte Berechtigungen)
Aufrufen Graph-API über das Back-End (Verwenden von Anwendungsberechtigungen)

Aufrufen Graph-API über das Front-End (verwenden Sie delegierte Berechtigungen)

Wenn Sie eine Graph-API über die Front-End-Registerkarte aufrufen möchten, führen Sie die folgenden Schritte aus:

Informationen zum Abrufen des Namens des Berechtigungsbereichs, der dem Graph-API zugeordnet ist, den Sie aufrufen möchten, finden Sie unter Graph-API.

Erstellen Sie einen Graph-Client, indem Sie den Bereich für die Graph-API hinzufügen, die Sie aufrufen möchten.

let credential: TeamsUserCredential;  
credential = TeamsUserCredentialContext.getInstance().getCredential();
const graphClient: Client = createMicrosoftGraphClientWithCredential(credential, scope);

Rufen Sie die Graph-API auf, und analysieren Sie die Antwort in einem bestimmten Modell.

try {
  const graphApiResult = await graphClient.api("<GRAPH_API_PATH>").get();
  // Parse the graphApiResult into a Model you defined, used by the front-end.
} catch (e) {}

Aufrufen Graph-API über das Back-End (Verwenden von Anwendungsberechtigungen)

Wenn Sie eine Graph-API über das Back-End aufrufen möchten, führen Sie die folgenden Schritte aus:

Zustimmungsanwendungsberechtigungen
Hinzufügen einer Azure-Funktion
Hinzufügen Ihrer Logik in der Azure-Funktion
Aufrufen der Azure-Funktion über das Front-End

Führen Sie die folgenden Schritte aus, um anwendungsberechtigungen zuzustimmen:

Navigieren Sie zum Azure-Portal.
Wählen Sie Microsoft Entra ID aus.
Wählen Sie im linken Bereich App-Registrierungen aus.
Wählen Sie Ihre Dashboard-App aus.
Wählen Sie im linken Bereich API-Berechtigungen aus.
Wählen Sie Berechtigung hinzufügen aus.
Wählen Sie Microsoft Graph aus.
Wählen Sie Anwendungsberechtigungen aus.
Suchen Sie die erforderlichen Berechtigungen.
Wählen Sie unten die Schaltfläche Berechtigungen hinzufügen aus.
Wählen Sie Administratoreinwilligung erteilen aus ✔.
Wählen Sie die Schaltfläche Ja aus, um die Administratoreinwilligung abzuschließen.

Hinzufügen einer Azure-Funktion

Navigieren Sie im linken Bereich von Visual Studio Code zu Microsoft 365 Agents Toolkit>Features hinzufügen>Azure Functions und geben Sie den Funktionsnamen ein.

Screenshot: Auswahl von Azure Functions

Weitere Informationen zum Hinzufügen einer Azure-Funktion zu Ihrem Projekt finden Sie unter Integrieren von Azure Functions in Ihre Teams-App.

Hinzufügen Ihrer Logik in der Azure-Funktion

Im unter dem index.ts/index.ts Ordner Azure Function können Sie Ihre Logik hinzufügen, die Back-End-Graph-API Aufrufe mit Anwendungsberechtigungen enthält. Weitere Informationen finden Sie im folgenden Codeausschnitt:

/**
 * This function handles requests from atk client.
 * The HTTP request should contain an SSO token queried from Teams in the header.
 * Before triggering this function, atk binding would process the SSO token and generate atk configuration.
 *
 * You should initializes the atk SDK with the configuration and calls these APIs.
 *
 * The response contains multiple message blocks constructed into a JSON object, including:
 * - An echo of the request body.
 * - The display name encoded in the SSO token.
 * - Current user's Microsoft 365 profile if the user has consented.
 *
 * @param {Context} context - The Azure Functions context object.
 * @param {HttpRequest} req - The HTTP request.
 * @param {teamsfxContext} TeamsfxContext - The context generated by atk binding.
 */
export default async function run(
  context: Context,
  req: HttpRequest,
  teamsfxContext: TeamsfxContext
): Promise<Response> {
  context.log("HTTP trigger function processed a request.");

  // Initialize response.
  const res: Response = {
    status: 200,
    body: {},
  };

  // Your logic here.

  return res;
}

Aufrufen der Azure-Funktion über das Front-End

Rufen Sie die Azure-Funktion anhand des Funktionsnamens auf. Lesen Sie den folgenden Codeausschnitt, um die Azure-Funktion aufzurufen:

const functionName = process.env.REACT_APP_FUNC_NAME || "myFunc";
export let taskName: string;

export async function callFunction(params?: string) {
  taskName = params || "";
  const credential = TeamsUserCredentialContext.getInstance().getCredential();
  if (!credential) {
    throw new Error("TeamsFx SDK is not initialized.");
  }
  try {
    const apiBaseUrl = process.env.REACT_APP_FUNC_ENDPOINT + "/api/";    
    const apiClient = createApiClient(
      apiBaseUrl,
      new BearerTokenAuthProvider(async () => (await credential.getToken(""))!.token)
    );
    const response = await apiClient.get(functionName);
    return response.data;
  } catch (err: unknown) {
    ...
  }
}

Weitere Informationen finden Sie unter:

Einbetten von Power BI in Dashboard

Informationen zum Einbetten von Power BI in die Dashboard finden Sie unter Power BI-Client react.

Freigeben über

Erstellen einer Dashboardregisterkarten-App

Hinzufügen eines neuen Dashboard

Erstellen einer Dashboard-Klasse

Überschreiben von Methoden zum Anpassen Dashboard Registerkarten-App

Hinzufügen einer Route für die neue Dashboard-Registerkarten-App

Ändern des Manifests zum Hinzufügen einer neuen Dashboard-Registerkarten-App

Anpassen des Dashboard-Layouts

App-Abstraktion auf der Registerkarte "Dashboard"

Verwenden eines Widgets in Ihrem Dashboard

Anpassen des Widgets

Einschließen eines Datenladeprogramms

Behandeln des leeren Zustands

Daten wie geplant aktualisieren

Widget-Abstraktion

Microsoft Graph-Toolkit als Widgetinhalt

Graph-API Anruf

Aufrufen Graph-API über das Front-End (verwenden Sie delegierte Berechtigungen)

Aufrufen Graph-API über das Back-End (Verwenden von Anwendungsberechtigungen)

Zustimmungsanwendungsberechtigungen

Hinzufügen einer Azure-Funktion

Hinzufügen Ihrer Logik in der Azure-Funktion

Aufrufen der Azure-Funktion über das Front-End

Einbetten von Power BI in Dashboard

Siehe auch

Feedback

Zusätzliche Ressourcen