Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
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.
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.
// 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 { }
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;
}
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 />
</>
);
}
}
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:
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; }
export default class SampleDashboard extends BaseDashboard { styling() { return "customize-class-name"; } layout() { return ( <> <ListWidget /> <ChartWidget /> <NewsWidget /> </> ); } }
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; }
export default class SampleDashboard extends Dashboard { styling() { return "customize-class-name"; } layout() { return ( <> <ListWidget /> <ChartWidget /> <NewsWidget /> </> ); } }
Ordnen Sie zwei Widgets in einer Spalte an.
.one-column { display: grid; gap: 20px; grid-template-rows: 1fr 1fr; }
export default class SampleDashboard extends BaseDashboard { layout() { return ( <> <ListWidget /> <ChartWidget /> </> ); } }
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 |
Verwenden eines Widgets in Ihrem Dashboard
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.
Anpassen des Widgets
Sie können das Widget anpassen, indem Sie die folgenden Methoden in der BaseWidget
-Klasse überschreiben:
Überschreiben
header()
Sie ,body()
undfooter()
, 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> ); } }
Überschreiben Sie
body()
undfooter()
, 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> ); } }
Ü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> ); } }
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:
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.
Widget-Abstraktion
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 als Widgetinhalt
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 erforderlichennpm
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.tsx
z. 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
Zustimmungsanwendungsberechtigungen
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.
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.