6 |
8 | 9 |
10 | }
11 | @if (!this.loggedIn && this.featureFlags.microsoft365Enabled) {
12 | 8 | 9 |
13 |
15 | }
16 |
9 |
,
11 | document.getElementById('root')
12 | );
13 |
14 | initializeIcons();
15 |
--------------------------------------------------------------------------------
/samples/acs-to-teams-meeting/client/react/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// Chat Help
2 | 3 |
4 |
5 |
8 |
9 | @if (this.response) {
10 |
18 |
19 |
--------------------------------------------------------------------------------
/samples/openai-acs-msgraph/client/src/app/chat-help-dialog/chat-help-dialog.component.scss:
--------------------------------------------------------------------------------
1 | textarea {
2 | height: 100px;
3 | width: 40vw;
4 | font-size: 1.2em;
5 | }
6 |
7 | .response {
8 | width: 40vw;
9 | }
--------------------------------------------------------------------------------
/samples/openai-acs-msgraph/client/src/app/chat-help-dialog/chat-help-dialog.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, inject } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 | import { MatDialogModule } from '@angular/material/dialog';
5 | import { MatIconModule } from '@angular/material/icon';
6 | import { MatButtonModule } from '@angular/material/button';
7 | import { DataService } from '@core/data.service';
8 |
9 | @Component({
10 | selector: 'app-chat-help-dialog',
11 | templateUrl: './chat-help-dialog.component.html',
12 | styleUrls: ['./chat-help-dialog.component.scss'],
13 | imports: [CommonModule, FormsModule, MatButtonModule, MatDialogModule, MatIconModule]
14 | })
15 | export class ChatHelpDialogComponent {
16 | prompt = 'How should I handle a company refund request?';
17 | placeholder = 'How should I handle a company refund request?';
18 | response = '';
19 | dataService = inject(DataService)
20 |
21 | getHelp() {
22 | this.dataService.completeBYOD(this.prompt).subscribe((response: string) => {
23 | this.response = response;
24 | });
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/samples/openai-acs-msgraph/client/src/app/chats/chats.component.html:
--------------------------------------------------------------------------------
1 | @if (this.data) {
2 |
11 | {{ response }}
12 |
13 | }
14 |
15 |
16 |
17 | Chats
4 |
5 |
6 |
7 | 8 | @if (this.data.length) { 9 |
24 |
25 | @if (!this.data.length) {
26 | 7 | 8 | @if (this.data.length) { 9 |
10 | @for (chatMessage of this.data;track chatMessage.id) {
11 |
12 |
13 |
16 |
17 | View Message
18 |
19 |
20 | }
21 |
22 | }
23 |
27 |
29 | }
30 | No chat messages found
28 |
5 |
6 |
11 |
12 |
13 |
14 |
21 | @if (this.data.length) {
22 |
38 | @if (!this.data.length) {
39 |
23 | @for (email of this.data;track $index) {
24 |
25 |
26 | {{email.resource.subject}}
27 |
29 |
30 | View Email Message
31 |
32 |
33 | }
34 |
35 | }
36 |
37 |
40 |
42 | }
43 | No email messages found
41 |Files
4 | 5 |
6 |
11 |
18 | @if (!this.data.length) {
19 |
20 |
22 | }
23 | No files found
21 |
2 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
22 |
--------------------------------------------------------------------------------
/samples/openai-acs-msgraph/client/src/app/phone-call/phone-call.component.scss:
--------------------------------------------------------------------------------
1 | .phone-container {
2 | margin-top: 12px;
3 | margin-right: 25px;
4 | }
5 |
6 | .phone-number-input {
7 | margin-bottom:1em;
8 | font-size: .75em;
9 | }
10 |
11 | button[mat-button].call-button {
12 | color: #fff;
13 | background-color: #14ad00;
14 | }
15 |
16 | button[mat-button].call-button:disabled {
17 | color: rgba(255, 255, 255, 0.5);
18 | background-color: #b0b0b0;
19 | cursor: not-allowed;
20 | }
21 |
22 | button[mat-button].hangup-button {
23 | color: #fff;
24 | background-color: red;
25 | }
26 |
27 | .dialer {
28 | background-color: #fff;
29 | position: absolute;
30 | z-index: 1000;
31 | top: 100;
32 | display: flex;
33 | flex-direction: column;
34 | align-items: center;
35 |
36 | .dialer-input {
37 | width: 200px;
38 | margin-bottom: 10px;
39 | }
40 |
41 | .dialer-buttons {
42 | display: grid;
43 | grid-template-columns: repeat(3, 1fr);
44 | grid-gap: 5px;
45 | }
46 |
47 | .dialer-button {
48 | background-color: #fafafa;
49 | color: #000;
50 | border: 1px solid #c9c9c9;
51 | width: 60px;
52 | height: 60px;
53 | font-size: 24px;
54 | }
55 |
56 | .call-button {
57 | margin-top: 10px;
58 | width: 200px;
59 | height: 40px;
60 | }
61 | }
--------------------------------------------------------------------------------
/samples/openai-acs-msgraph/client/src/app/related-content/related-content.component.scss:
--------------------------------------------------------------------------------
1 | mat-card {
2 | margin-bottom: 10px;
3 | }
4 |
5 | .mat-mdc-card-title {
6 | font-size: 1.2em;
7 | }
8 |
9 | mat-panel-title {
10 | margin-top: 4px;
11 | margin-left: 15px;
12 | font-size: 1.2em;
13 | height: 50px;
14 | }
15 |
16 | mat-icon[svgIcon] {
17 | margin-right: 5px;
18 | width: 1.4em;
19 | }
20 |
21 | .panel-title {
22 | margin-left: 18px;
23 | font-size: 1em;
24 | }
25 |
26 | .mat-badge-medium.mat-badge-after .mat-badge-content {
27 | top: -10px;
28 | right: -10px;
29 | }
30 |
31 | .mat-badge-accent .mat-badge-content {
32 | background-color: #ff0000;
33 | }
--------------------------------------------------------------------------------
/samples/openai-acs-msgraph/client/src/app/shared/dynamic.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform, inject } from '@angular/core';
2 | import { CurrencyPipe, DatePipe, DecimalPipe } from '@angular/common';
3 | import { PhonePipe } from './phone.pipe';
4 |
5 | @Pipe({
6 | name: 'dynamic',
7 | standalone: true
8 | })
9 | export class DynamicPipe implements PipeTransform {
10 | currencyPipe = inject(CurrencyPipe);
11 | datePipe = inject(DatePipe);
12 | decimalPipe = inject(DecimalPipe);
13 | phonePipe = inject(PhonePipe);
14 |
15 | currencyHeaders = ['price', 'total', 'amount', 'sum', 'balance', 'revenue'];
16 | dateHeaders = ['date', 'time', 'created', 'updated', 'deleted'];
17 | phoneHeaders = ['phone', 'mobile', 'phone number', 'mobile number', 'office number'];
18 | reviewHeaders = ['review', 'rating', 'avg'];
19 |
20 | transform(value: string, header: string): unknown {
21 | if (this.currencyHeaders.some(substr => header.includes(substr))) {
22 | return this.currencyPipe.transform(value);
23 | }
24 |
25 | if (this.dateHeaders.some(substr => header.includes(substr))) {
26 | return this.datePipe.transform(value);
27 | }
28 |
29 | if (this.phoneHeaders.some(substr => header.includes(substr))) {
30 | return this.phonePipe.transform(value);
31 | }
32 |
33 | if (this.reviewHeaders.some(substr => header.includes(substr))) {
34 | return this.decimalPipe.transform(value, '1.0-1');
35 | }
36 |
37 | return value;
38 | }
39 | }
--------------------------------------------------------------------------------
/samples/openai-acs-msgraph/client/src/app/shared/filter-textbox.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, Output, EventEmitter } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 |
4 | @Component({
5 | selector: 'app-filter-textbox',
6 | template: `
7 | {{ label }}
8 | `,
9 | imports: [FormsModule]
10 | })
11 | export class FilterTextboxComponent {
12 |
13 | @Input() label = 'Filter Data:';
14 |
15 | private _filter = '';
16 | @Input() get filter() {
17 | return this._filter;
18 | }
19 |
20 | set filter(val: string) {
21 | this._filter = val;
22 | this.changed.emit(this.filter); // Raise changed event
23 | }
24 |
25 | @Output() changed: EventEmitter{{ title }}
2 | 3 |
4 |
5 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/samples/openai-acs-msgraph/client/src/app/textarea-dialog/textarea-dialog.component.scss:
--------------------------------------------------------------------------------
1 | .message-label {
2 | margin-right: 5px;
3 | vertical-align: top;
4 | }
5 |
6 | textarea {
7 | height: 100px;
8 | width: 400px;
9 | }
10 |
11 |
--------------------------------------------------------------------------------
/samples/openai-acs-msgraph/client/src/app/textarea-dialog/textarea-dialog.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Inject, inject } from '@angular/core';
2 | import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
3 | import { DataService } from '@core/data.service';
4 | import { DialogBase, TeamsDialogData } from './dialog-data';
5 | import { MatButtonModule } from '@angular/material/button';
6 | import { FormsModule } from '@angular/forms';
7 | import { MatIconModule } from '@angular/material/icon';
8 |
9 | @Component({
10 | selector: 'app-textarea-dialog',
11 | templateUrl: './textarea-dialog.component.html',
12 | styleUrls: ['./textarea-dialog.component.scss'],
13 | imports: [MatDialogModule, MatIconModule, FormsModule, MatButtonModule]
14 | })
15 | export class TextAreaDialogComponent implements OnInit {
16 | title = '';
17 | message = '';
18 | initialMessage = '';
19 |
20 | dialogRef = inject(MatDialogRef
12 |
13 |
14 |
15 | View Tutorial
10 | 11 | Here's an overview of the application solution: 12 | 13 |  14 | 15 | ### Pre-requisites 16 | - [Node](https://nodejs.org) - Node 16+ and npm 7+ will be used for this project 17 | - [git](https://learn.microsoft.com/devops/develop/git/install-and-set-up-git) 18 | - [Visual Studio Code](https://code.visualstudio.com/) 19 | - [Azure Functions Extension for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) 20 | - [Azure subscription](https://azure.microsoft.com/free/search) 21 | - [Microsoft 365 developer tenant](https://developer.microsoft.com/microsoft-365/dev-program) 22 | - [GitHub account](https://github.com) 23 | 24 | ### Technologies used in this tutorial include 25 | - React 26 | - Azure Communication Services 27 | - Azure Functions 28 | - Microsoft Graph 29 | - Microsoft Teams -------------------------------------------------------------------------------- /tutorials/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/02-Structuring-Project.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 2. Structuring the Project 3 | sidebar_position: 1 4 | --- 5 | 6 | Once we already created our application on the Azure Portal, we can start to code our application. In this tutorial we will use Next.js. But you can use any other framework you want. Let's install the Next.js framework! 7 | 8 | Open your terminal and run the following command: 9 | 10 | ```bash 11 | npx create-next-app auth-app --typescript 12 | ``` 13 | 14 | Now we already have our application created, let's execute it to see if everything is working. 15 | 16 | ```bash 17 | cd auth-app 18 | ``` 19 | 20 | ```bash 21 | npm run dev 22 | ``` 23 | 24 | Open the browser and go to the following address: `http://localhost:3000`. 25 | 26 | Now we need to install some dependencies. And one of them is the **[Microsoft Graph Client](https://learn.microsoft.com/en-us/graph/sdks/create-client?tabs=Javascript)**. To install it, run the following command: 27 | 28 | ```bash 29 | npm install @microsoft/microsoft-graph-client 30 | ``` 31 | 32 | If you want to know more about the Microsoft Graph Client, **[you can read the documentation](https://docs.microsoft.com/en-us/graph/sdks/sdks-overview)**. And also, **[know about the NPM package](https://www.npmjs.com/package/@microsoft/microsoft-graph-client)**. 33 | 34 | Another package we will need to install is NextAuth.js. It is a library that helps us to integrate authentication login sessions with Next.js. To install it, run the following command: 35 | 36 | ```bash 37 | npm install next-auth 38 | ``` 39 | 40 | Also, if you want to know more about NextAuth.js, **[you can read the documentation](https://next-auth.js.org/)**. And also, **[know about the NPM package](https://www.npmjs.com/package/next-auth)**. 41 | 42 | Now we can finally start to create some components for our application. But we will do that in the next section. 43 | 44 | -------------------------------------------------------------------------------- /tutorials/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/08-Next-Steps-Conclusion.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 8. Next Steps & Final Words 3 | sidebar_position: 1 4 | --- 5 | 6 | # Next Steps & Final Words 7 | 8 | We hope you enjoyed this workshop and learned something new! If you have any questions or comments, don't hesitate to reach out to us! 9 | 10 | If you want to go further, make the `Take break reminder app workshop`. There we will go into the `Reminder` page. A page that will inform you each 60 minutes to take a break. If you want to make this workshop, go to the Workshop Reminder App. 11 | 12 | If you want to learn more about Microsoft Graph, we have a lot of free courses and Learn Modules about it. Below you can see some interesting resources and links: 13 | 14 | - ✅ **[Microsoft Graph Fundalmentals](https://learn.microsoft.com/en-us/training/paths/m365-msgraph-fundamentals/)** 15 | - ✅ **[Access a user's calendar events in a JavaScript app with Microsoft Graph](https://learn.microsoft.com/en-us/training/modules/msgraph-access-user-events/)** 16 | - ✅ **[Show a user's emails in a JavaScript app with Microsoft Graph](https://learn.microsoft.com/en-us/training/modules/msgraph-show-user-emails/)** 17 | - ✅ **[Download and upload files in a JavaScript app with Microsoft Graph](https://learn.microsoft.com/en-us/training/modules/msgraph-manage-files/)** 18 | - ✅ **[Access user photo information by using Microsoft Graph](https://learn.microsoft.com/en-us/training/modules/msgraph-user-photo-information/)** 19 | - ✅ **[Configure a JavaScript application to retrieve Microsoft 365 data by using Microsoft Graph](https://learn.microsoft.com/en-us/training/modules/msgraph-javascript-app/)** 20 | - ✅ **[Build apps with Microsoft Graph – Associate](https://learn.microsoft.com/en-us/training/paths/m365-msgraph-associate/)** 21 | 22 | And, see you in the next workshop! 😊 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /tutorials/docs/Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/01-Install-the-Azure-Functions-Extension-and-Create-a-New-Function.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 1. Install the Azure Functions Extension and Create a New Function 3 | sidebar_position: 1 4 | --- 5 | 6 | # Exercise 1 7 | 8 | ## Install the Azure Functions Extension for VS Code 9 | 10 | In this exercise you'll create an empty project, install the Azure Functions extension for VS Code, and create a new function. 11 | 12 | To get started, perform the following tasks: 13 | 14 | 1. Create an empty folder on your desktop and open it in VS Code. 15 | 16 | 1. Install the [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) if it's not already installed. 17 | 18 | 1. Click on the **Azure** icon in the VS Code sidebar. 19 | 20 | :::note 21 | If you don't see the Azure icon after installing the Azure Functions extension, right-click on the VS Code sidebar and select **Azure** from the menu. 22 | ::: 23 | 24 | 1. Sign in to Azure if you're not already signed in. 25 | 26 |  27 | 28 | 1. Locate the **Workspace** section and click the **+** icon. 29 | 1. Select **Create Function** and then select **Yes**. 30 | 31 |  32 | 33 | 1. Select the following: 34 | 35 | - **Language** : TypeScript 36 | - **Trigger** : HTTP trigger 37 | - **Function Name** : getGitHubRepoStats 38 | - **Authorization level** : Anonymous 39 | 40 |41 | 42 | :::note 43 | If you opened an existing project folder instead of an empty one, you may be prompted to overwrite the **.gitignore** and **package.json** files. 44 | ::: 45 | 46 | 1. You will see the following folder and files added to your project: 47 | 48 |  -------------------------------------------------------------------------------- /tutorials/docs/Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/03-Create-and-Deploy-the-Function-App-to-Azure.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 3. Create and Deploy the Function App to Azure 3 | sidebar_position: 3 4 | --- 5 | 6 | # Exercise 3 7 | 8 | ## Create and Deploy the Function App to Azure 9 | 10 | Now that the function is working locally, it's time to deploy it to Azure. 11 | 12 | 1. Open the VS Code command pallet (`shift + cmd + p` on Mac | `shift + ctrl + p` on Windows), and select **Azure Functions: Create Function App in Azure**. 13 | 14 |  15 | 16 | 1. You'll be prompted to enter the following information: 17 | 18 | - Your Azure subscription name. 19 | - The function name - enter `getGitHubRepoStats
View the Tutorial
12 | 13 | ### Pre-requisites 14 | - [NodeJS](https://nodejs.org/en/), fully tested on NodeJS 14, 16 15 | - A Microsoft 365 account. If you do not have Microsoft 365 account, apply one from [Microsoft 365 developer program](https://developer.microsoft.com/en-us/microsoft-365/dev-program) 16 | - Latest [Teams Toolkit Visual Studio Code Extension](https://aka.ms/teams-toolkit) 17 | 18 | ### Technologies used in this tutorial include 19 | - Azure Active Directory 20 | - Microsoft Graph Toolkit 21 | - TeamsFx -------------------------------------------------------------------------------- /tutorials/docs/Take-A-Break-Reminder-App/02-Installing-Dependencies-From-Kit-Get-Started.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 2. Installing dependencies from the Kit Get Started 3 | sidebar_position: 1 4 | --- 5 | 6 | Again, if you are not coming from the previous workshop, **[you can download the source code of the project we will be working on in this workshop](https://github.com/glaucia86/kitstarter-msgraph-nextjs)** 7 | 8 | After downloading the source code, you should run the following command in the terminal: 9 | 10 | ```bash 11 | cd kitstarter-msgraph-nextjs 12 | ``` 13 | 14 | ```bash 15 | npm install 16 | ``` 17 | 18 | At the root of the project, create a file called `env.local` and fill in the following environment variables: 19 | 20 | ```env 21 | AZURE_AD_CLIENT_ID=
45 |
54 | );
55 | }
56 |
57 | export default function HomepageFeatures(): JSX.Element {
58 | return (
59 |
46 | {Svg && }
47 | {image && 
}
48 |
49 |
50 |
53 | {title}
51 |{description}
52 |
61 |
67 |
62 | {FeatureList.map((props, idx) => (
63 |
66 |
15 |
25 | {siteConfig.title}
16 |{siteConfig.tagline}
17 |
18 |
21 | Explore Tutorials 🧭
22 |
23 |
24 |