From 246a8008207cd12305d15d107f933c1747704326 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 29 Aug 2025 06:13:18 +0000 Subject: [PATCH 1/3] Initial plan From 9bfba871d5aabd70ebd834bdc65dc6f183340edf Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 29 Aug 2025 06:20:34 +0000 Subject: [PATCH 2/3] Add AI Discord and GitHub Community Links to README.md Co-authored-by: DanWahlin <1767249+DanWahlin@users.noreply.github.com> --- .gitignore | 2 +- README.md | 5 ++ public/tutorials/404.html | 8 +-- .../tutorials/assets/js/07710bc0.96effe33.js | 1 - .../tutorials/assets/js/1aa20f20.0f3ae967.js | 1 - .../tutorials/assets/js/497b4376.67a8106d.js | 1 - .../tutorials/assets/js/50cbbf64.60da3f26.js | 1 - .../tutorials/assets/js/514b5684.397af66c.js | 1 - .../tutorials/assets/js/7287d4d4.28010aa7.js | 1 - .../tutorials/assets/js/7582a19b.f8200aa8.js | 1 - .../tutorials/assets/js/7e775839.94fadffe.js | 1 - .../tutorials/assets/js/870c29c3.14a81996.js | 1 - .../tutorials/assets/js/8879ef5a.80e5b0da.js | 1 - .../tutorials/assets/js/98a810e1.49525f76.js | 1 - .../tutorials/assets/js/a8cc8d8f.b0b953e4.js | 1 - .../tutorials/assets/js/a9d05313.87acc806.js | 1 - .../tutorials/assets/js/c0b1b996.1bb2623a.js | 1 - .../tutorials/assets/js/e1b17052.67bafbf6.js | 1 - .../tutorials/assets/js/e3b5f4a5.a7eb10a4.js | 1 - .../tutorials/assets/js/ed87990c.91de7ed4.js | 1 - public/tutorials/assets/js/main.13bf895f.js | 2 - .../assets/js/main.13bf895f.js.LICENSE.txt | 63 ------------------- .../assets/js/runtime~main.0a4045e2.js | 1 - .../docs/ACS-to-Teams-Meeting/index.html | 8 +-- .../index.html | 8 +-- .../index.html | 8 +-- .../Creating-Configuration-Files/index.html | 8 +-- .../index.html | 8 +-- .../Defining-AAD-Provider-NextJs/index.html | 8 +-- .../index.html | 8 +-- .../Next-Steps-Conclusion/index.html | 8 +-- .../Structuring-Project/index.html | 8 +-- .../index.html | 8 +-- .../Congratulations/index.html | 8 +-- .../index.html | 8 +-- .../index.html | 8 +-- .../index.html | 8 +-- .../index.html | 8 +-- .../index.html | 8 +-- .../index.html | 8 +-- .../Changing-NextauthTs-File/index.html | 8 +-- .../index.html | 8 +-- .../Creating-Interface-File-JWT/index.html | 8 +-- .../Developing-Get-Presence-API/index.html | 8 +-- .../index.html | 8 +-- .../index.html | 8 +-- .../Next Steps-Conclusion/index.html | 8 +-- .../docs/Take-A-Break-Reminder-App/index.html | 8 +-- public/tutorials/index.html | 8 +-- 49 files changed, 114 insertions(+), 192 deletions(-) delete mode 100644 public/tutorials/assets/js/07710bc0.96effe33.js delete mode 100644 public/tutorials/assets/js/1aa20f20.0f3ae967.js delete mode 100644 public/tutorials/assets/js/497b4376.67a8106d.js delete mode 100644 public/tutorials/assets/js/50cbbf64.60da3f26.js delete mode 100644 public/tutorials/assets/js/514b5684.397af66c.js delete mode 100644 public/tutorials/assets/js/7287d4d4.28010aa7.js delete mode 100644 public/tutorials/assets/js/7582a19b.f8200aa8.js delete mode 100644 public/tutorials/assets/js/7e775839.94fadffe.js delete mode 100644 public/tutorials/assets/js/870c29c3.14a81996.js delete mode 100644 public/tutorials/assets/js/8879ef5a.80e5b0da.js delete mode 100644 public/tutorials/assets/js/98a810e1.49525f76.js delete mode 100644 public/tutorials/assets/js/a8cc8d8f.b0b953e4.js delete mode 100644 public/tutorials/assets/js/a9d05313.87acc806.js delete mode 100644 public/tutorials/assets/js/c0b1b996.1bb2623a.js delete mode 100644 public/tutorials/assets/js/e1b17052.67bafbf6.js delete mode 100644 public/tutorials/assets/js/e3b5f4a5.a7eb10a4.js delete mode 100644 public/tutorials/assets/js/ed87990c.91de7ed4.js delete mode 100644 public/tutorials/assets/js/main.13bf895f.js delete mode 100644 public/tutorials/assets/js/main.13bf895f.js.LICENSE.txt delete mode 100644 public/tutorials/assets/js/runtime~main.0a4045e2.js diff --git a/.gitignore b/.gitignore index 7956ca8..d48d254 100644 --- a/.gitignore +++ b/.gitignore @@ -15,7 +15,7 @@ build /coverage # production - +public/ # misc .DS_Store diff --git a/README.md b/README.md index 34d90e4..8e9abd7 100644 --- a/README.md +++ b/README.md @@ -34,3 +34,8 @@ Publish: 1. `npm install` 1. Build and deploy the project by running `npm run build-deploy`. + +## Additional Resources + +If you get stuck or have any questions about building AI apps, join our [Azure AI Foundry Community Discord](https://discord.com/invite/kzRShWzttr). +If you have product feedback or errors while building visit our [Azure AI Foundry Developer Forum](https://github.com/orgs/azure-ai-foundry/discussions). diff --git a/public/tutorials/404.html b/public/tutorials/404.html index c5c6540..585f682 100644 --- a/public/tutorials/404.html +++ b/public/tutorials/404.html @@ -4,13 +4,13 @@ Page Not Found | Microsoft Cloud Hands-On Tutorials - - + +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- - + + \ No newline at end of file diff --git a/public/tutorials/assets/js/07710bc0.96effe33.js b/public/tutorials/assets/js/07710bc0.96effe33.js deleted file mode 100644 index 27de2d7..0000000 --- a/public/tutorials/assets/js/07710bc0.96effe33.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs_website=self.webpackChunkdocs_website||[]).push([[428],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var r=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=r.createContext({}),l=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},c=function(e){var t=l(e.components);return r.createElement(p.Provider,{value:t},e.children)},x="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,i=e.mdxType,o=e.originalType,p=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),x=l(n),d=i,f=x["".concat(p,".").concat(d)]||x[d]||u[d]||o;return n?r.createElement(f,a(a({ref:t},c),{},{components:n})):r.createElement(f,a({ref:t},c))}));function f(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=n.length,a=new Array(o);a[0]=d;var s={};for(var p in t)hasOwnProperty.call(t,p)&&(s[p]=t[p]);s.originalType=e,s[x]="string"==typeof e?e:i,a[1]=s;for(var l=2;l{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>l});var r=n(7462),i=(n(7294),n(3905));const o={title:"4. Defining AAD Provider in Next.js",sidebar_position:1},a=void 0,s={unversionedId:"Authentication-App-With-NextJs-And-Microsoft-Graph/Defining-AAD-Provider-NextJs",id:"Authentication-App-With-NextJs-And-Microsoft-Graph/Defining-AAD-Provider-NextJs",title:"4. Defining AAD Provider in Next.js",description:"Before we start creating the pages, we need to define the AAD provider in NextAuth.",source:"@site/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/04-Defining-AAD-Provider-NextJs.md",sourceDirName:"Authentication-App-With-NextJs-And-Microsoft-Graph",slug:"/Authentication-App-With-NextJs-And-Microsoft-Graph/Defining-AAD-Provider-NextJs",permalink:"/MicrosoftCloud/tutorials/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/Defining-AAD-Provider-NextJs",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"4. Defining AAD Provider in Next.js",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"3. Creating the Application Components",permalink:"/MicrosoftCloud/tutorials/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/Creating-Application-Components"},next:{title:"5. Creating the pages for the application",permalink:"/MicrosoftCloud/tutorials/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/Creating-Pages-For-The-Application"}},p={},l=[],c={toc:l},x="wrapper";function u(e){let{components:t,...o}=e;return(0,i.kt)(x,(0,r.Z)({},c,o,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"Before we start creating the pages, we need to define the AAD provider in NextAuth. "),(0,i.kt)("p",null,"But what is AAD? AAD stands for Azure Active Directory. It is a cloud-based identity and access management service that helps you manage access to your applications and services. "),(0,i.kt)("p",null,"For this, inside the ",(0,i.kt)("inlineCode",{parentName:"p"},"pages/api")," folder create a new folder called ",(0,i.kt)("inlineCode",{parentName:"p"},"auth"),". Inside in this folder, create the file ",(0,i.kt)("inlineCode",{parentName:"p"},"[...nextauth].ts")," and add the following code:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"pages/api/auth/[...nextauth].ts"))),(0,i.kt)("details",null,(0,i.kt)("summary",null,(0,i.kt)("b",null,"pages/api/auth/[...nextauth].ts")),(0,i.kt)("br",null),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"import NextAuth, { NextAuthOptions } from \"next-auth\";\nimport AzureADProvider from 'next-auth/providers/azure-ad';\n\nexport const authOptions: NextAuthOptions = {\n providers: [\n AzureADProvider({\n clientId: process.env.AZURE_AD_CLIENT_ID,\n clientSecret: process.env.AZURE_AD_CLIENT_SECRET,\n tenantId: process.env.AZURE_AD_TENANT_ID,\n })\n ]\n}\n\nexport default NextAuth(authOptions);\n"))),(0,i.kt)("br",null),(0,i.kt)("p",null,"Now we need to use the environment variables that we created before in Azure Portal in AAD. So let's create the ",(0,i.kt)("inlineCode",{parentName:"p"},".env.local")," file in the root of the project and add the following code:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},".env.local"))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-text"},"AZURE_AD_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\nAZURE_AD_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\nAZURE_AD_TENANT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\nNEXTAUTH_SECRET=123\n")),(0,i.kt)("p",null,"If you want, I created a file called ",(0,i.kt)("inlineCode",{parentName:"p"},".env.local.template")," as sample. You can use as a reference."),(0,i.kt)("p",null,"Now we need to configure the main project in the project. So let's do it! Open the ",(0,i.kt)("inlineCode",{parentName:"p"},"pages/_app.tsx")," file and add the following code:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"pages/_app.tsx"))),(0,i.kt)("details",null,(0,i.kt)("summary",null,(0,i.kt)("b",null,"pages/_app.tsx")),(0,i.kt)("br",null),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"import { SessionProvider } from 'next-auth/react';\n\nimport type { AppProps } from 'next/app';\nimport type { Session } from 'next-auth';\n\nexport default function App({\n Component,\n pageProps: { session, ...pageProps },\n}: AppProps<{ session: Session }>) {\n return (\n \n \n \n );\n}\n"))),(0,i.kt)("br",null),(0,i.kt)("p",null,"We are here defining the ",(0,i.kt)("inlineCode",{parentName:"p"},"SessionProvider")," from the NextAuth.js. It is responsible for managing the session of the user. "),(0,i.kt)("p",null,"Now let's run the application again e then open the browser and access the following URL: ",(0,i.kt)("inlineCode",{parentName:"p"},"http://localhost:3000"),". If you see the following screen, it means that everything is working fine:"),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"image-16",src:n(319).Z,width:"1874",height:"867"})),(0,i.kt)("p",null,"Page links are still not working. But we will fix it in the next section. Let's create these pages in the next section."))}u.isMDXComponent=!0},319:(e,t,n)=>{n.d(t,{Z:()=>r});const r=n.p+"assets/images/image-16-816651cff52d83b75c017cbeda1cf2cd.jpg"}}]); \ No newline at end of file diff --git a/public/tutorials/assets/js/1aa20f20.0f3ae967.js b/public/tutorials/assets/js/1aa20f20.0f3ae967.js deleted file mode 100644 index c3211a3..0000000 --- a/public/tutorials/assets/js/1aa20f20.0f3ae967.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs_website=self.webpackChunkdocs_website||[]).push([[532],{3905:(t,e,r)=>{r.d(e,{Zo:()=>l,kt:()=>f});var n=r(7294);function o(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function a(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function i(t){for(var e=1;e=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}var p=n.createContext({}),c=function(t){var e=n.useContext(p),r=e;return t&&(r="function"==typeof t?t(e):i(i({},e),t)),r},l=function(t){var e=c(t.components);return n.createElement(p.Provider,{value:e},t.children)},u="mdxType",m={inlineCode:"code",wrapper:function(t){var e=t.children;return n.createElement(n.Fragment,{},e)}},h=n.forwardRef((function(t,e){var r=t.components,o=t.mdxType,a=t.originalType,p=t.parentName,l=s(t,["components","mdxType","originalType","parentName"]),u=c(r),h=o,f=u["".concat(p,".").concat(h)]||u[h]||m[h]||a;return r?n.createElement(f,i(i({ref:e},l),{},{components:r})):n.createElement(f,i({ref:e},l))}));function f(t,e){var r=arguments,o=e&&e.mdxType;if("string"==typeof t||o){var a=r.length,i=new Array(a);i[0]=h;var s={};for(var p in e)hasOwnProperty.call(e,p)&&(s[p]=e[p]);s.originalType=t,s[u]="string"==typeof t?t:o,i[1]=s;for(var c=2;c{r.r(e),r.d(e,{assets:()=>p,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>s,toc:()=>c});var n=r(7462),o=(r(7294),r(3905));const a={title:"8. Next Steps & Final Words",sidebar_position:1},i="Next Steps & Final Words",s={unversionedId:"Authentication-App-With-NextJs-And-Microsoft-Graph/Next-Steps-Conclusion",id:"Authentication-App-With-NextJs-And-Microsoft-Graph/Next-Steps-Conclusion",title:"8. Next Steps & Final Words",description:"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!",source:"@site/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/08-Next-Steps-Conclusion.md",sourceDirName:"Authentication-App-With-NextJs-And-Microsoft-Graph",slug:"/Authentication-App-With-NextJs-And-Microsoft-Graph/Next-Steps-Conclusion",permalink:"/MicrosoftCloud/tutorials/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/Next-Steps-Conclusion",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"8. Next Steps & Final Words",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"7. Important changes in the Admin & Reminder Pages",permalink:"/MicrosoftCloud/tutorials/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/Important-Changes-Admin-Reminder-Pages"},next:{title:"Automate Data Reporting with Azure Functions and Power Automate",permalink:"/MicrosoftCloud/tutorials/docs/Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/"}},p={},c=[],l={toc:c},u="wrapper";function m(t){let{components:e,...r}=t;return(0,o.kt)(u,(0,n.Z)({},l,r,{components:e,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"next-steps--final-words"},"Next Steps & Final Words"),(0,o.kt)("p",null,"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!"),(0,o.kt)("p",null,"If you want to go further, make the ",(0,o.kt)("inlineCode",{parentName:"p"},"Take break reminder app workshop"),". There we will go into the ",(0,o.kt)("inlineCode",{parentName:"p"},"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."),(0,o.kt)("p",null,"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:"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"\u2705 ",(0,o.kt)("strong",{parentName:"li"},(0,o.kt)("a",{parentName:"strong",href:"https://learn.microsoft.com/en-us/training/paths/m365-msgraph-fundamentals/"},"Microsoft Graph Fundalmentals"))," "),(0,o.kt)("li",{parentName:"ul"},"\u2705 ",(0,o.kt)("strong",{parentName:"li"},(0,o.kt)("a",{parentName:"strong",href:"https://learn.microsoft.com/en-us/training/modules/msgraph-access-user-events/"},"Access a user's calendar events in a JavaScript app with Microsoft Graph"))," "),(0,o.kt)("li",{parentName:"ul"},"\u2705 ",(0,o.kt)("strong",{parentName:"li"},(0,o.kt)("a",{parentName:"strong",href:"https://learn.microsoft.com/en-us/training/modules/msgraph-show-user-emails/"},"Show a user's emails in a JavaScript app with Microsoft Graph"))," "),(0,o.kt)("li",{parentName:"ul"},"\u2705 ",(0,o.kt)("strong",{parentName:"li"},(0,o.kt)("a",{parentName:"strong",href:"https://learn.microsoft.com/en-us/training/modules/msgraph-manage-files/"},"Download and upload files in a JavaScript app with Microsoft Graph"))," "),(0,o.kt)("li",{parentName:"ul"},"\u2705 ",(0,o.kt)("strong",{parentName:"li"},(0,o.kt)("a",{parentName:"strong",href:"https://learn.microsoft.com/en-us/training/modules/msgraph-user-photo-information/"},"Access user photo information by using Microsoft Graph"))," "),(0,o.kt)("li",{parentName:"ul"},"\u2705 ",(0,o.kt)("strong",{parentName:"li"},(0,o.kt)("a",{parentName:"strong",href:"https://learn.microsoft.com/en-us/training/modules/msgraph-javascript-app/"},"Configure a JavaScript application to retrieve Microsoft 365 data by using Microsoft Graph"))," "),(0,o.kt)("li",{parentName:"ul"},"\u2705 ",(0,o.kt)("strong",{parentName:"li"},(0,o.kt)("a",{parentName:"strong",href:"https://learn.microsoft.com/en-us/training/paths/m365-msgraph-associate/"},"Build apps with Microsoft Graph \u2013 Associate")))),(0,o.kt)("p",null,"And, see you in the next workshop! \ud83d\ude0a"))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/public/tutorials/assets/js/497b4376.67a8106d.js b/public/tutorials/assets/js/497b4376.67a8106d.js deleted file mode 100644 index c0fbb07..0000000 --- a/public/tutorials/assets/js/497b4376.67a8106d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs_website=self.webpackChunkdocs_website||[]).push([[587],{3905:(e,t,a)=>{a.d(t,{Zo:()=>c,kt:()=>d});var i=a(7294);function n(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function r(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,i)}return a}function o(e){for(var t=1;t=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var s=i.createContext({}),p=function(e){var t=i.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},c=function(e){var t=p(e.components);return i.createElement(s.Provider,{value:t},e.children)},m="mdxType",g={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},k=i.forwardRef((function(e,t){var a=e.components,n=e.mdxType,r=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),m=p(a),k=n,d=m["".concat(s,".").concat(k)]||m[k]||g[k]||r;return a?i.createElement(d,o(o({ref:t},c),{},{components:a})):i.createElement(d,o({ref:t},c))}));function d(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,o=new Array(r);o[0]=k;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[m]="string"==typeof e?e:n,o[1]=l;for(var p=2;p{a.r(t),a.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>g,frontMatter:()=>r,metadata:()=>l,toc:()=>p});var i=a(7462),n=(a(7294),a(3905));const r={title:"1. Configuring an Application in Azure Active Directory",sidebar_position:1},o=void 0,l={unversionedId:"Take-A-Break-Reminder-App/Create-An-Application-Azure-Active-Directory",id:"Take-A-Break-Reminder-App/Create-An-Application-Azure-Active-Directory",title:"1. Configuring an Application in Azure Active Directory",description:"Note: If you are coming from the previous workshop, you can skip this session.",source:"@site/docs/Take-A-Break-Reminder-App/01-Create-An-Application-Azure-Active-Directory.md",sourceDirName:"Take-A-Break-Reminder-App",slug:"/Take-A-Break-Reminder-App/Create-An-Application-Azure-Active-Directory",permalink:"/MicrosoftCloud/tutorials/docs/Take-A-Break-Reminder-App/Create-An-Application-Azure-Active-Directory",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"1. Configuring an Application in Azure Active Directory",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Take a Break Reminder App",permalink:"/MicrosoftCloud/tutorials/docs/Take-A-Break-Reminder-App/"},next:{title:"2. Installing dependencies from the Kit Get Started",permalink:"/MicrosoftCloud/tutorials/docs/Take-A-Break-Reminder-App/Installing-Dependencies-From-Kit-Get-Started"}},s={},p=[{value:"Step by Step",id:"step-by-step",level:2},{value:"Configure the Application",id:"configure-the-application",level:2}],c={toc:p},m="wrapper";function g(e){let{components:t,...r}=e;return(0,n.kt)(m,(0,i.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},(0,n.kt)("strong",{parentName:"p"},"Note"),": If you are coming from the previous workshop, you can skip this session.")),(0,n.kt)("p",null,"In this session, you will learn how to create an application in Azure Active Directory (AAD) and configure the necessary permissions so that the application can access the user's data."),(0,n.kt)("p",null,"Before starting to develop the application, you need to create an application in the Azure Active Directory (AAD). For this, go now to the ",(0,n.kt)("strong",{parentName:"p"},(0,n.kt)("a",{parentName:"strong",href:"https://portal.azure.com/"},"Azure Portal")),", use your M365 Developer Program account and click on ",(0,n.kt)("strong",{parentName:"p"},"Azure Active Directory"),"."),(0,n.kt)("p",null,"Now, let's go to the step by step!"),(0,n.kt)("h2",{id:"step-by-step"},"Step by Step"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},"Go to ",(0,n.kt)("strong",{parentName:"li"},(0,n.kt)("a",{parentName:"strong",href:"https://portal.azure.com/"},"Azure Portal"))," and click on ",(0,n.kt)("strong",{parentName:"li"},"Azure Active Directory"),".")),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-01",src:a(2087).Z,title:"Azure Active Directory Page",width:"1914",height:"1032"})),(0,n.kt)("ol",{start:2},(0,n.kt)("li",{parentName:"ol"},"Click on ",(0,n.kt)("strong",{parentName:"li"},"App Registrations"),".")),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-02",src:a(769).Z,title:"App Registrations Page",width:"1914",height:"1032"})),(0,n.kt)("ol",{start:3},(0,n.kt)("li",{parentName:"ol"},"Click on ",(0,n.kt)("strong",{parentName:"li"},"New Registration"),".")),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-03",src:a(2821).Z,title:"New Registration Page",width:"1914",height:"1032"})),(0,n.kt)("ol",{start:4},(0,n.kt)("li",{parentName:"ol"},"Fill in the fields as shown below and click on ",(0,n.kt)("strong",{parentName:"li"},"Register"),".")),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-04",src:a(2442).Z,title:"Register an Application",width:"1914",height:"1032"})),(0,n.kt)("ol",{start:5},(0,n.kt)("li",{parentName:"ol"},"Go to ",(0,n.kt)("strong",{parentName:"li"},"Overview")," and copy:")),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Application (client) ID")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Directory (tenant) ID"))),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-05",src:a(7900).Z,title:"Overview Page",width:"1914",height:"1032"})),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"We will use these values to configure the application in the ",(0,n.kt)("inlineCode",{parentName:"p"},"env.local")," file.")),(0,n.kt)("h2",{id:"configure-the-application"},"Configure the Application"),(0,n.kt)("ol",{start:6},(0,n.kt)("li",{parentName:"ol"},"Go to ",(0,n.kt)("strong",{parentName:"li"},"Certificates & secrets")," and click on ",(0,n.kt)("strong",{parentName:"li"},"New client secret"),".")),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-06",src:a(7695).Z,title:"Certificates & secrets Page",width:"1914",height:"1032"})),(0,n.kt)("ol",{start:7},(0,n.kt)("li",{parentName:"ol"},"Fill the field ",(0,n.kt)("strong",{parentName:"li"},"Description")," and click on ",(0,n.kt)("strong",{parentName:"li"},"Add"),".")),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-07",src:a(1307).Z,title:"Description Field",width:"1914",height:"1047"})),(0,n.kt)("ol",{start:8},(0,n.kt)("li",{parentName:"ol"},"Copy the ",(0,n.kt)("strong",{parentName:"li"},"Value")," of the ",(0,n.kt)("strong",{parentName:"li"},"Client secret"),".")),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-08",src:a(4939).Z,title:"Value of Client Secret",width:"1914",height:"1047"})),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},(0,n.kt)("strong",{parentName:"p"},"Obs.:")," don't forget to save this value, you will need it later. If you lose it, you will need to create a new one.")),(0,n.kt)("ol",{start:9},(0,n.kt)("li",{parentName:"ol"},"Go to ",(0,n.kt)("strong",{parentName:"li"},"API permissions")," and click on ",(0,n.kt)("strong",{parentName:"li"},"Add a permission"),".")),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-09",src:a(1256).Z,title:"API permissions Page",width:"1928",height:"1047"})),(0,n.kt)("ol",{start:10},(0,n.kt)("li",{parentName:"ol"},"Click on ",(0,n.kt)("strong",{parentName:"li"},"Microsoft Graph")," and then on ",(0,n.kt)("strong",{parentName:"li"},"Delegated permissions"),".")),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-111.png",src:a(9410).Z,title:"Delegated permissions",width:"1928",height:"1047"})),(0,n.kt)("ol",{start:11},(0,n.kt)("li",{parentName:"ol"},"Select the following permissions and click on ",(0,n.kt)("strong",{parentName:"li"},"Add permissions"),".")),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"email")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"offline_access")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"openid")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Presence.Read")),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"profile"))),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-11",src:a(115).Z,title:"Add Permissions Page",width:"1928",height:"1047"})),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-12",src:a(7611).Z,title:"Presence Read permission",width:"1928",height:"1047"})),(0,n.kt)("ol",{start:12},(0,n.kt)("li",{parentName:"ol"},"Go to ",(0,n.kt)("strong",{parentName:"li"},"Microsoft Graph")," again and click on ",(0,n.kt)("strong",{parentName:"li"},"Application permissions"),".")),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-13",src:a(6364).Z,title:"Application permissions page",width:"1928",height:"1047"})),(0,n.kt)("ol",{start:13},(0,n.kt)("li",{parentName:"ol"},"Select the following permissions and click on ",(0,n.kt)("strong",{parentName:"li"},"Add permissions"),".")),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("strong",{parentName:"li"},"Presence.ReadWrite.All"))),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-14",src:a(5239).Z,title:"Presence Read Write All permission",width:"1928",height:"1047"})),(0,n.kt)("ol",{start:14},(0,n.kt)("li",{parentName:"ol"},"Click on ",(0,n.kt)("strong",{parentName:"li"},"Grant admin consent for 'your-tenant-name'")," and click on ",(0,n.kt)("strong",{parentName:"li"},"Yes"),".")),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image-15",src:a(9959).Z,title:"Grant admin consent for tenant name",width:"1928",height:"1047"})),(0,n.kt)("p",null,"Congratulations! YEAH! \ud83c\udf89\ud83c\udf89\ud83c\udf89"),(0,n.kt)("p",null,"You have successfully created an application in Azure Active Directory and configured the necessary permissions so that the application can access the user's data."),(0,n.kt)("p",null,"Now, let's go to the next session!"))}g.isMDXComponent=!0},2087:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-01-5455e7e99bc3c79be78b0674d9aadf89.png"},769:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-02-c285321d2cb56b5c2fa6c329ac222d28.png"},2821:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-03-530bc02cdc0ea0fd222664447a17456d.png"},2442:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-04-c043fa343dc196745879187dcd62faab.png"},7900:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-05-8c369fb374b9825a0c0f9377bfc8b74b.png"},7695:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-06-ed5531907156f493b6eee972f725344d.png"},1307:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-07-db5c1f42b2d3079590e350fa8ba4ccbb.png"},4939:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-08-3000815597d278da230882b600fd2100.png"},1256:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-09-3679e41b5533b13798a9958eff85f902.png"},115:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-11-d43060060c4ddf2c0b90e179971676c8.png"},9410:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-111-845126e9d97392fc17dd60985515f73e.png"},7611:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-12-9f36310ccf9ea25e87c59575ea049925.png"},6364:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-13-9a3de33d2d873badd53cf1008678f940.png"},5239:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-14-a5ca1363f60ae225f921dd8325b91298.png"},9959:(e,t,a)=>{a.d(t,{Z:()=>i});const i=a.p+"assets/images/image-15-c0a0c843769de56bd2d040d6fa1950e0.png"}}]); \ No newline at end of file diff --git a/public/tutorials/assets/js/50cbbf64.60da3f26.js b/public/tutorials/assets/js/50cbbf64.60da3f26.js deleted file mode 100644 index f568c9a..0000000 --- a/public/tutorials/assets/js/50cbbf64.60da3f26.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs_website=self.webpackChunkdocs_website||[]).push([[902],{3905:(e,t,a)=>{a.d(t,{Zo:()=>p,kt:()=>h});var r=a(7294);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function n(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function i(e){for(var t=1;t=0||(o[a]=e[a]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(o[a]=e[a])}return o}var u=r.createContext({}),s=function(e){var t=r.useContext(u),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},p=function(e){var t=s(e.components);return r.createElement(u.Provider,{value:t},e.children)},A="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var a=e.components,o=e.mdxType,n=e.originalType,u=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),A=s(a),d=o,h=A["".concat(u,".").concat(d)]||A[d]||m[d]||n;return a?r.createElement(h,i(i({ref:t},p),{},{components:a})):r.createElement(h,i({ref:t},p))}));function h(e,t){var a=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var n=a.length,i=new Array(n);i[0]=d;var l={};for(var u in t)hasOwnProperty.call(t,u)&&(l[u]=t[u]);l.originalType=e,l[A]="string"==typeof e?e:o,i[1]=l;for(var s=2;s{a.r(t),a.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>m,frontMatter:()=>n,metadata:()=>l,toc:()=>s});var r=a(7462),o=(a(7294),a(3905));const n={title:"4. Use Power Automate to Retrieve Data from an Azure",sidebar_position:4},i="Exercise 4",l={unversionedId:"Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/Use-Power-Automate-to-Retrieve-Data-from-an-Azure",id:"Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/Use-Power-Automate-to-Retrieve-Data-from-an-Azure",title:"4. Use Power Automate to Retrieve Data from an Azure",description:"Use Power Automate to Retrieve Data from an Azure",source:"@site/docs/Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/04-Use-Power-Automate-to-Retrieve-Data-from-an-Azure.md",sourceDirName:"Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate",slug:"/Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/Use-Power-Automate-to-Retrieve-Data-from-an-Azure",permalink:"/MicrosoftCloud/tutorials/docs/Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/Use-Power-Automate-to-Retrieve-Data-from-an-Azure",draft:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"4. Use Power Automate to Retrieve Data from an Azure",sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"3. Create and Deploy the Function App to Azure",permalink:"/MicrosoftCloud/tutorials/docs/Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/Create-and-Deploy-the-Function-App-to-Azure"},next:{title:"Congratulations!",permalink:"/MicrosoftCloud/tutorials/docs/Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/Congratulations"}},u={},s=[{value:"Use Power Automate to Retrieve Data from an Azure",id:"use-power-automate-to-retrieve-data-from-an-azure",level:2}],p={toc:s},A="wrapper";function m(e){let{components:t,...n}=e;return(0,o.kt)(A,(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"exercise-4"},"Exercise 4"),(0,o.kt)("h2",{id:"use-power-automate-to-retrieve-data-from-an-azure"},"Use Power Automate to Retrieve Data from an Azure"),(0,o.kt)("p",null,"In this exercise you'll learn how to automate the process of calling the Azure Function created earlier using ",(0,o.kt)("a",{parentName:"p",href:"https://powerautomate.microsoft.com"},"Power Automate"),". The final version of the automation flow you'll create looks like the following:"),(0,o.kt)("p",null,(0,o.kt)("img",{alt:"Power Automate Flow",src:a(1721).Z,title:"Power Automate Flow",width:"516",height:"1024"})),(0,o.kt)("p",null,"It performs the following steps:"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Schedules a task to run every day at a specific time."),(0,o.kt)("li",{parentName:"ul"},"Makes an HTTP call to an Azure Function."),(0,o.kt)("li",{parentName:"ul"},"Parses the JSON data returned from the function call."),(0,o.kt)("li",{parentName:"ul"},"Adds each item from the JSON array to an Excel Online spreadsheet.")),(0,o.kt)("p",null,"To get started, perform the following steps:"),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Signed in to ",(0,o.kt)("a",{parentName:"p",href:"https://make.powerautomate.com"},"https://make.powerautomate.com"),".")),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Select your environment in the upper-right corner of the screen. "),(0,o.kt)("admonition",{parentName:"li",type:"info"},(0,o.kt)("p",{parentName:"admonition"},"You may have multiple environments to choose from if you\u2019re using a work account."))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Select ",(0,o.kt)("strong",{parentName:"p"},"Create")," in the menu on the left side of the page.")),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Select ",(0,o.kt)("strong",{parentName:"p"},"Scheduled cloud flow")," from the available templates:"),(0,o.kt)("p",{parentName:"li"},(0,o.kt)("img",{alt:"Scheduled flow template",src:a(2109).Z,title:"Scheduled flow template",width:"382",height:"173"}))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"In the dialog that appears, name the flow, define how often it will run, and then select the ",(0,o.kt)("strong",{parentName:"p"},"Create")," button."),(0,o.kt)("p",{parentName:"li"},(0,o.kt)("img",{alt:"Build a Scheduled Flow Dialog",src:a(5048).Z,title:"Build a Scheduled Flow Dialog",width:"810",height:"514"}))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"After selecting the ",(0,o.kt)("strong",{parentName:"p"},"Create")," button, Power Automate automatically adds the first step of the flow for you:"),(0,o.kt)("p",{parentName:"li"},(0,o.kt)("img",{alt:"The Recurrence action automatically added by Power Automate",src:a(163).Z,title:"The Recurrence action automatically added by Power Automate",width:"616",height:"103"}))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"The next step in the flow involves calling the Azure Function to retrieve the data needed for reporting. To make that happen, select the ",(0,o.kt)("strong",{parentName:"p"},"Next")," step button and type ",(0,o.kt)("inlineCode",{parentName:"p"},"http")," into the search box. Select the HTTP action from the options."),(0,o.kt)("p",{parentName:"li"},(0,o.kt)("img",{alt:"Selecting the HTTP action",src:a(8758).Z,title:"Selecting the HTTP action",width:"599",height:"673"})),(0,o.kt)("admonition",{parentName:"li",type:"info"},(0,o.kt)("p",{parentName:"admonition"},"The HTTP action is a \u201cpremium\u201d feature and requires the proper license. While licensing is beyond the scope of this tutorial, you can find more details in ",(0,o.kt)("a",{parentName:"p",href:"https://go.microsoft.com/fwlink/?LinkId=2085130&clcid=0x409"},"this document"),"."))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"After selecting the HTTP action, you can enter the method and URI that should be used for the API call. Ensure that you replace ",(0,o.kt)("inlineCode",{parentName:"p"},"MY-AZURE-FUNCTION-DOMAIN")," with the actual value from your Azure Function."),(0,o.kt)("ul",{parentName:"li"},(0,o.kt)("li",{parentName:"ul"},"Method: GET"),(0,o.kt)("li",{parentName:"ul"},"URI: https://MY-AZURE-FUNCTION-DOMAIN/api/getGitHubRepoStats")),(0,o.kt)("admonition",{parentName:"li",type:"note"},(0,o.kt)("p",{parentName:"admonition"},"The Azure Function in this example doesn't require authentication (it has publicly available data from GitHub) so no authentication is being used. It also doesn't require any specialized headers or queries. In cases where you have to do something more involved, you can learn about the various options at ",(0,o.kt)("a",{parentName:"p",href:"https://learn.microsoft.com/power-automate/desktop-flows/actions-reference/web"},"https://learn.microsoft.com/power-automate/desktop-flows/actions-reference/web"),"."))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"The Azure Functions call returns JSON data that needs to be parsed. To handle that, select the ",(0,o.kt)("strong",{parentName:"p"},"New step")," button, search for ",(0,o.kt)("strong",{parentName:"p"},"json"),", and select the ",(0,o.kt)("strong",{parentName:"p"},"Parse JSON")," action:"),(0,o.kt)("p",{parentName:"li"},(0,o.kt)("img",{alt:"Selecting the Parse JSON action",src:a(3867).Z,title:"Selecting the Parse JSON action",width:"600",height:"693"}))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Once the ",(0,o.kt)("strong",{parentName:"p"},"Parse JSON")," action dialog appears, perform the following tasks:"),(0,o.kt)("ul",{parentName:"li"},(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"Select the ",(0,o.kt)("strong",{parentName:"p"},"Content")," property and pick ",(0,o.kt)("strong",{parentName:"p"},"Body")," from the options.")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},"Select the ",(0,o.kt)("strong",{parentName:"p"},"Generate from sample")," button and enter the JSON returned from the Azure Function call. This automatically generates a schema and adds it to the Schema property of the Parse JSON action."),(0,o.kt)("p",{parentName:"li"}," ",(0,o.kt)("img",{alt:"Generating a schema from JSON data in the Parse JSON action",src:a(3119).Z,title:"Generating a schema from JSON data in the Parse JSON action",width:"600",height:"335"}))))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"The next step is to store the data somewhere which means iterating through the JSON array that\u2019s returned from the API call. To handle that you can use the ",(0,o.kt)("strong",{parentName:"p"},"Control actions")," provided by Power Automate.")),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Select the ",(0,o.kt)("strong",{parentName:"p"},"Next")," step button again, type ",(0,o.kt)("strong",{parentName:"p"},"apply")," in the search box, and selected the ",(0,o.kt)("strong",{parentName:"p"},"Apply to each action"),".")),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"The ",(0,o.kt)("strong",{parentName:"p"},"Apply to each action dialog")," will ask you to select an output from the previous step. You can select ",(0,o.kt)("strong",{parentName:"p"},"Body")," from the Parse JSON options in this case since we want to access the JSON object. That gets us to the data we need and will iterate through each object in the array, but how do we add each object into an Excel spreadsheet or some other type of data store?")),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Select the ",(0,o.kt)("strong",{parentName:"p"},"Add an action")," option from the ",(0,o.kt)("strong",{parentName:"p"},"Apply to each action")," and select ",(0,o.kt)("strong",{parentName:"p"},"Excel Online (Business)")," from the top options that are shown."),(0,o.kt)("p",{parentName:"li"},(0,o.kt)("img",{alt:"Selecting the Excel Online connector",src:a(4632).Z,title:"Selecting the Excel Online connector",width:"636",height:"887"}))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Before adding values into the dialog, you need to add an Excel file into your OneDrive for Business account. Visit ",(0,o.kt)("a",{parentName:"p",href:"https://onedrive.com"},"https://onedrive.com"),", login with one of your Microsoft 365 Developer tenant accounts, and perform the following tasks:"),(0,o.kt)("ul",{parentName:"li"},(0,o.kt)("li",{parentName:"ul"},"Download the following file to your machine: ",(0,o.kt)("a",{parentName:"li",href:"https://github.com/microsoft/MicrosoftCloud/tree/main/samples/data-reporting-with-azure-functions-power-automate/stats.xlsx"},"https://github.com/microsoft/MicrosoftCloud/tree/main/samples/data-reporting-with-azure-functions-power-automate/stats.xlsx")),(0,o.kt)("li",{parentName:"ul"},"Back in OneDrive, Create a new folder named ",(0,o.kt)("strong",{parentName:"li"},"data"),"."),(0,o.kt)("li",{parentName:"ul"},"Upload the ",(0,o.kt)("strong",{parentName:"li"},"stats.xlsx")," file from your machine into the ",(0,o.kt)("strong",{parentName:"li"},"data")," folder on OneDrive."))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Go back to your Power Automate flow and enter the following values in the ",(0,o.kt)("strong",{parentName:"p"},"Excel Online connector")," dialog:"),(0,o.kt)("ul",{parentName:"li"},(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("strong",{parentName:"li"},"Location:")," OneDrive for Business"),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("strong",{parentName:"li"},"Document Library:")," OneDrive"),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("strong",{parentName:"li"},"File:")," /data/stats.xlsx"),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("strong",{parentName:"li"},"Table:")," RepoStats"))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Map the remaining field names to their corresponding JSON property names as shown next:"),(0,o.kt)("p",{parentName:"li"},(0,o.kt)("img",{alt:"Entering information for the Excel Online connector",src:a(5039).Z,title:"Entering information for the Excel Online connector",width:"600",height:"524"})),(0,o.kt)("admonition",{parentName:"li",type:"note"},(0,o.kt)("p",{parentName:"admonition"},"Because a schema was created in the previous Parse JSON step, you can pick the JSON properties you want to assign to your Excel columns for each row. That\u2019s the beautify of having the Parse JSON action generate a schema as mentioned earlier."))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Now it's time to test out your flow! The ",(0,o.kt)("strong",{parentName:"p"},"Flow checker")," option validates the flow and the ",(0,o.kt)("strong",{parentName:"p"},"Test")," option allows you to run the flow. You'll find these options in the upper-right toolbar:"),(0,o.kt)("p",{parentName:"li"},(0,o.kt)("img",{alt:"Test and Flow Checker",src:a(41).Z,title:"Test and Flow Checker",width:"505",height:"39"})),(0,o.kt)("admonition",{parentName:"li",type:"info"},(0,o.kt)("p",{parentName:"admonition"},"The Flow checker will display any errors or warnings in the flow so that you can fix them. The Test option allows you to manually start the flow to try it out."))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Select ",(0,o.kt)("strong",{parentName:"p"},"Test")," on the toolbar. Select the ",(0,o.kt)("strong",{parentName:"p"},"Manually")," option and then run the flow by selecting the ",(0,o.kt)("strong",{parentName:"p"},"Test")," button."),(0,o.kt)("p",{parentName:"li"},(0,o.kt)("img",{alt:"Testing a flow",src:a(7366).Z,title:"Testing a flow",width:"322",height:"206"}))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"After testing it, you can go to the test run and if the flow ran successfully you\u2019ll see a message at the top (or an error if it failed):"),(0,o.kt)("p",{parentName:"li"},(0,o.kt)("img",{alt:"View the result of a flow run",src:a(7590).Z,title:"View the result of a flow run",width:"698",height:"396"}))),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Once the flow runs successfully, revisit the ",(0,o.kt)("strong",{parentName:"p"},"stats.xlsx")," spreadsheet in OneDrive to view the data."))))}m.isMDXComponent=!0},5048:(e,t,a)=>{a.d(t,{Z:()=>r});const r=a.p+"assets/images/build-scheduled-flow-dialog-d84a0efdafb3315d1abc2f9f6fd6ce42.png"},5039:(e,t,a)=>{a.d(t,{Z:()=>r});const r=a.p+"assets/images/excel-online-connector-values-1c6f37b998d4be2bfb5b146cc97efb27.png"},4632:(e,t,a)=>{a.d(t,{Z:()=>r});const r=a.p+"assets/images/excel-online-connector-ecb555187cbdfc288eac177fa5808479.png"},3867:(e,t,a)=>{a.d(t,{Z:()=>r});const r=a.p+"assets/images/parse-json-action-6d77f5f62124d269cedbb1dad0016f42.png"},3119:(e,t,a)=>{a.d(t,{Z:()=>r});const r="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAFPCAMAAACmg0BQAAAA0lBMVEWt1v+Mbf9wlyeKiIaMbP+YmJjr8OL///7v6v/////T09Oq0foxMjOmzPTe3tybw+0ICAqSueClPkirrM2ok61TVFZBREiqo7+sw+mruNzc4f+jFRb39vYLVqlqamunc4ikJiq8vL6kMDZeYWTv7u6mW2uogptMh8l5q+PIyMamTFkjZ7Q1dL2RkZGqqqnm5uZnnNd1dHh/f3+naXujHR+IqcvGt/9hepPc2OvHw9V0kq+XsmVLjf+12P+qkv+7zZwoe//5xMfwbXYPb//ygYntQk6darhxAAAZjUlEQVR42uzcj1+azh8HcMwvIQh4/sIkvCQsIxMHLaerbFvb//8vfe84UDQtP5uW6ev12SfkROsxn3vfcVxI/0OQzScn4e8A2QFYBQRZI4CFABYCWAhgARYCWAhgIYAFWAhgIYCFABZgIYCFfE5Yw0n6aDIBLGRDsCaqOuU0tNUJYCEbgaXa2T1bBaxDS/Hhx/OPh+KGYU0WJKlDwDqo2A8Phl2wjYcHe6Owhvb8vr0S1ng8Hr39HZKjxg1XHDwOxnwzGvMfezTCB7lrrn6UkkelH/ZWYOVyk2HuNViERW+89R10QmhhZBG27RcKLnsJ0Rkti4TsyXqIT3LH8sBdPZYeuayH7cAa2hzVK7BqhVFItDe/h0ULHmGlqVEraCRiDZTt1XXeBFi7N76Ka9VVXLf+YZz1EpZtJ/WKu3oLFv/SYLWoPiq41oiGhb5FrHFh5BESZmHpVDz0dPHKkJGyQsDawYJlsC/PbIz1nCrbEKxhMr/AXLE/E94wfAXWiDQC2XUtq9Agel0OSGMcycyRNtajuYolusykkVqMlMvrFmDtWNJx1eNzPN5afWAyZGZjaLEdua/CsgWjnHCVE9TsFbDk0dgi8Q8iEwaLdYpene81CPtS0zOwRryqjflL4pY84aRYO2DtWp7nhvDPK4+TdUu40nUhy9LldWAlrnKvwmKxtIIdMjUk0USs/qgQEcuydJKBxX6AvM4qHB+/s4Q6J8VKFmDtaMV6uCq8XrFqC7DsN2AlPd+wMEldTVZ3hXlNUHVHjQRWwa0T4oa661Zddw4W31oFXUCqW3Gtsihg7eQYKy1Vr42x/mNXyEwxRzmbRbhKB/OrBu8Fmw+fprC4H08mc9NTTFO8T3VWy+LZK1a4OCmX6IC1Y3nMWtrkWWGOTzdMYldvTZAKWAVC+VBLwArHrCaGIz6eGsdmRmPbjbtAjVW1iJFi54yseibngxYBrJ2cxxIVa/PzWLlhjtWr3HqwamyERVNYfNg1YnR4W1woCdHzoj1uGFkknpwQsMaAtXPZ7sx7Lpd7u2KlGY0zO5roBUfpvGl60WbaYI/x4e22rG1dK1TFfMP0IvQEF6EPLNtZ3YBlM8gGsnyh33DZoj/AQv4JVmZBcm4yxNJkZGOw8MsUCGAhgIUAFmAhgIUAFgJYgIUAFgJYCGABFgJYCGAhhwFLRZANB7AQwEIACwEswEIACwEsBLAQBLAQwPrLyMgnzGeAhX/wny+fD9bRihz/bYAAsAALsAALsAALASzA2htYys/0kdMBLGRDsJyfzi9By6eUhtrck53+wtu9aNgirHvTVJ/uAeuzwvr9+88vDkvzNFXR3HlH3iIs791g3ZtP3Nb9OrB8F7B2DJaiOL/+xAUrCvieqgaUBooauWHoq/l6FKla6OU72Yb3gaUecVNP6ktYWnzr3KydiM47m9sAwYdUrM6fn79+/2amPDPed0PTZB2i1zd9qpreYNChAyXoZxreB9b9E/uP/ZmWrCws89gnwWpYerybZ4cB1gfBUljFcn6pDusS62Lkng9UxZVVj/nxBrznC+TBQKOZhveCxSvW09HTcljHxD32LaKzqhQRotN8dHxs6skBLq9n/ZQeEHxIxWK0OrwLTCsWH75rYeyImtyRHOZZMg3vBEt94hXraGnF6suexwpTqEX6sUwCrU5dwijVj6eyQnla0oDgo2ApajrGYruyy7tD4UhULHEiOGt4pzGWKbrCpWOsumfpfsAsHRPNiuKuUA+OrVnv6JJZVwkEHzWPJTbxWaHv+nnHYd2hcKR4HcX0NEXxMw3vdVaoclrq/dHyrtCjMu/5LJmJ4rAiTyOzQ2RCIsD6YFipL59SL9ScvOflncQRP0VUXY/Sfrbhneax2BmhaS6bII1h5S0/rliB3o9h+SQKM64C1hsC1k7A4meI8fh9Nv/OipPDxvVKx5lveCdY909PR6tguXqe934BMallmhYbrOvEz7iKx1mAtSOwduJnnEoyn9RsyZqfx9JZTxcQPpLSdH5WyIbu+vQAS47HWTqmGwBrCaz7I35e+OolHU1MhA7417qMmXfAWqsr/E8XobVkOhSwAGujsPwA1woBawuwcBEasAALsAALASzAAqzXfkYEsAALsAALASwEsDbxMyK42wyCLAtgIYCFABYCWICFABYCWAhgIcghwMJkIyZItwNLmcWWMrEVZJeidbL5VLDmXEHWjsWc3/1MsKSF4MPcXVjqZ4Nl3JUBC7A2DqtMyHfA2gdY07smO9M7yQzMj4P1TUdXuA+wpndNHsjUo76g5sofCMsCrL2Ald41OZIdxRSw1A+FVQesPYA1u2uyqFZKp09D3+3LVHZUR6bUVf2gT4NBxJ53Io/KynZhGfo3wNqHipXeNVnthz6/F1YoD0zX9fxB3leDQOnQgUt904tMl6qO3+lE/lZhWeSbAVifH5YyvWsyL0+e7JieI8ZY7H/FMweDvsv7RcbJqTsq6yvzwVZhlb5nzgkB6xNXLCW5azJ/aIayH6VjLLffqfP7Jft8h5Uvpe50wiiIgi2PsTwPsPYE1uwQN9Q8JTkrdPtO3UxPEQWsgD0KApwVAtZ681ji7LDfUZ287Hiu4mgClsp2VTbimsHqK87WKxbmsfYFVsKr71F+u2SNUs9NYHXyXki1GawBpXTrsMpEx8z7PsFKb47MN8p0LmL+tu7OQNn6PJZklHGtcI9gYXUDAlgIYP0bLKz0A6ytwHqELMDaBCxN2vnYDmAB1lZkARZgbSOPgAVYWwlg7R+sakMyaidvfvQntaJUa75svypLpav1Ba04HLD2D9bZudQ8rfJHF6/xapyeSO3Ll+29rvSltT6sFYcD1h7DKp42AQuwNg7runJ6XrmQmhVDkozKSbFyeX7OIVWv25VGBlZR15dJ6fZaPd7HlXrlm1Z3umVfWjcG2+Pv2isB1l7BMori41vYFuMVy82qVGwYfO+0WWRPVGqSdHnN6td1s9FuSs2vNaPRNqSTRlGq8pJWJCT7LuWSGDRdGVK5VWagWjdXxtV0WyoXje6NJN18kaQvN7PDAWsfYLFPM4ZUNua2RrmY/XCTrrBWiXEVTxmwi0vprNJoNDi2ab4nS3CSd52+vHzV+8JBCTfpljniJeqqx4rbFc4K9wtWKQG1sDVKy2AV29Vquyj2Li+ki8oZS2MJhlL2VzRYV9jtcljllnjTZFvq3XS7DFaxVU6fAaxDm8dKBu9nt7dnnBnDxB6cVRYPu7tbpoyracUVK22IN3EXGI/BWOZecFcCrAOBdS1O+ppfvzY5rAujeV6VqhxYMzMRMR1jLcAyGKClsEq9Vrzfmus6vxH8suOhwGpct69jYNdxx3jbPr1gZajWPj8/b74FS+q2ejc3GVhlsS33ei1xGnhzIwHWYV/SiYfqxdMTI6lTJyfrvKpoLG9P69TC0N0i+C3aw4JVPTsvClibvBhY7vbmzxTmChZgHQCs21txcnixUVjdbmlBWhGwsLoBy2YACwv9AAuw0lX4WJoMWGtjWfvvVnUUFbAAa+Odm/gFccACrE2vNT5cVoC1VrKX/xTk0GFl1ryvsfT9lSXy34l+B1iA9XLNu9SON83bNQ9fiIX7BgLWciliMrx6/pewcFUZsJZJua1UmqxeVc5PK5VLSTq5aPM17xcX7bNr/kRD7E8Pv9O9+TfCTb8PDtZaa97ZbtwV/p+9c+FtVNeisKXqqJoaD4mhAR8mgw89PArpTO6FKFKk+f9/69q8AjRJ0za5amBtaUqbOEzafNrebJaXqRNQSgnluWtxi/DI8YTvExKo4srqSOQ3s0XvbOZsDrAmBtZ5mvemxqqmQqdwHCcPCXdcj9ghodLujzZ3m4723TSMHe4qTw2s8zTvDVhOCZYttdY9ItxyCw0WcdIiPVhblWej5nYGrTFqrMNRZyxZLVCt6GvBUlVX3i3ru3sgVjUWtikAWKfAYlryTpiMKHFFCxYT1cqwVqnX1lgo3gHWyc5nEHjldR+JuF7ybPEikHYLliuDgHenwldgoY8FsM4L16X9H/sad3TeARbuFQKsGwbrD6ZCgAWLPoA1dqEfwAJYV5EmA6xRgnUT3rfjzYIAC2QBrNGCRQAWwAJYAOu0iYztap07+eCweUJY0vGVSdoe6kl3+MnYwU8XLObZJCxtsyLrrGEDM5CMmMuODGLV4rJeHXYPKSmcjLkywCIktd8P1p/jYB3JfJXvH8CaDFg+LwLOKSnFfqFDwojLUEuU/UDmrAPWozE/kLFYvMxiqsCKs6U+JllWWpLOV5U9PFWPr0yyypblEwDr5jXvD3svvubYH+a4WudOKE1tbQPvh9qllBEeWEKvuchT4YY+ofUwQozZpnM2c06orrHilTnXpsqrZWJqR0lCy6nQXCY00b648WpOVf1FVcbS/8tk7ODHq3l/KD98UkOwF7HvhzVRTYWicImfE8LVPztVmSpynKirLN3szAOKeu36rrKXylhNdVV+jbMkSRRorHGFp0sTV4Wj0LzrhFZ/ls1xMKwPFkkjqpWm2mLZKojwcq2NZ69lWj1Fval5SZaVPXfle1uDpW26k9YdHmBNsI9Vg+UEpUK5zVjDHsN8c8jlVmekdZ2xkm7GqtQ2+wJ/AFZfWQ+wxgiWH5ZZhQaBJiwNXKazVhq6hHYbEU2N1Y/VijJdla8yk5Y1VgXWXANnmvp5VmXK6smOANoAWCMHS4RSarSiQgPA1U/c1QumPS7zN8Eys3IXMJWxlsuM7ftYiboKzBRYpro61EeVzparo8p6gDXmWzp5iRG3aa2BZ4Ke8zLWzJD1XLeOexWdKukOnWbbwxRgjRcsYZerwwi3P3PTjyZJdtaGv4sFivdpgGWHVbXuW58CaxWft5F0/8oUYEHdAHUDwILQD2BBmgywABaWZAAs5CiANSWw7gEWwLpU0M0GYEHzfk7ny33PWakxewJYk5ImvzNaiby03nPWeddxEmABrGMqmwNGWqfOSjcz1FiTAstKfcn15GXnNpc2YaEMfMVMo32vbeGJ4FZa5K1EvnaPb6Tx6si1KOKYRF7LGQDWpDTvjpe7kdRTnAwt11JYCEuTVGvfG1t4IrzUcZ1WIt+4x9fSeGKnjFjuUYk8IU8LgDUpzbujd7XXjESVnXJh65U7rZK0sYVXYDmDqVC/qJXGR2X+OiqR384eTYA1Kc27I0kldI/KGcz1RPVYrX1vbOEVWPQAWK00nvlqxuxUXQOJPNtMzHsZfawyYwVOAxbViSnqZKzaFp6IghzMWPvegiXtExL5HWqsqYEVqfmONmCRNGQu93WNVWrfG1v4PVi1RL5uNzTSeKF36XFOKJlRvE8NrCCUXukCX4EluCxUId5q32tb+D1YlUS+cY9vpPF+wYPefohDsNDHmhxYpG/7TlzW174PbOFf9S0qaTx9QyGPzvv0wDrdB71YzOcAa0JgHdvQ93Pad6gboG6AbAZgjQWsvwEWwAJXAOtdYF0XvMnvMwCwkJQA1g2BdQ+wANalomt5BbAA1rHGqUVE1SMVzS1AGjHi2pTY4rD2eLYDWADrred5TmyvWjSRtqJTtxRD6J2lX8fWwFQIsN4DFqXngbUAWADrfLAE5+VNnygIoi5Y1DAGYD0CrLGA9RnN+8Orp/vDLEHcsrhipZ7GLRw3VVC5DtVPqdGzWe+sbGIS0VGD9RnN+0Nr2N4cB8P2C1PT+kspNt1LQnfd4YvZlgGssYD1Gc37Q2vYvj/2hvXB0itxXO/A2ud6ONt1rgkBFmqsc5Y+a7CiUM2OPbA2AxPlpyeABbDeA1aZsYQUNO+C1dZYuCoEWB8BKwxkEQSM5J58Ayz0sQDWR27pMPaG8nhmoPMOsK5xr3COe4UAC+oGgAWwABbAgtAPYEGaDLD+/2DdwP4Df/8AWABravMtwLphsP4ALIA1tWtPgPXBl1sOYYeM3s8bRhOTzE9vbJgcaPQPXwawxgeWHxDhad+QY6Yig2EDQpYJibtbRJP1fDBkOSdvvgxgjRgsK/gAWOwVWKth/jroIg+wpgKW4IHHeaSOauZi3KVca+M1b2npHt+C1ZfIt6nHjLNlTIj6mmWZYimJ19lyrR/ItOwwXq+WsXp4rkbFCTLWCDTvD4fP2h6FRaijNw5wAqqX8eg9yqOUUC8VjhREFDZzJGuHDSXyqoIqldBxTKnOVXS1LhcDrZfxXD9BaTkVrrK5qTcvz9ZsraBqXwawblbz/vrsw+FNeV5NhTYv4aKerTe1ID53HIfbRyXy7QwYs95UuF6ybo210tksJuaSltkKV4W3r3l/ffbh8GbFdAUWlZYl1cevbeKjkIRc2787RyXy7U/xMku6YK16xftKzYrrmCSZ+j4DWJPqY1myLrry3K9t4tU3em+Lfgwl8vsWQpmkNEJHwULGmiBYrKicHEShv6FeyERgEUsDJk4pmeuJUSWtEqw4psfBUjUWXQOsiXXeI14tuU/1mgvq5dLTOwzYMggC8SZYK3U1uK7nRJWWGrDmWbZcqicasBJ1VYipcKK3dMpSnXoua+3hz3kVNd8c0XQoGMCaIFiWH9AKrGvcFEySeb+fCrCmAlael/MeDa8D1qrtSwAsqBsgmwFYEPoBLIDVyOohTR7RYoovs0ri24/7bwBrPGB9melH/zUA1mjA+kL18lfGCmAdj+Gezl//Ch9g3QRY29nMBFgA6wpTYc/7EWABrEuBtdgCLIAFsADWTWjedZW1oABrmmBd1+edbWePAGuSYF3X53032zGAhRrrWjWWuTEBFsC6PFjbGTbJAVhX6GMBLIB10c67UXfeFzPsvgSwLnivsL5WpL2EBbAA1qXUDf0V9UAGYI1cNgOwIPQDWADrZqTJAGtcYE111Q3AumGwxkQWwPpSAbAA1sWiey8SYI0fLMciwu4/Ij5Oz3Fb+N3M2ACsCYHFc2J7JU8NXmF0avyH/N71HaMnTIXTBMsP60coPZmTgg+CtQVYUwTL5lJybulvSme1MJR+yoX+uUi1N6TPJXdbv3dFUKHHNcOiPJR6WAvWxnjq/z8GwJqW5t0SxNWux9QPy1RFWTkV8sjxhO8TO7BYlCq+UkYsd+/3rgopSxHUDPM9283Dji38ZrbovRlzNgdYE9O8N7NY2K2xuON6xA4JDx3HKVRK4qI/FVJL+7s3w1SmIqLozKHmbtN5E6Zh7NBumJrmvY6oD5blFpoYGWojd0GYL4NIv772e8957gdRO6yksjhQXFVvgprbmQmwptnHOgwW9/dlu7RJ4/cupOJFdsDiOmN1SGWbwa5evZQFsCYElhOwA2BF2mvbokRQQvVuTLXfu4bI9jpgeRb1006iamussRfvj90AWAeC5oFU5ARBUQRpSwz1vUBySvyCB1UHq/J7z2UQph2w0kDK7kz4Cqyx9rEA1keDClYd+u0t1qvQ/Jy4vecpOu8A6wLh57hXCLCuEHYEdQPAgmxmwmAhbjC+fX2wELcfAAsBsBAACwGwABYCYCEAFgJgIRAACwGwEADrK8XDy93tx8sDwPpqb+rl9wj+sr9fANZXe1N3o/jT3gEsfCT4LQAWwAJYAAtg4SPBbwGwABbAAlgACx8JfouJgnX//fn5+/2nTn3//PLffy7yJn/c3X0HWGMA6/55Yah4fD4bon8Gy77VQy/qDJdpif9rGM8Aawxg/TKMxctfP42/zj7PL2MxBGth/PrxA2ABrM4HuTCeNBIPaiZ7+LlY/Oe3Ovx8+F87Z7AaOQyD4S0hGAeRm3wyhsG++BCb5P0fbiU7k006LbssW2iW/4dhEltWCfqQZKdM4DFZWzd2MVsvAyX4lZ0L2WYmCmG2j+h4aTSlSBRD6lZ+kTXNWcjBLabwMxnWgR2Puk4WpncGQyiLXjSwzC/fAOumYGWi1hwZY+RyY2L/oKai0IVANEuwpVwm4iBfk047N43kNkfbDqeM1G4VyUVdvHthtW6IeCa3OmdHF2VwfWfA/c43sE6+AdY9wTJSCatdtk16bxYcvMRVIp6Fj9UuFKyNtEiwYyl+boWq9FIoV5NSmdRJ1ZtuJYtnBUPxzFXSYS06ojmx5yJbBTPpyczVgGkzapH65/ANsG6asVpUtX0fhSnHkjiUDS+hZ2FKBhytvTzZvDa7DpbEndW6/XvUEyyxGmWdMjQ3L0HSzrwbeU1PUgL92LKTuRqwNnncIM4X3wDrtqWw2El2hqOEdF1EuUVcAWGKOlB6Q62VsrgnWGI06GQ9Z6xsG5ANlRewWnNGbALxOHwG1pB6yjx8A6ybguUdOYm7AuPaiUGqB1gbRSMW0wkZbmCRURq0J5/9NWPppFfq0sFNfaa1ZKuUwEmbuscZrPoESy4axBffAOumxw2SiCiuvcTROm7ucYAlDMRlcMO+UyNaBurxX4dZlmxLuPZYuYEaRkeDfQHr4YYSpPmSPKjF8AUs3qQWp+bl5Btg3RUsO0VteYKgU7SH4ukAy2adcnsp9GvbNUrFWnRz6PVQtB9VnDOWnbTgDf4VrDYRJwFM9nwfgUWaO5uXs2+AdVew9J1O3d/opPmaJYw/pnQ22f1Gd3aSqD4uVuk6fKw3u3fz7v2R3pkou4fT3/7MN8C6FVh/6MD89crfi1+P/g3AujlY30FbLP/BUwCs7ydjARbAwlMALIAFsBASgAWw8BQAC2ABrK8UfhQEYH2J8DNGAAuCABYEsCCABUEACwJYEMCCIIAFASwIYEEQwIIAFgSwIAhgQQALAlgQBLCgrwYLgv653n68QdAX6CfVUWEfeJxAHwAAAABJRU5ErkJggg=="},1721:(e,t,a)=>{a.d(t,{Z:()=>r});const r=a.p+"assets/images/power-automate-flow-final-a8c08171679b94f3b2a348d0b7c7949e.png"},163:(e,t,a)=>{a.d(t,{Z:()=>r});const r="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmgAAABnCAMAAACD+E6HAAAATlBMVEXh7v9naWxMTlCYw//KyMc5OjwEBAT4+Pj///8ghf9lpP/T4vjN1eC2wM7m5uaWmqB3en26u7ymqrCHi48cHyL8/P4ugP+81f8Eaf/v9f/hffDvAAAFL0lEQVR42u3b127jOhSF4U1SpJbYi2Q77/+i50J24hQHk+IB5nj9F2mQE8D6wCIpMjP2FxK+BYzQGKEx9j1oE2N36D205QsJY38UoTFCY4RGaIzQGKExQiM0RmiM0BgjNEZojNBe5QPMsiyLgTGExu4EzQcA8MviASB4QmP3gGZeeBlzJkdo7NehATCLDwEIxiwGAKGxO0AL8PvkCQBmMTCExu4AzXsDIHi/z5zG34QWU4p8P9l3NwPmvETz+9e3NwPOObcWvqPse9CwT5YBu7pwG1qRUB0HNfbdXefZm9+9mU+gSXBdpFtnk0jS61pFd5FoY7Bp6GDT0BLUuqogQ43VdhEZdtVJkuVw+OC7TnMNzd/edboiklyUvvY4XIjO9m5lLSLRxeBWrYJbtRKrYlqrKKd7dUGUq6mO6EbsrvF8/LtdVugpXdbsX4T29rO/Ba22sioRW0Rk7cqJiLxAKyLBFZG+ikhZRWkRcT24ISKi1OUD+zcr1gYRkWRtEhEJ1pYvQHtelF2ghdvQ3OqqiDhrtXXD6tfQkkhwSaQ6q611O7R1pH1VZ1er7ap5vv430OR70MwLNHN76lQuSnA1tZSiVTegramlli7Q+hma3n/K/tnaj6ZOv0Mzl6Xa59DErkHWXZhad2jjDbRy3pieoUXXr45mj7oZOC/+n50tn28G4qpluBJC6cnVEJVoG5K+hhZWnSTVCzSxtoVekqtR+uD5eOBdp1+W5fl+gPkcmiRXpTrn1iTFOWclrc7Va2iSrHNOPUOL2jnXpa/OOV7feOTraOGjqx2f3+uM++wYg4iE95dwQwyvv71+EXtMaK8XZZ/dGWDsJ9D8yyDmw2f3Ohn7CbTFADDG708LeT7Kze4E7fyULYC38yahsV+FtnhjEILx/C8odldo/Hc7RmiM0BgjNEZojNAIjREaIzRGaITGCI0RGqGxH0EDY78eoTFCY4TGGKExQmOERmiM0BihMUZojNAYoTFGaIzQGCM0RmiM0Bj7R6BN+Q8Oejpi23g6Hhdattbq9qM/oW6//HA6nU4eAI4HmAPMkWfkYaHN22TzvaAdt20fyI4HbE/whmfkcaEBesKYgDFl1bXKyEOfR7mu9dh6wTareVJWZYxWhspA7wAwV6t1m5V9Oew1NOzKTofDdvTH03IgtceFlu0M1YDaoi25DJQxxwYATc2z6lFvaDXrvJWKqsukOjYdAWComHWbp5xVi3pDr69HNG+METkZMQcY/+S9PPGcPCi0UXXDBZoGokYd53FJ9Zx7hZ6gWh85Txq1A01hUgCw2QlQDVtsqkBPUK9/++K998Ec9jWa59T5yNB61fM1tGwRta0ZALRSShWUMdt5aKWUQm3AbPPozxOvalmrogrKyHrD+6nTe0IjNDtvqr6BBsRa9xFtP0j3gbLPirUBGEXPADDbDKhWKlAKsi0FhEZoN9doumMMZH2B1jY0BQBFZcwToPSEaCds0w5tsue1mC5b1m1UzKoA6u32dd91HhfZ/AHGw3iekUfedU52ilYrdYFWtdITAMzDatuBrjegW23rDg32/Fsma7VuWWutCtDVh9fRNn867dDksHBMe0xoz8356tL9nC9fbvnqekWeAWwAXtZiW746vt66ovay13wC7w88NrSvtI3y0Y+znfmGE9pv3utsH95KyLxfT2h/4+kNToqExseEGKExQmOM0BihMUIjNEZojNAYIzRGaIzQGCM0RmiMERojNPZQ0Bi7Q++gMXbHCI0RGiM0xgiNERojNMbu13/B1rBPmnussQAAAABJRU5ErkJggg=="},2109:(e,t,a)=>{a.d(t,{Z:()=>r});const r="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAX4AAACtCAMAAACA2eT7AAAAS1BMVEXz8vH29vbw7++iwPTy8fD7+/v+/v7///8BZ//r6urIx8e1tLTa2to0NDSHhoagn594d3aTkpGLtv9KSkrG2/9gYGBKj//09PSHrvS65/QWAAAHgElEQVR42u2diZabOBBFDUFStCAkMGb+/0unqgResNOZ07FxxrzXp22ZkgRcPUos7uRgoDfqAAR/A34Nbapb/ForaEMt/A8LfQttqIX/YaE/HQ4NtIkOh2nhX/Cryh6gDWUrBfx/Df4J+LfFPwE/8AM/8AM/8EPAD/wQ8AM/BPzADwE/8EPAD/wPtNeHVn8B/r0/N3wrftqCesf69gA8B7/A3+/3FWQA3oef6dvjj73qyAPwPf7PwC/e//FzvzqK/9+GnzPPPzvG/+Pb6ecJ+Bvgt9+1/zPwy7S7Z/w98L/Z/fad+O3u3f/Nc58/x98A/w/gh/vhfuCH++H+7fHbHf9dYv0X4NfAD/e/Qxruh/uBH+6H+4Ef7of7gR/uh/uBH+6H+4Ef7of7gR/uh/uBH+6H+4Ef7of7gR/uh/uBH+6H+4Ef7of7gR/uh/uBH+6H+4Ef7of7gR/uh/uBH+7fjfuPX4SOcP9L0fcn/kvC0yPMEjqdjnD/q9Rf/pL2bmDOoTcMwD7cX5x/Op35H0UX+iV0PzZw/5O8X6hLqeShQr2/jAgvhftfkPf5H027y0L36ajf3v57cP/pFrHYvqdjYM4456Ex12W4/1ki2jfw+wvj4+na/9vbfwfuP57x9w+mVxmA+ZznuEv8+uX4+9sZ+MGZZ786TuD+Z+Pvf3VmeT7nOe4S/+vd/3N+67+enI9w/0umXj6huaHfr85xSvCEM58XXXXdnH3e45dLg35z8+/jqpfQn27RrvEv1wNHA/e/JPvfor3Db3DP54X8V+Z/gL9/B/293O9fT6r3+M0bbrjt5n7/acX2Af4e7n/9fYfPxf+9DdB6x0/a/0BPwg8BP/BDwA/8EPADPwT8wA8BP/BDwA/8EPADP/ADP/ADP/D/D/DXTq2WaGcfB68Cj9qJXCjvjQ9LEfhXfEMahrQgbdc1VOvNw+Al8LCdaIwSte3oSxH412qG0fmFzVf4za/xmy/xm244F4F/nSBaNx8F3inC6CSP0Ad6rZyviXII5GBXGN8ErttJqDZLZerYW2FOh9foGi5SKwqG8mucBX5xP6dlndpxCK5NYzuSX9vUdkZReSTKKWl2MDO+DVy149A4DGGpbDJ/FMvnoR0D4bf03kYTRzpyRmPbAPyURMLYJms8HQSKXNxRyQb64AbK6IGYM34z418FSEs7CnVmGsalckUfbVtyPwHn5JOGhqu7dnJjW/kByacs9sNQxUFLJgqGEHsy99iGPJYUf3H/KkBa2lGoZqNfHypLwp/x87HQtH5qXe4GFzPwX/J/HNR8BmPZoC6EMBFM+uQFXxaiqwA7e2nnOZnE4aqyMcMt/sQnQd6MeQyRBgD4ZZK1ITHYrnb1jF8NsZa51ttIvIhsGDjl2FVARm5uZymFuSHPlSn5RBqRG/y5ddSKJgkK+6FVwM+pf2jbwRvd0Zud8TOdgWbY1LaeKNepHWIx9G2Av/15bueoo1gtlWkmbuNt8pkiVSXPhzabuk048ZSl2tZSR1Hu5oJ80LXhr9U2qlSZzMOAuW5H177qUpmWT0ubyyxT47z/wQjg7gxuuQE/BPzADwE/8EPAD/wQ8AP/i6V2iJ+f+dUPb/52/+1xVP1fbtzLDTbnv+wnPgjX3Wfj1452sPsT/DY+B793ZrobSVWb4D/Z/TpZG7UJbiI+1KIw5+fnXZDH7pN8RUdJ2dJiKkqdYM0kT8xj8NyvdRW1DvQqa3ZBURXnNHcWZvyyFlnX0rqsjRbY3AWfuA/6rULwcne0CnWXpZKrXUMNQjPHZFM+IPe7jmwevYuBPSoO1SE6r2i/O2+4mCkzOJ/UlAgUFTtfvOySsZ1N3qXKeHpVLvn5SyvU1pnSg6MGo6ypRGVdS2teLgtspsFJTkk/0qeSjNR0WUY7dS7wgRpKTDblE/DrFA3vGP0u+E3misSvjlKME3+9xLsm0QfvQ2DEE8U68qDlh7tBpRDocKF+kthfBxq0cw+q4JdoWdfS2phl5VRuoin9lD5LZqMt4n2gVS/4Ocaboj8BP+8376LNhF8X/OI82n+duKi7wGUKhZyrrvO+PGW3HR0YE+d+HgRayp42kR+/1OzopQddcr8u0Xldc+tyGPGCgr/0U/oU98+G0NTLjL/EeFM+BX9N2Z/e4mQkrxTnFXj0qqKQy5Y66xwXZcd9dlXOZsZBpldqwU+HiDnjp+QRxmXqjfW8rrm1IC4LaOpNpvRzxs/u75bJm8I6zfhlU/SH4Dc+5q4iYjkLfptzVAUeFYkfTQQUsSnHqaKiTIZ2rAwvjEbzAURtqzN+S/0t+AOVr9w/r2tuLRsgC3gzcj5IP3Of4v4pdcu5UxdzDCUmm+LdB+CXh7flmkedTyaq66shriAdaemo0uu0q++umvR1Zqh+d32llj6qS1Q/qK70OcabovQn4IeAH/gh4Ad+CPiBHwJ+4IeAH/gh4Ad+CPiBHwJ+4IeAH/ih3+FXYLKd1Ap/Jf8HFLSV6uoGv5pqDMB28OtJXeMn+0+HpoY2UXOYyPwX/MxfVVU14WeDH5Ka6c/4hT+0nZb/7O+A05B3CviBf7/6F+sLzYAaz7xBAAAAAElFTkSuQmCC"},8758:(e,t,a)=>{a.d(t,{Z:()=>r});const r=a.p+"assets/images/select-http-action-b22edace8e6e1551cdb461ac9ece815b.png"},41:(e,t,a)=>{a.d(t,{Z:()=>r});const r="data:image/png;base64,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"},7590:(e,t,a)=>{a.d(t,{Z:()=>r});const r="data:image/png;base64,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"},7366:(e,t,a)=>{a.d(t,{Z:()=>r});const r="data:image/png;base64,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"}}]); \ No newline at end of file diff --git a/public/tutorials/assets/js/514b5684.397af66c.js b/public/tutorials/assets/js/514b5684.397af66c.js deleted file mode 100644 index a92eee2..0000000 --- a/public/tutorials/assets/js/514b5684.397af66c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs_website=self.webpackChunkdocs_website||[]).push([[646],{3905:(e,t,r)=>{r.d(t,{Zo:()=>c,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=n.createContext({}),s=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},c=function(e){var t=s(e.components);return n.createElement(l.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,c=u(e,["components","mdxType","originalType","parentName"]),p=s(r),m=o,f=p["".concat(l,".").concat(m)]||p[m]||d[m]||a;return r?n.createElement(f,i(i({ref:t},c),{},{components:r})):n.createElement(f,i({ref:t},c))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=m;var u={};for(var l in t)hasOwnProperty.call(t,l)&&(u[l]=t[l]);u.originalType=e,u[p]="string"==typeof e?e:o,i[1]=u;for(var s=2;s{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>d,frontMatter:()=>a,metadata:()=>u,toc:()=>s});var n=r(7462),o=(r(7294),r(3905));const a={},i="Automate Data Reporting with Azure Functions and Power Automate",u={unversionedId:"Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/index",id:"Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/index",title:"Automate Data Reporting with Azure Functions and Power Automate",description:"Level: Intermediate",source:"@site/docs/Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/index.md",sourceDirName:"Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate",slug:"/Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/",permalink:"/MicrosoftCloud/tutorials/docs/Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"8. Next Steps & Final Words",permalink:"/MicrosoftCloud/tutorials/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/Next-Steps-Conclusion"},next:{title:"1. Install the Azure Functions Extension and Create a New Function",permalink:"/MicrosoftCloud/tutorials/docs/Automate-Data-Reporting-with-Azure-Functions-and-Power-Automate/Install-the-Azure-Functions-Extension-and-Create-a-New-Function"}},l={},s=[{value:"Pre-requisites",id:"pre-requisites",level:3},{value:"Technologies used in this tutorial include",id:"technologies-used-in-this-tutorial-include",level:3}],c={toc:s},p="wrapper";function d(e){let{components:t,...a}=e;return(0,o.kt)(p,(0,n.Z)({},c,a,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"automate-data-reporting-with-azure-functions-and-power-automate"},"Automate Data Reporting with Azure Functions and Power Automate"),(0,o.kt)("p",null,(0,o.kt)("strong",{parentName:"p"},"Level"),": Intermediate"),(0,o.kt)("h1",{id:"introduction"},"Introduction"),(0,o.kt)("p",null,"In this tutorial you'll learn how to migrate a local Node.js script to Azure Functions using Visual Studio Code so that data can be retrieved more easily for reporting purposes. To automate calling the API, you'll learn how to setup a Power Automate flow, call the Azure Function, and store the data in Excel Online."),(0,o.kt)("p",null,"Here's an overview of the application solution. Power Automate is used to setup a recurring action that calls out to Azure Functions, retrieves JSON data, parses it, extracts the desired values, and stores the data in Excel Online (note that many other storage options could be chosen)."),(0,o.kt)("p",null,(0,o.kt)("img",{alt:"Power Automate and Azure Functions Flow",src:r(1571).Z,title:"Power Automate and Azure Functions Flow",width:"1295",height:"888"})),(0,o.kt)("h3",{id:"pre-requisites"},"Pre-requisites"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://nodejs.org"},"Node")," - Node LTS"),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://learn.microsoft.com/devops/develop/git/install-and-set-up-git"},"git")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://code.visualstudio.com/"},"Visual Studio Code")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions"},"Azure Functions Extension for VS Code")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://azure.microsoft.com/free/search"},"Azure subscription")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://developer.microsoft.com/microsoft-365/dev-program"},"Microsoft 365 developer tenant"))),(0,o.kt)("h3",{id:"technologies-used-in-this-tutorial-include"},"Technologies used in this tutorial include"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Node.js"),(0,o.kt)("li",{parentName:"ul"},"Azure Functions"),(0,o.kt)("li",{parentName:"ul"},"GitHub"),(0,o.kt)("li",{parentName:"ul"},"Power Automate"),(0,o.kt)("li",{parentName:"ul"},"VS Code")))}d.isMDXComponent=!0},1571:(e,t,r)=>{r.d(t,{Z:()=>n});const n=r.p+"assets/images/scenario-overview-d540c31e34fab4c7d60b6468d93fc19d.png"}}]); \ No newline at end of file diff --git a/public/tutorials/assets/js/7287d4d4.28010aa7.js b/public/tutorials/assets/js/7287d4d4.28010aa7.js deleted file mode 100644 index fa3943f..0000000 --- a/public/tutorials/assets/js/7287d4d4.28010aa7.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs_website=self.webpackChunkdocs_website||[]).push([[656],{5745:e=>{e.exports=JSON.parse('{"name":"docusaurus-plugin-content-pages","id":"default"}')}}]); \ No newline at end of file diff --git a/public/tutorials/assets/js/7582a19b.f8200aa8.js b/public/tutorials/assets/js/7582a19b.f8200aa8.js deleted file mode 100644 index 1cb2ee4..0000000 --- a/public/tutorials/assets/js/7582a19b.f8200aa8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs_website=self.webpackChunkdocs_website||[]).push([[752],{3905:(t,e,r)=>{r.d(e,{Zo:()=>c,kt:()=>h});var n=r(7294);function a(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function i(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function o(t){for(var e=1;e=0||(a[r]=t[r]);return a}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(a[r]=t[r])}return a}var l=n.createContext({}),p=function(t){var e=n.useContext(l),r=e;return t&&(r="function"==typeof t?t(e):o(o({},e),t)),r},c=function(t){var e=p(t.components);return n.createElement(l.Provider,{value:e},t.children)},d="mdxType",u={inlineCode:"code",wrapper:function(t){var e=t.children;return n.createElement(n.Fragment,{},e)}},m=n.forwardRef((function(t,e){var r=t.components,a=t.mdxType,i=t.originalType,l=t.parentName,c=s(t,["components","mdxType","originalType","parentName"]),d=p(r),m=a,h=d["".concat(l,".").concat(m)]||d[m]||u[m]||i;return r?n.createElement(h,o(o({ref:e},c),{},{components:r})):n.createElement(h,o({ref:e},c))}));function h(t,e){var r=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var i=r.length,o=new Array(i);o[0]=m;var s={};for(var l in e)hasOwnProperty.call(e,l)&&(s[l]=e[l]);s.originalType=t,s[d]="string"==typeof t?t:a,o[1]=s;for(var p=2;p{r.r(e),r.d(e,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>p});var n=r(7462),a=(r(7294),r(3905));const i={},o="Take a Break Reminder App",s={unversionedId:"Take-A-Break-Reminder-App/index",id:"Take-A-Break-Reminder-App/index",title:"Take a Break Reminder App",description:"Reminder App",source:"@site/docs/Take-A-Break-Reminder-App/index.md",sourceDirName:"Take-A-Break-Reminder-App",slug:"/Take-A-Break-Reminder-App/",permalink:"/MicrosoftCloud/tutorials/docs/Take-A-Break-Reminder-App/",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Build Productivity Apps by using Microsoft Graph Toolkit",permalink:"/MicrosoftCloud/tutorials/docs/Build-Productivity-Apps-By-Using-Microsoft-Graph-Toolkit/"},next:{title:"1. Configuring an Application in Azure Active Directory",permalink:"/MicrosoftCloud/tutorials/docs/Take-A-Break-Reminder-App/Create-An-Application-Azure-Active-Directory"}},l={},p=[{value:"Introduction",id:"introduction",level:2},{value:"What Microsoft Graph is?",id:"what-microsoft-graph-is",level:2},{value:"Prerequisites",id:"prerequisites",level:2},{value:"Kit - Getting Started",id:"kit---getting-started",level:2},{value:"Sessions",id:"sessions",level:2}],c={toc:p},d="wrapper";function u(t){let{components:e,...i}=t;return(0,a.kt)(d,(0,n.Z)({},c,i,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"take-a-break-reminder-app"},"Take a Break Reminder App"),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Reminder App",src:r(3925).Z,title:"Reminder App",width:"1280",height:"720"})),(0,a.kt)("h2",{id:"introduction"},"Introduction"),(0,a.kt)("p",null,"In this workshop, you will learn how to build a simple application with Next.js and Microsoft Graph that will send an alert to the user each 60 minutes, if the user status is set to ",(0,a.kt)("inlineCode",{parentName:"p"},"Available"),". If so, the user will need to take a break."),(0,a.kt)("h2",{id:"what-microsoft-graph-is"},"What Microsoft Graph is?"),(0,a.kt)("p",null,"Microsoft Graph is an API that allows you to access data and services from Microsoft 365. You can use the Microsoft Graph API to build applications that interact with millions of users around the world, accessing data in a consistent way across the Microsoft 365 ecosystem."),(0,a.kt)("h2",{id:"prerequisites"},"Prerequisites"),(0,a.kt)("p",null,"To follow this workshop, you will need:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},(0,a.kt)("a",{parentName:"strong",href:"https://code.visualstudio.com/"},"Visual Studio Code"))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},(0,a.kt)("a",{parentName:"strong",href:"https://www.microsoft.com/en-us/microsoft-teams/download-app?rtc=2"},"Microsoft Teams"))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},(0,a.kt)("a",{parentName:"strong",href:"https://developer.microsoft.com/en-us/microsoft-365/dev-program"},"Microsoft 365 Developer Program"))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},(0,a.kt)("a",{parentName:"strong",href:"https://developer.microsoft.com/en-us/graph"},"Microsoft Graph"))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},(0,a.kt)("a",{parentName:"strong",href:"https://github.com/microsoftgraph/msgraph-sdk-javascript"},"Microsoft Graph JavaScript SDK"))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},(0,a.kt)("a",{parentName:"strong",href:"https://nodejs.org/en/"},"Node.js 16.x"))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},(0,a.kt)("a",{parentName:"strong",href:"https://nextjs.org/learn/foundations/about-nextjs"},"Next.js")))),(0,a.kt)("p",null,"Beyond that, you will need a ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"https://developer.microsoft.com/en-us/microsoft-365/dev-program"},"Microsoft 365 Developer Program account")),". "),(0,a.kt)("p",null,"If you have doubt how to create it, ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"https://www.youtube.com/watch?v=JvWLgirC8xs"},"you can watch this video")),". It explains how to create the account. This account it's free. "),(0,a.kt)("h2",{id:"kit---getting-started"},"Kit - Getting Started"),(0,a.kt)("p",null,"If you not completed the previous workshop, ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"https://github.com/glaucia86/kitstarter-msgraph-nextjs"},"you can download the kit from this link")),". This kit contains the code that you will need to complete this workshop. Thus, is not necessary to create the project from scratch."),(0,a.kt)("h2",{id:"sessions"},"Sessions"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Session"),(0,a.kt)("th",{parentName:"tr",align:null},"Topics"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"td"},"Introduction")),(0,a.kt)("td",{parentName:"tr",align:null},"Here you will have an introduction to the workshop.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"td"},"1. Configuring an Application in Azure Active Directory")),(0,a.kt)("td",{parentName:"tr",align:null},"Here you will learn how to create an application in AAD and configure the necessary permissions so that the application can access the user's data.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"td"},"2. Installing dependencies from the Kit Get Started")),(0,a.kt)("td",{parentName:"tr",align:null},"In this session we will install the dependencies from the kit get started.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"td"},"3. Changing ","[...nextauth]",".ts file")),(0,a.kt)("td",{parentName:"tr",align:null},"In this session we will change the ",(0,a.kt)("inlineCode",{parentName:"td"},"nextauth.ts")," file. This file is responsible for configuring the NextAuth.js library.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"td"},"4. Developing the GetPresence API")),(0,a.kt)("td",{parentName:"tr",align:null},"In this session we will be developing the ",(0,a.kt)("inlineCode",{parentName:"td"},"GetPresence")," API. This API will be responsible for getting the presence of the user who is logged in.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"td"},"5. Important Changes in the Reminder Page")),(0,a.kt)("td",{parentName:"tr",align:null},"In this session, we will make some important changes in the ",(0,a.kt)("inlineCode",{parentName:"td"},"Reminder")," page.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"td"},"6. Creating the Interface file for JWT")),(0,a.kt)("td",{parentName:"tr",align:null},"In this session we will create an interface file for our application. This file will be responsible for configuring the JWT token that will be used in our application.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("strong",{parentName:"td"},"7. Next Steps & Final Words")),(0,a.kt)("td",{parentName:"tr",align:null},"And finally what is the next steps and some important links and resources.")))))}u.isMDXComponent=!0},3925:(t,e,r)=>{r.d(e,{Z:()=>n});const n=r.p+"assets/images/reminder-862328564c1bd3d3f6a3c10553c0448d.gif"}}]); \ No newline at end of file diff --git a/public/tutorials/assets/js/7e775839.94fadffe.js b/public/tutorials/assets/js/7e775839.94fadffe.js deleted file mode 100644 index a85d7d8..0000000 --- a/public/tutorials/assets/js/7e775839.94fadffe.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs_website=self.webpackChunkdocs_website||[]).push([[896],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>f});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(n),m=o,f=u["".concat(l,".").concat(m)]||u[m]||d[m]||a;return n?r.createElement(f,i(i({ref:t},p),{},{components:n})):r.createElement(f,i({ref:t},p))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:o,i[1]=s;for(var c=2;c{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>d,frontMatter:()=>a,metadata:()=>s,toc:()=>c});var r=n(7462),o=(n(7294),n(3905));const a={title:"7. Important changes in the Admin & Reminder Pages",sidebar_position:1},i=void 0,s={unversionedId:"Authentication-App-With-NextJs-And-Microsoft-Graph/Important-Changes-Admin-Reminder-Pages",id:"Authentication-App-With-NextJs-And-Microsoft-Graph/Important-Changes-Admin-Reminder-Pages",title:"7. Important changes in the Admin & Reminder Pages",description:"Finally, let's make some changes in the reminder.tsx and admin.tsx files. So, let's add the following code:",source:"@site/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/07-Important-Changes-Admin-Reminder-Pages.md",sourceDirName:"Authentication-App-With-NextJs-And-Microsoft-Graph",slug:"/Authentication-App-With-NextJs-And-Microsoft-Graph/Important-Changes-Admin-Reminder-Pages",permalink:"/MicrosoftCloud/tutorials/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/Important-Changes-Admin-Reminder-Pages",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"7. Important changes in the Admin & Reminder Pages",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"6. Creating the Configuration Files",permalink:"/MicrosoftCloud/tutorials/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/Creating-Configuration-Files"},next:{title:"8. Next Steps & Final Words",permalink:"/MicrosoftCloud/tutorials/docs/Authentication-App-With-NextJs-And-Microsoft-Graph/Next-Steps-Conclusion"}},l={},c=[],p={toc:c},u="wrapper";function d(e){let{components:t,...a}=e;return(0,o.kt)(u,(0,r.Z)({},p,a,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Finally, let's make some changes in the ",(0,o.kt)("inlineCode",{parentName:"p"},"reminder.tsx")," and ",(0,o.kt)("inlineCode",{parentName:"p"},"admin.tsx")," files. So, let's add the following code:"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"pages/admin.tsx"))),(0,o.kt)("details",null,(0,o.kt)("summary",null,(0,o.kt)("b",null,"pages/admin.tsx")),(0,o.kt)("br",null),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import { useState, useEffect } from 'react';\nimport { useSession } from 'next-auth/react';\nimport Layout from '../components/Layout/layout';\nimport AccessDenied from '../components/AccessDenied/access-denied';\n\nexport default function Page() {\n const { data: session } = useSession();\n const [content, setContent] = useState();\n\n useEffect(() => {\n const fetchData = async () => {\n const res = await fetch('/api/examples/admin-protected');\n const json = await res.json();\n if (json.content) {\n setContent(json.content);\n }\n };\n\n fetchData();\n }, [session]);\n\n if (!session) {\n return (\n \n \n \n );\n }\n\n return (\n \n

Admin Page

\n

Welcome, {session.user?.name}!

\n

\n {content ?? '\\u00a0'}\n

\n
\n