Overview of EVA

This project aims to create a Ticketing System within MS Teams using Azure Services for implementations in different Business Cases.

Get started with EVA

Prerequisites To run the dashboard template in your local dev machine, you will need:

• Node.js, supported versions: 16, 18
• A Microsoft 365 account for development
• Set up your dev environment for extending Teams apps across Microsoft 365 Please note that after you enrolled your developer tenant in Office 365 Target Release, it may take couple days for the enrollment to take effect.
• Teams Toolkit Visual Studio Code Extension version 5.0.0 and higher or Teams Toolkit CLI

1. First, select the Teams Toolkit icon on the left in the VS Code toolbar.
2. In the Account section, sign in with your Microsoft 365 account if you haven't already.
3. Press F5 to start debugging which launches your app in Teams using a web browser. Select Debug (Edge) or Debug (Chrome).
4. When Teams launches in the browser, select the Add button in the dialog to install your app to Teams.

What's included

The following files can be customized and demonstrate an example implementation to get you started.

The following are project-related files. You generally will not need to customize these files.

Step 1: Define a data model

Define a data model based on the business scenario, we recommend that you place the data model under the src/models directory. Here is an example of a data model::

//sampleModel.ts
export interface SampleModel {
  content: string;
}

Step 2: Create a data retrive service

Typically, a widget requires a service to retrieve the necessary data for displaying its content. This service can either fetch static data from a predefined source or retrieve dynamic data from a backend service or API.

For instance, we will implement a service that returns static data and place it under the src/services directory.

Here is a sample service for retrieving static data:

//sampleService.ts
import { SampleModel } from "../models/sampleModel";

export const getSampleData = (): SampleModel => {
  return { content: "Hello world!" };
};

Step 3: Create a widget file

Create a widget file in the src/widgets folder. Inherit the BaseWidget class from @microsoft/teamsfx-react. The following table lists the methods that you can override to customize your widget.

All method overrides are optional.

Here's a sample widget implementation:

//SampleWidget.tsx
import { Button, Text } from "@fluentui/react-components";
import { BaseWidget } from "@microsoft/teamsfx-react";
import { SampleModel } from "../models/sampleModel";
import { getSampleData } from "../services/sampleService";

interface SampleWidgetState {
  data?: SampleModel;
}

export class SampleWidget extends BaseWidget<any, SampleWidgetState> {
  override async getData(): Promise<SampleWidgetState> {
    return { data: getSampleData() };
  }

  override header(): JSX.Element | undefined {
    return <Text>Sample Widget</Text>;
  }

  override body(): JSX.Element | undefined {
    return <div>{this.state.data?.content}</div>;
  }

  override footer(): JSX.Element | undefined {
    return <Button>View Details</Button>;
  }
}

Step 4: Add the widget to the dashboard

Open the src/dashboards/SampleDashboard.tsx file and add the widget to the implementation of the layout method. If you want to create a new dashboard, please refer to How to add a new dashboard.

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

Optional: If you want to arrange multiple widgets in the same column, you can refer to the following code snippet:

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

override layout(): JSX.Element | undefined {
  return (
    <>
      <ListWidget />
      <div className="one-column">
        <ChartWidget />
        <SampleWidget />
      </div>
    </>
  );
}

• Customize the widget
• Customize the dashboard layout
• Create a data loader
• Refresh data based on the schedule
• Handle empty state
• Add a new dashboard
• Use Microsoft Graph Toolkit as widget content
• Embed Power BI to dashboard
• How to add a new Graph API call
• Enable the app for multi-tenant
• Preview the app on mobile clients