From 789ab479f37f307a3d50e743f58a7fd6482b7b1d Mon Sep 17 00:00:00 2001 From: Vishnu Date: Mon, 23 Dec 2024 13:12:28 +0530 Subject: [PATCH 1/2] [Doc Improvement][Build a dashboard tab app][4218199] --- .../tabs/how-to/Build-a-dashboard-tab-app.md | 158 ++++++++++++++++-- 1 file changed, 141 insertions(+), 17 deletions(-) diff --git a/msteams-platform/tabs/how-to/Build-a-dashboard-tab-app.md b/msteams-platform/tabs/how-to/Build-a-dashboard-tab-app.md index fe2fb63ba2a..798693bc590 100644 --- a/msteams-platform/tabs/how-to/Build-a-dashboard-tab-app.md +++ b/msteams-platform/tabs/how-to/Build-a-dashboard-tab-app.md @@ -38,6 +38,17 @@ To add a new dashboard, follow these steps: Create a file with the `.tsx` extension for your dashboard in the `src/dashboards` directory, for example, `YourDashboard.tsx`. Then, create a class that extends the `BaseDashboard class from` [@microsoft/teamsfx-react](/javascript/api/%40microsoft/teamsfx-react). +# [JavaScript](#tab/javascript1) + +```javascript +// 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 { } +``` + +# [Typescript](#tab/typescript1) + ```typescript //YourDashboard.tsx import { BaseDashboard } from "@microsoft/teamsfx-react"; @@ -45,6 +56,8 @@ import { BaseDashboard } from "@microsoft/teamsfx-react"; export default class YourDashboard extends BaseDashboard {} ``` +--- + > [!NOTE] > All methods are optional. If you don't override any method, the default dashboard layout is used. @@ -65,6 +78,31 @@ The following code is an example to customize the dashboard layout: } ``` +# [JavaScript](#tab/javascript5) + +```javascript +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 ( + <> + + + + ); + } +} +``` + +# [Typescript](#tab/typescript5) + ```typescript import { BaseDashboard } from "@microsoft/teamsfx-react"; import ListWidget from "../widgets/ListWidget"; @@ -86,12 +124,28 @@ export default class YourDashboard extends BaseDashboard { } ``` +--- + ### Add a route for the new dashboard tab app You must link your widget to a data source file. The widget picks up the data that's presented in the dashboard from the source file. Open the `src/App.tsx` file and add a route for the new dashboard. Here's an example: +# [JavaScript](#tab/javascript6) + +```javascript +import YourDashboard from "./dashboards/YourDashboard"; + +export default function App() { + ... + } /> + ... +} +``` + +# [Typescript](#tab/typescript6) + ```typescript import YourDashboard from "./dashboards/YourDashboard"; @@ -102,6 +156,8 @@ export default function App() { } ``` +--- + ### Modify manifest to add a new dashboard tab app Open the `appPackage/manifest.json` file and add a new dashboard tab under `staticTabs`. For more information, see [app manifest](../../resources/schema/manifest-schema.md#statictabs). Here's an example: @@ -129,6 +185,28 @@ TeamsFx provides convenient methods to define and modify the layout of the dashb } ``` + # [JavaScript](#tab/javascript2) + + ```javascript + export default class SampleDashboard extends BaseDashboard { + styling() { + return "customize-class-name"; + } + + layout() { + return ( + <> + + + + + ); + } + } + ``` + + # [Typescript](#tab/typescript2) + ```typescript export default class SampleDashboard extends BaseDashboard { @@ -148,6 +226,8 @@ TeamsFx provides convenient methods to define and modify the layout of the dashb } ``` + --- + :::image type="content" source="../../assets/images/sbs-create-a-new-dashboard/customize-dashboard-layout.png" alt-text="Screenshot shows the customized dashboard layout."::: * Two widgets in a row with a width of 600 px and 1100 px. The height of the first line is the maximum height of its content, and the height of the second line is 400 px. @@ -159,6 +239,28 @@ TeamsFx provides convenient methods to define and modify the layout of the dashb } ``` + # [JavaScript](#tab/javascript3) + + ```javascript + export default class SampleDashboard extends Dashboard { + styling() { + return "customize-class-name"; + } + + layout() { + return ( + <> + + + + + ); + } + } + ``` + + # [Typescript](#tab/typescript3) + ```typescript export default class SampleDashboard extends Dashboard { override styling(): string { @@ -177,35 +279,57 @@ TeamsFx provides convenient methods to define and modify the layout of the dashb } ``` + --- + :::image type="content" source="../../assets/images/sbs-create-a-new-dashboard/customize-dashboard-layout2.png" alt-text="Screenshot shows the customization of height and width of the dashboard layout."::: * Arrange two widgets in a column. - ```css - .one-column { - display: grid; - gap: 20px; - grid-template-rows: 1fr 1fr; - } - ``` + ```css + .one-column { + display: grid; + gap: 20px; + grid-template-rows: 1fr 1fr; + } + ``` - ```typescript - export default class SampleDashboard extends BaseDashboard { - override layout(): JSX.Element | undefined { + + # [JavaScript](#tab/javascript4) + + ```javascript + export default class SampleDashboard extends BaseDashboard { + layout() { return ( <> - -
- - -
+ + ); } } - ``` + ``` + + # [Typescript](#tab/typescript4) + + ```typescript + export default class SampleDashboard extends BaseDashboard { + override layout(): JSX.Element | undefined { + return ( + <> + +
+ + +
+ + ); + } + } + ``` + + --- - :::image type="content" source="../../assets/images/sbs-create-a-new-dashboard/widget-customize.png" alt-text="Screenshot shows the two-widget customization."::: + :::image type="content" source="../../assets/images/sbs-create-a-new-dashboard/widget-customize.png" alt-text="Screenshot shows the two-widget customization."::: ### Dashboard tab app abstraction From d4d76f1b236b10ab7fdb67959584c84535049fbc Mon Sep 17 00:00:00 2001 From: Vishnu Date: Mon, 23 Dec 2024 13:20:53 +0530 Subject: [PATCH 2/2] Update Build-a-dashboard-tab-app.md --- .../tabs/how-to/Build-a-dashboard-tab-app.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/msteams-platform/tabs/how-to/Build-a-dashboard-tab-app.md b/msteams-platform/tabs/how-to/Build-a-dashboard-tab-app.md index 798693bc590..eab86d63bc3 100644 --- a/msteams-platform/tabs/how-to/Build-a-dashboard-tab-app.md +++ b/msteams-platform/tabs/how-to/Build-a-dashboard-tab-app.md @@ -47,7 +47,7 @@ import { BaseDashboard } from "@microsoft/teamsfx-react"; export default class SampleDashboard extends BaseDashboard { } ``` -# [Typescript](#tab/typescript1) +# [TypeScript](#tab/typescript1) ```typescript //YourDashboard.tsx @@ -101,7 +101,7 @@ export default class YourDashboard extends BaseDashboard { } ``` -# [Typescript](#tab/typescript5) +# [TypeScript](#tab/typescript5) ```typescript import { BaseDashboard } from "@microsoft/teamsfx-react"; @@ -144,7 +144,7 @@ export default function App() { } ``` -# [Typescript](#tab/typescript6) +# [TypeScript](#tab/typescript6) ```typescript import YourDashboard from "./dashboards/YourDashboard"; @@ -205,7 +205,7 @@ TeamsFx provides convenient methods to define and modify the layout of the dashb } ``` - # [Typescript](#tab/typescript2) + # [TypeScript](#tab/typescript2) ```typescript export default class SampleDashboard extends BaseDashboard { @@ -259,7 +259,7 @@ TeamsFx provides convenient methods to define and modify the layout of the dashb } ``` - # [Typescript](#tab/typescript3) + # [TypeScript](#tab/typescript3) ```typescript export default class SampleDashboard extends Dashboard { @@ -309,7 +309,7 @@ TeamsFx provides convenient methods to define and modify the layout of the dashb } ``` - # [Typescript](#tab/typescript4) + # [TypeScript](#tab/typescript4) ```typescript export default class SampleDashboard extends BaseDashboard {