Forem: Waldek Mastykarz

Join us for Hack Together: Microsoft Graph and .NET

Waldek Mastykarz — Fri, 24 Feb 2023 07:10:19 +0000

Join us for Hack Together, our virtual hackathon to learn how to build powerful apps with Microsoft Graph and .NET. If you’re a beginning coder, a student, or an expert looking for an opportunity to learn a new skill, don’t miss this opportunity!

Hack Together is a virtual hackathon to get started building apps with Microsoft Graph and .NET. In this hackathon, you will kick-start learning how to build apps with Microsoft Graph – the API to access data and insights from Microsoft 365, and develop apps based on some of the most popular Microsoft Graph scenarios. You’ll also have a chance to win exciting prizes and meet Microsoft Graph and .NET Product Group Leaders, Cloud Advocates, MVPs and Student Ambassadors.

Hack Together will run online from March 1-15, 2023. Hear from our speakers – why you should join us. Register today!

🙋 Why join Hack Together and add Microsoft Graph to your skillset?

Millions of people across the globe use Microsoft apps in their personal lives, at school, and at work. Did you know that you can also access data behind the popular Microsoft apps such as Microsoft Teams, Calendar, Outlook, To-Do, Planner, and more?

Microsoft Graph is the gateway to access data and intelligence across Microsoft 365. It exposes hundreds of datasets to developers. Not only can you access the data, but also you can build your own apps on top of Microsoft 365 by accessing the available data with the power of Microsoft Graph. Here are a few examples of apps that you could build with Microsoft Graph:

See what your colleagues are working on
Organize your day with a quick overview of upcoming meetings
Get your tasks every morning at 9 am
Find meeting time and schedule a meeting for multiple attendees
Stay up to date with what’s going on around you through a personalized dashboard
Get a summary of unread messages

Imagine all the other scenarios you can build on the Microsoft ecosystem to boost productivity, collaboration, education, people, workplace intelligence, and more!

Learning how to build apps with Microsoft Graph is a critical skill to work across Microsoft technologies. Throughout Hack Together, we will help you upskill with Microsoft technologies and ecosystem by learning and building apps with Microsoft Graph.

🦒 Prerequisites to participate in Hack Together

During Hack Together, you’ll learn hands-on how to build .NET apps connected to Microsoft Graph. Here’s the list of a few things you’ll need to get started.

⚙️ How does Hack Together work?

Hack Together includes self-paced learning, connecting with experts and other participants on GitHub Discussions, and attending live sessions.

Live sessions 📺

We’ll open the virtual hackathon on March 1, 2023, with a keynote by Yina Arenas, Head of Product for Microsoft Graph and Scott Hanselman, Partner Program Manager in Developer Division. Join us live to learn why .NET and Microsoft Graph are a great combination for building apps for work and school.

Throughout Hack Together, we’ll stream more sessions by Microsoft experts and MVPs to show you what you can achieve with Microsoft Graph and .NET. We’ll close by announcing the winners of the hackathon.

For the schedule and more information about the sessions, check out our GitHub repo.

Self-paced learning 📚

If you’re just starting, Microsoft Graph and .NET might feel overwhelming. We hear you! Use our self-paced learning materials to learn about Microsoft Graph and .NET.

Connect with experts on GitHub Discussions 💬

An answer is just one question away. When you need help, don’t hesitate to ask questions in the GitHub Discussion for this hack. Our experts will always be there to help you and answer your questions.

🦾 What’s the hack?

During the hackathon you’ll be working on your own .NET app connected to Microsoft Graph. Any type of app qualifies as long as it’s built on .NET and connected to Microsoft Graph. If you need inspiration, check out the list of top Microsoft Graph scenarios.

When you’re ready, submit your app in the hackathon’s repo before March 15, 2023, so we can check it out. All hackathon participants who submit an app will receive a digital badge. On addition, the winners selected will receive the following exciting prizes (up to 4 individuals if submitting as a team, prizes for each person on the team):

🥇 First prize winner:
- an Xbox,
- $200 gift card
- $100 Azure credit
- a digital Credly badge
🥈 Second prize winner:
- $200 gift card
- $100 Azure credit
- a digital Credly badge
🥉 Third prize winner:
- $100 Azure credit
- a digital Credly badge

You can participate by yourself or as a team with your colleagues!

We’re so excited for you to Hack Together with us and build cool .NET apps with Microsoft Graph. Share your journey throughout the hack on social with the #HackTogether hashtag. Let us know if you have any questions. Our team is always here to help you! Follow us on Twitter to stay up to date on our latest news and announcements.

Will your app fail when throttled?

Waldek Mastykarz — Mon, 12 Dec 2022 09:33:01 +0000

On a tenant of one, your app never fails. Calling Microsoft Graph and other APIs on Microsoft 365 just works. But when it gets used at scale in production, only then you get to see if you built it correctly.

When you build a great application, and it gets widely adopted, it's used a lot. Depending on the size of your organization, your app might be used by hundreds or thousands of simultaneous users, issuing even more requests to Microsoft Graph and other APIs. Microsoft Graph can handle a lot, but even it has its limits, and when you reach them, by calling Graph APIs too often, instead of a response with data, you'll get errors like 429 Too Many Requests. You're throttled.

Throttling is temporary. It's a mechanism to help servers resume regular service operation. By instructing clients to back off for a bit, servers hosting cloud APIs get a chance to get back to normal operation. That's the good news. The bad news is, that, unless you use an SDK that does it for you, you need to handle throttling yourself.

The problem with throttling is that it's elusive. It occurs only in certain conditions. This makes it really hard to test how your app will react when throttled: will it back off and wait as instructed, or will it break with an exception?

This is exactly why we built the Microsoft Graph Developer Proxy: a tool to help you test how your apps respond to API errors. Seeing is believing for a reason. With the Graph Developer Proxy, you no longer need to hope for the best. You can verify, even on your tenant of one, how your app will react when suddenly Graph APIs will return errors.

🙋‍♂️ Download the Graph Developer Proxy, test your apps, and I'm looking forward to hearing what you learned.

PS. You can use Microsoft Graph Developer Proxy with any type of app: client-side apps running in the browser or back-end services running on a server.

Find a meeting time and schedule a meeting on Microsoft 365

Waldek Mastykarz — Tue, 01 Nov 2022 07:44:59 +0000

Many work apps need the ability to schedule a meeting with others in their organization. Here's how to do it for apps connected to Microsoft 365.

Work apps need work data

Work apps serve a specific purpose: they help you track projects, follow orders or manage resources. But rarely do they contain all the information that users need to complete their work. Typically, information about people, their calendars, or communication is stored elsewhere, like in Microsoft 365. And that's a shame because completing a task requires users to switch between different apps, which is detrimental to their productivity. Unless of course, you bring work data into your work app.

Find a meeting time and schedule a meeting on Microsoft 365

A common scenario for work apps is to schedule a meeting with others in the organization. While it sounds trivial, the app must be able to access attendees' calendars, find a suitable meeting time and schedule the meeting. And that's where Microsoft Graph comes in.

Recently I published an article on freeCodeCamp that shows you how to build an app connected to Microsoft 365 that can find a meeting time and schedule a meeting.

The app shows you how to make the best use of features available in the Microsoft Graph Toolkit and Microsoft Graph to build a UI that you could integrate with another app.

Check it out, and I'm looking forward to hearing what you think!

Show upcoming meetings for a Microsoft 365 user with Microsoft Graph Toolkit

Waldek Mastykarz — Mon, 31 Oct 2022 08:58:59 +0000

Recently, I showed you how you can build in under 10 minutes a simple personal assistant that shows users meetings they have left for the day. Here's an even easier way to do it using the Microsoft Graph Toolkit.

Show upcoming meetings for a Microsoft 365 user

Showing upcoming meetings is a common scenario when integrating Microsoft 365 in work applications. Using Microsoft Graph, your app can connect to Microsoft 365 and access a user's calendar. By building a specific query, you can retrieve meetings between now and the end of the day.

Recently, I walked you step by step how to complete this scenario in under 10 minutes using the Microsoft Graph JavaScript SDK. But there's an even easier way to do it using the Microsoft Graph Toolkit.

The easiest way to connect to Microsoft 365

Microsoft Graph Toolkit (MGT) is a set of components and authentication providers connected to Microsoft 365. MGT takes away the complexity of implementing authentication, loading data from Microsoft Graph, and showing it in your app. And if anything goes wrong, it also properly handles exceptions. Microsoft Graph Toolkit's components are highly customizable so that you adjust them to your app.

A quick comparison: signing in to your app

To understand the benefits of using Microsoft Graph Toolkit, let's have a look at an example: let users sign in to your app using their Microsoft 365 account.

Typically, you'd need code similar to the following:

<html>
<head>
  <title>Upcoming meetings</title>
  <script src="https://alcdn.msauth.net/browser/2.28.3/js/msal-browser.min.js"></script>
</head>
<body>
  <h1>Upcoming meetings</h1>
  <div id="auth"></div>
  <script>
    (() => {
      const scopes = ['Calendars.Read'];
      const msalConfig = {
        auth: {
          clientId: '021aa7bb-9aaa-4185-92ad-c7b75a7fb9d2'
        }
      };
      const msalClient = new msal.PublicClientApplication(msalConfig);

      function render() {
        msalClient
          .handleRedirectPromise()
          .then(response => {
            const accounts = msalClient.getAllAccounts();

            if (accounts.length === 0) {
              document.querySelector('#auth').innerHTML = '<button>Login</button>';
              document.querySelector('#auth button').addEventListener('click', login);
            }
            else {
              document.querySelector('#auth').innerHTML = '<button>Logout</button>';
              document.querySelector('#auth button').addEventListener('click', logout);
            }
          });
      }

      function login(e) {
        e.preventDefault();
        msalClient.loginRedirect({
          scopes
        });
      }

      function logout(e) {
        e.preventDefault();
        msalClient.logoutRedirect();
      }

      render();
    })();
  </script>
</body>
</html>

In comparison, here's the same functionality built using Microsoft Graph Toolkit:

<html>
<head>
  <title>Upcoming meetings</title>
  <script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
</head>
<body>
  <h1>Upcoming meetings</h1>
  <mgt-msal2-provider client-id="021aa7bb-9aaa-4185-92ad-c7b75a7fb9d2" scopes="Calendars.Read"></mgt-msal2-provider>
  <mgt-login></mgt-login>
</body>
</html>

See the difference? And we didn't even get to the good part yet: calling Microsoft Graph!

With Microsoft Graph Toolkit you can focus on building your app and solving problems for your customers. Microsoft Graph Toolkit takes care of the rest.

Show upcoming meetings with Microsoft Graph Toolkit

To give you a more complete comparison, I rebuilt the same scenario using Microsoft Graph Toolkit.

The best way to check out the app is to run the app locally by following the instructions in the README.

Because retrieving the data using MGT is so simple, I added some extra UI to differentiate between the different states of the app.

The MGT Agenda component, which I use to show the upcoming meetings offers different templates to customize the UI. When loading the data, I show a simple text message:

<mgt-agenda>
  <template data-type="loading">
    <div class="loading">Loading...</div>
  </template>
  <!-- trimmed for brevity -->
</mgt-agenda>

When there's no data to show, I take into account the fact that there might be no data because the user hasn't signed in to the app yet, or that the user might have no upcoming meetings:

<mgt-agenda>
  <template data-type="loading">
    <div class="loading">Loading...</div>
  </template>
  <template data-type="no-data">
    <div class="no-data" data-if="mgt.Providers.globalProvider.state === mgt.ProviderState.SignedIn">
      <!-- No upcoming meetings -->
    </div>
    <div class="no-data" data-else>
      <p>Sign in to view your upcoming meetings</p>
    </div>
  </template>
</mgt-agenda>

I use for this the conditional rendering capability in MGT.

To show upcoming meetings, for simplicity, I use the default template provided with the Agenda component.

Summary

Microsoft Graph Toolkit is a great way to build apps that connect to Microsoft 365. It takes away the complexity of connecting to Microsoft 365 and provides a set of components that you can use to build your app and bring in the data and insights from Microsoft 365. Because MGT components are highly customizable, you can seamlessly integrate them in your app.

Run the sample app locally and see for yourself how easy it is to build apps that connect to Microsoft 365 using Microsoft Graph Toolkit.

Show upcoming meetings for a Microsoft 365 user

Waldek Mastykarz — Mon, 24 Oct 2022 09:33:00 +0000

Learn how you can build a simple personal assistant in under 10 minutes that'll show a Microsoft 365 user the meetings they have left for the day.

Show upcoming meetings for a Microsoft 365 user

Recently, I published an article on freeCodeCamp that shows you how you can build in just 10 minutes a simple personal assistant that shows upcoming meetings for the signed-in user.

Showing upcoming meetings is a common scenario when integrating Microsoft 365 in work applications. It shows you how to get information from the user's calendar and check their availability for a particular time slot. And it's also a great way to get started with building apps on Microsoft 365.

The tutorial shows you the basics of setting up auth in a single-page app and using the Microsoft Graph JavaScript SDK to connect to the Microsoft Graph API. It also demonstrates working with calendar views and formatting dates.

Give it a try, and I'm looking forward to hearing what you think.

Reference sample: Single Page App connected to Microsoft 365

Waldek Mastykarz — Thu, 06 Oct 2022 09:19:59 +0000

When building apps connected to Microsoft 365, before you can bring in data from Microsoft 365, you need to set up authentication. Here's a reference sample of a Single Page App that shows how to do that.

Work apps need work data

Microsoft 365 is a popular set of applications that organizations across the world use to facilitate collaboration and communications. It's also a platform that you can use to build apps for work and streamline how people work together.

These apps can show up inside Microsoft 365, bringing information from line of business systems into the apps that people use every day. They can also be standalone web-, desktop-, and mobile apps that combine data and insights from Microsoft 365 with data from other systems.

No matter which type of app you choose to build, you need to start with connecting to Microsoft 365, which means you need to set up authentication.

Reference sample: Single Page App connected to Microsoft 365

Because you can build many types of apps connected to Microsoft 365, there are many ways to set up authentication. And if you're just starting building apps for Microsoft 365, it might not be quite clear for you what it is exactly you need and how to combine the different parts together.

To help you get started, I built a sample Single Page Application that shows you how to:

setup authentication with Microsoft 365 in a Single Page Application
let users sign in and -out with their Microsoft 365 accounts to your app
retrieve data from Microsoft 365 using Microsoft Graph
register your app with the Microsoft identity platform

The sample app is built using plain JavaScript, which lets you reuse the code in any JavaScript framework. In the repo, you'll find the app built in two ways, using immediately invoked function expressions (IIFE) and using ES modules (ESM). It's largely a matter of preference which one you choose to use, but I wanted to show you both approaches.

If you want to see how I built the app step by step, check out my recent article on freeCodeCamp.

Build your first Microsoft 365 app in 10 minutes

Waldek Mastykarz — Wed, 05 Oct 2022 09:45:36 +0000

Learning something new is often daunting, especially when it's something like developing for a new platform. But that doesn't have to be the case. Let me show you, how you can build your first Microsoft 365 app in just 10 minutes.

Building for a platform

Building for a platform isn't trivial. It comes with all kinds of specific knowledge you have to have like what tooling, SDKs, and APIs to use, how to integrate your app, and finally how to package and distribute it. And I haven't even mentioned auth.

It's a lot to learn, and it's easy to get overwhelmed. The trick is though, that you don't have to learn everything about everything at once. Often, you can start simple and build up from there.

Build your first Microsoft 365 app in 10 minutes

Recently, I published an article on freeCodeCamp that shows you how you can build your first Microsoft 365 app in just 10 minutes.

Sure, the app is simple and doesn't do much, but when building it, you'll learn the fundamental concepts of building apps on Microsoft 365. And after these 10 minutes, you'll have a functional app that works and retrieves data from Microsoft 365, and which you can use as a starting point for more complex apps.

Give it a try, and I'm looking forward to hearing what you think.

Redirect to a custom login page when securing your Angular app with MSAL

Waldek Mastykarz — Wed, 05 Oct 2022 09:39:53 +0000

Using MSAL Angular and MsalGuard is the easiest way to secure your Angular app with the Microsoft Identity Platform. But if you want to use a custom login page rather than redirecting users directly to Azure Active Directory, there's one thing you need to consider.

Secure your Angular app with the Microsoft Identity Platform

When you build Angular apps for your organization, you likely need to secure them. They shouldn't be available to just anybody, especially when they're accessible over the internet. Instead, people should sign in first, before they're allowed to access the app.

While you could add a rudimentary user management system to your app, it's rarely a good idea. It has nothing to do with the problem that your app is solving and it's extremely hard to do well. You need to consider managing user accounts, dealing with expired passwords, multi-factor authentication, not to mention more complex things like conditional access. It's not trivial, and like I just mentioned, it has nothing to do with the problem that your app is solving. On top of all that, you require people to create and manage yet another account.

If your organization uses Microsoft 365, you can use the Microsoft Identity Platform to secure your app. You get all of the user management features for free and your colleagues can use your app with the same account they use to access Outlook or Teams!

Secure your Angular app with the Microsoft Identity Platform using MSAL Angular

The easiest way to secure Angular apps with the Microsoft Identity Platform is by using the MSAL (Microsoft Authentication Library) Angular package. This package contains Angular-specific building blocks for implementing MSAL in your app.

To secure your Angular app using MSAL Angular, you'll need two building blocks: MsalGuard and the MsalRedirectComponents.

You add MsalGuard to your routes that require users to sign in. For example:

import { Routes } from '@angular/router';
import { MsalGuard } from '@azure/msal-angular';

const app_routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/customers' },
  { path: 'customers/:id', data: { preload: true }, loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule), canActivate: [MsalGuard] },
  { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule), canActivate: [MsalGuard] },
  { path: 'orders', data: { preload: true }, loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule), canActivate: [MsalGuard] },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: '**', pathMatch: 'full', redirectTo: '/customers' } // catch any unfound routes and redirect to home page
];

In this example all routes except /about require users to sign in.

Next, you need to add the MsalRedirectComponent which handles redirects from the Azure AD login page back to your app. The easiest way to do it is by adding an extra route mapped to the MsalRedirectComponent and not secured with MsalGuard:

import { Routes } from '@angular/router';
import { MsalGuard, MsalRedirectComponent } from '@azure/msal-angular';

const app_routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/customers' },
  { path: 'customers/:id', data: { preload: true }, loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule), canActivate: [MsalGuard] },
  { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule), canActivate: [MsalGuard] },
  { path: 'orders', data: { preload: true }, loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule), canActivate: [MsalGuard] },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: 'auth', component: MsalRedirectComponent },
  { path: '**', pathMatch: 'full', redirectTo: '/customers' } // catch any unfound routes and redirect to home page
];

With this configuration in place, if the user didn't sign in and they try to navigate to a route with the MsalGuard, MsalGuard will redirect them to the Azure AD login page.

This is all you need to do to secure your Angular app. But rather than redirecting people directly to Azure AD, you might want to show them a custom page first.

Redirect to a custom login page before redirecting users to Azure AD

In the previous example, when users tried to open a route secured with the MsalGuard, they were automatically redirected to the Azure AD login page. After signing in with their work account, they were redirected back to the route they requested initially. While this flow does its job, some might argue that it's not quite user-friendly. One moment people are in your app, and the other they're in Azure AD, without any additional information. To improve it, you might want to put a custom login page in between with some additional information on it and a login button that people use to start the login flow:

Your first idea to implement it would be to replace MsalGuard with a custom guard that checks if the user is signed in and redirect to the login page if they're not:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { InteractionStatus } from '@azure/msal-browser';
import { filter, Observable, of, switchMap } from 'rxjs';
import { AuthService } from '../services/auth.service';

@Injectable({ providedIn: 'root' })
export class CanActivateGuard implements CanActivate {
  constructor(private msalService: MsalService,
    private authService: AuthService,
    private router: Router,
    private msalBroadcastService: MsalBroadcastService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        switchMap(() => {
          if (this.msalService.instance.getAllAccounts().length > 0) {
            return of(true);
          }

          this.authService.redirectUrl = state.url;
          this.router.navigate(['/login']);
          return of(false);
        })
      );
  }
}

The custom guard subscribes to events raised by the MSAL broadcast service and checks if a user account is available in the MSAL service, which indicates that the user has signed in.

You'd update your route definitions to use your custom guard instead:

import { Routes } from '@angular/router';
import { CanActivateGuard } from './core/guards/can-activate.guard';
import { MsalRedirectComponent } from '@azure/msal-angular';

const app_routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/customers' },
  { path: 'customers/:id', data: { preload: true }, loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule), canActivate: [CanActivateGuard] },
  { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule), canActivate: [CanActivateGuard] },
  { path: 'orders', data: { preload: true }, loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule), canActivate: [CanActivateGuard] },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: 'auth', component: MsalRedirectComponent },
  { path: '**', pathMatch: 'full', redirectTo: '/customers' } // catch any unfound routes and redirect to home page
];

Unfortunately, this setup doesn't work quite as you would've thought. If people tried to access a route that requires them to be signed in, they would get redirected to the login page as expected. After clicking the login button, they'd be redirected to the Azure AD login page. But after signing in with their work, when they're redirected back to your app, they wouldn't be signed in!

The reason for that is, that it's not the MsalRedirectComponent that's responsible for processing the response from Azure AD and signing the user into your app. It's the MsalGuard that does that, and since we've removed it, our app considers the authentication is still in progress. So how to solve it?

Combine `MsalGuard` with a custom guard

To redirect users to a custom login page and properly handle responses from Azure AD with the minimal amount of code , you need to use both your custom guard and the MsalGuard. Your custom guard will handle redirecting users to the login page, while MsalGuard will handle processing redirects from Azure AD and registering users as signed in with your app:

import { Routes } from '@angular/router';
import { CanActivateGuard } from './core/guards/can-activate.guard';
import { MsalGuard, MsalRedirectComponent } from '@azure/msal-angular';

const app_routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/customers' },
  { path: 'customers/:id', data: { preload: true }, loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule), canActivate: [CanActivateGuard, MsalGuard] },
  { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule), canActivate: [CanActivateGuard, MsalGuard] },
  { path: 'orders', data: { preload: true }, loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule), canActivate: [CanActivateGuard, MsalGuard] },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: 'auth', component: MsalRedirectComponent },
  { path: '**', pathMatch: 'full', redirectTo: '/customers' } // catch any unfound routes and redirect to home page
];

With both guards in place, your Angular app will offer users a better user experience clearly managing their expectations. And you'll be able to do it without having to re-implement any code that's already a part of MSAL Angular.

Summary

Using MSAL Angular is the easiest way to secure Angular apps with the Microsoft Identity Platform. Using the MsalGuard and MsalRedirectComponent you can specify which routes require users to sign in. By adding a custom guard, you can improve the user experience by redirecting users to a custom login page with additional information, before redirecting them directly to the Azure AD login page.

Big thanks to my colleague Wassim Chegham for helping me figure it out. The code in this article is from a sample app built by my other colleague Dan Wahlin.

Work apps need work data

Waldek Mastykarz — Fri, 19 Aug 2022 16:15:35 +0000

When you use apps for work, they rarely show you all the data that you need to get the full context of your work. And that's a shame because that information is often readily available to you, and could be integrated into your app.

It's all about the context

Say you're asked to build an app to manage projects for your organization. You build a web app, and host it in the cloud. Using the app you can store information about projects, customers, and project teams. Your organization uses another app for communication, and another for storing files, so rather than duplicate the functionality you point to existing apps for easy access.

Your app works, but is it convenient to use? Way too often you see your colleagues switch back and forth between your app, and other apps to get the full context of their work: information about the project, recent emails to the customer, project team communication, project files, and people who work on the project. What could you have done differently?

Bring work data into your app

Say, your organization uses Microsoft 365. The project information is stored in your app. To communicate with the project team, they need to go to Teams. To get the project files, they need to go to SharePoint. Communication with the customer is in email in Outlook, and information about people is accessible via Teams, Outlook, or SharePoint, depending on where they are at the moment. Instead of switching between all these different apps, why not bring the relevant data to your app?

Work apps need work data. Even though your app has a specific purpose, like managing projects, people using it will need more information to get the full context of their work. Projects are commissioned by a customer and run by a project team. While you work on projects, you create files, and communicate about them. The same goes for managing orders, or any other business scenario. So why should that work context be fragmented? Why not offer your colleagues all the information they need right where they need it: in your app?

If you use Microsoft 365, information about people, and files is readily available to you, and accessible using Microsoft Graph - the API for Microsoft 365. Instead of requiring your users to jump between the different apps, you can use Graph to bring contextually relevant information to your app. You can bring in emails sent to, and received from the customer. You can bring in project files that the project team has recently worked on. You can show information about the project team members, their location, and time zones right in your app. You can have all this information, and more available in the context of your app so that your colleagues spend more time working, and less time switching contexts.

The great thing about using Microsoft Graph is that it allows you to tap into data, and insights that are stored in Microsoft 365. You get to benefit from all functionality from Microsoft 365, such as storage, access management, or disaster recovery, and at the same time, can integrate it in a contextually relevant way with your app.

Bringing work data to your app doesn't need to come at the cost of a lot of extra work. If you're on Microsoft 365, use Microsoft Graph, and tap into organizational data, and insights stored in Microsoft 365 that are relevant to your app. Check out what's possible using Microsoft Graph.

Get notified in Microsoft Teams

Waldek Mastykarz — Tue, 12 Jul 2022 09:08:04 +0000

How many different apps do you use at work? How hard is it for you to stay up-to-date on what's going on in all of them? I bet the answers are a lot and hard. If your organization is on Microsoft 365, there's a better way, though. Hear me out.

If your organization is on Microsoft 365, you're probably using Microsoft Teams. Most likely you use it for chat and video calls. Probably you use it to communicate with your colleagues and work together on files. Did you know though, that you can extend Teams with custom apps? Did you know, that these apps can help you stay up-to-date on what's going on in your organization?

Since you're already using Microsoft Teams for work, why not turn it into a personal HQ and have it deliver all important updates to you? The easiest way to do it is using notification bots. Notification bots are nothing more than a piece of code running in the cloud. They communicate with services that you want to monitor and send you a message to Teams when there's something that you should know. Because notification bots are registered with Microsoft Teams, they can send you Adaptive Cards that communicate updates in a user-friendly way and go way beyond plain text.

Building notification bots isn't hard. Especially, if you're using the recently released Teams Toolkit. Teams Toolkit offers you a template to build a notification bot. All you have to do is add the code to monitor changes and send a message to Teams. Teams Toolkit will help you test the bot and deploy it, and you'll be able to do all that in minutes.

My colleague, Garry Trinder, made a video that shows you how to create a notification bot using Teams Toolkit step by step.

Have a look at it and give it a try yourself. Even if you might not need it right now, it's totally worth the few minutes you'll spend and show it to your colleagues.

Check out Garry's video
Build a notification bot using Teams Toolkit

When you're done, leave a comment and let me know how it went. Looking forward to hearing from you.

Easily show files as cards using Microsoft Graph Toolkit and hTWOo

Waldek Mastykarz — Wed, 05 Jan 2022 08:28:31 +0000

With a recent update to Microsoft Graph Toolkit, showing your files as cards became even easier. Check it out.

Show files as cards using Microsoft Graph Toolkit and hTWOo

Recently, I showed you how you can use the Microsoft Graph Toolkit to show files stored in Microsoft 365 as cards.

Using just a few lines of code, we built a simple Single-Page App secured with Azure Active Directory, added auth, to let users sign in with their Microsoft 365 account and retrieve their files. We did it using Microsoft Graph Toolkit, which is the easiest way to connect your app to Microsoft 365. Its authentication providers abstract away all of the auth code to a single line. And thanks to its components, you can easily show data from Microsoft 365 in your app.

To show files as cards, we used hTWOo, which is a community-driven implementation of the Fluent UI design language.

The complete sample app used in this article is available on GitHub.

Inconvenient showing file details

Each card we show in our app contains information about the file, such as its thumbnail, location, name, author and picture, and when the file was last modified. Not all of this information is available to us readily, which is why in our original solution, we had to add quite some JavaScript code to load the necessary information from Microsoft Graph. And this is where things got complicated.

Microsoft Graph Toolkit gives you simplicity. Instead of building requests, parsing responses, and handling errors, you add ready-to-use components that do all of that for you and allow you to focus on building your app. But you don't benefit much if you still need to write requests because you can't get all the data that you need, do you?

Easily show files as cards with Microsoft Graph Toolkit

Recently, Microsoft Graph Toolkit got updated, and if you were to build an app that shows files from Microsoft 365 as cards, you'd no longer need to write custom JavaScript. Here's the code you'd need instead:

<html>
<head>
  <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@n8d/htwoo-core/dist/css/htwoo.min.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <mgt-msal2-provider client-id="d43f076b-c6a6-4805-97be-f9ef969241c0" authority="https://login.microsoftonline.com/M365x61791022.onmicrosoft.com"></mgt-msal2-provider>
  <mgt-login></mgt-login>
  <mgt-file-list>
    <template>
      <h1>My files</h1>
      <div class="hoo-cardgrid">
        <div data-for="file in files" class="hoo-doccard" data-props="{{@click: openFile}}">
          <div class="hoo-cardimage">
            <div data-if="file.folder"><img src="./folder.jpg" alt=""></div>
            <mgt-get data-if="!file.folder" resource="/drives/{{file.parentReference.driveId}}/items/{{file.id}}/thumbnails/0/c320x180_crop/content" type="image" cache-enabled="true">
              <template data-type="loading">
                <div class="hoo-ph-squared"></div>
              </template>
              <template data-type="error">
                <img src="./otter.jpg" alt="">
              </template>
              <template data-type="no-data">
                <img src="./otter.jpg" alt="">
              </template>
              <template data-type="default">
                <img src="{{image}}" width="320" height="180" alt="">
              </template>
            </mgt-get>
          </div>
          <div class="hoo-cardlocation">
            <mgt-get resource="/drives/{{file.parentReference.driveId}}" cache-enabled="true">
              <template data-type="loading">
                <div class="hoo-ph-row"></div>
              </template>
              <template data-type="error">
                <div class="hoo-ph-row"></div>
              </template>
              <template data-type="default">
                {{name}}
              </template>
            </mgt-get>
          </div>
          <div class="hoo-cardtitle">{{file.name}}</div>
          <div class="hoo-cardfooter">
            <div class="hoo-avatar">
              <mgt-get resource="/users/{{file.lastModifiedBy.user.id}}/photo/$value" type="image" cache-enabled="true">
                <template data-type="loading">
                  <div class="hoo-ph-circle"></div>
                </template>
                <template data-type="no-data">
                  <div class="hoo-ph-circle hoo-avatar-img"></div>
                </template>
                <template data-type="default">
                  <img src="{{image}}" alt="" class="hoo-avatar-img" loading="lazy">
                </template>
              </mgt-get>
            </div>
            <div class="hoo-cardfooter-data">
              <div class="hoo-cardfooter-name">{{file.lastModifiedBy.user.displayName}}</div>
              <div class="hoo-cardfooter-modified">{{formatDate(file.lastModifiedDateTime)}}</div>
            </div>
          </div>
        </div>
      </div>
      <button class="hoo-button-primary" data-props="{{@click: loadMore}}">
        <div class="hoo-button-label">Load more</div>
      </button>
    </template>
  </mgt-file-list>
  <script src="script.js"></script>
</body>
</html>

Here's what's changed.

Load document thumbnail using mgt-get

Originally, we'd use custom JavaScript to load the document thumbnail from Microsoft Graph and add it to the template. Starting from Microsoft Graph Toolkit v2.3.1, we can load images using the Get component:

<mgt-get data-if="!file.folder" resource="/drives/{{file.parentReference.driveId}}/items/{{file.id}}/thumbnails/0/c320x180_crop/content" type="image" cache-enabled="true">
  <template data-type="loading">
    <div class="hoo-ph-squared"></div>
  </template>
  <template data-type="error">
    <img src="./otter.jpg" alt="">
  </template>
  <template data-type="no-data">
    <img src="./otter.jpg" alt="">
  </template>
  <template data-type="default">
    <img src="{{image}}" width="320" height="180" alt="">
  </template>
</mgt-get>

In the component, we're using 4 templates:

loading, which is rendered while the Get component is waiting on a response from Microsoft Graph
error, in case Microsoft Graph returned an error
no-data, this is a new template added to the Get component in Microsoft Graph Toolkit v2.3.1 which is rendered when the request returned no data. When you request an image, it's also rendered when the request returns a 404.
default, which is rendered when retrieving data succeeded

We can now use the Get component, not only to load the document's preview but also the avatar of the user who modified the file most recently.

Load file location

Another request for which we originally wrote custom JavaScript, was to retrieve the location where the file is stored. In this version, we replaced that code with another instance of the Get component:

<mgt-get resource="/drives/{{file.parentReference.driveId}}" cache-enabled="true">
  <template data-type="loading">
    <div class="hoo-ph-row"></div>
  </template>
  <template data-type="error">
    <div class="hoo-ph-row"></div>
  </template>
  <template data-type="default">
    {{name}}
  </template>
</mgt-get>

While the data is loading, we show a shimmer - an animated placeholder that communicates to users that content is loading. After we retrieved the file's location from Microsoft Graph, we show it instead.

With these modifications, the only piece of JavaScript that's left is:

document.querySelector('mgt-file-list').templateContext = {
  formatDate: date => {
    const d = new Date(date);
    return d.toLocaleString();
  },
  openFile: (e, context, root) => {
    window.open(context.file.webUrl, '_blank');
  },
  loadMore: (e, context, root) => {
    root.parentNode.renderNextPage();
  }
};

We use these custom functions to format the file modified date, open the select file in a new tab, and load more files. Notice, that we no longer need to manually call Microsoft Graph to retrieve data, process responses, and handle errors!

Summary

Microsoft Graph Toolkit is the easiest way to connect your app to Microsoft 365. Because it takes care of authentication and retrieving and showing the data in your app, you can focus on building your app. With a recent change to Microsoft Graph Toolkit, you can build even richer visualizations without having to write custom JavaScript and manually call Microsoft Graph.

If you're new to Microsoft Graph Toolkit, the best place to start is to follow the Microsoft Graph Toolkit learning path on MS Learn.

Extend Microsoft Viva Connections with your existing web development skills

Waldek Mastykarz — Wed, 03 Nov 2021 00:00:00 +0000

Microsoft Viva Connections is the gateway to the modern employee experience. As more and more organizations started working remotely/hybrid, they realized they need a better way to engage with their employees and keep them up-to-date. This is where Viva Connections comes in. It's a turn-key solution that's a part of Microsoft 365 and which aggregates information from different sources and puts them in front of employees on desktop and mobile.

Many organizations are very interested in Microsoft Viva and Viva Connections. Not only do they want to start using it, but also extend it to their needs to make it even more relevant to their employees. And as a developer that's a great opportunity that you should take advantage of.

You can use your existing web development skills and extend Viva Connections with custom functionality. Using Microsoft Graph you can bring data and insights from Microsoft 365 to people's fingertips. And by connecting to your custom APIs, you can bring in your line of business data as well!

To show you what's possible and how to get started, Microsoft created a learning path on MS Learn. It takes you step by step through the basics of Viva Connections, how you can extend it and how to get stared. If you like web development, this is perfect opportunity to do more with your skills. You can try it all for free with a Microsoft 365 developer tenant.

Forem: Waldek Mastykarz

Join us for Hack Together: Microsoft Graph and .NET

🙋 Why join Hack Together and add Microsoft Graph to your skillset?

🦒 Prerequisites to participate in Hack Together

⚙️ How does Hack Together work?

Live sessions 📺

Self-paced learning 📚

Connect with experts on GitHub Discussions 💬

🦾 What’s the hack?

Will your app fail when throttled?

Find a meeting time and schedule a meeting on Microsoft 365

Work apps need work data

Find a meeting time and schedule a meeting on Microsoft 365

Show upcoming meetings for a Microsoft 365 user with Microsoft Graph Toolkit

Show upcoming meetings for a Microsoft 365 user

The easiest way to connect to Microsoft 365

A quick comparison: signing in to your app

Show upcoming meetings with Microsoft Graph Toolkit

Summary

Show upcoming meetings for a Microsoft 365 user

Show upcoming meetings for a Microsoft 365 user

Reference sample: Single Page App connected to Microsoft 365

Work apps need work data

Reference sample: Single Page App connected to Microsoft 365

Build your first Microsoft 365 app in 10 minutes

Building for a platform

Build your first Microsoft 365 app in 10 minutes

Redirect to a custom login page when securing your Angular app with MSAL

Secure your Angular app with the Microsoft Identity Platform

Secure your Angular app with the Microsoft Identity Platform using MSAL Angular

Redirect to a custom login page before redirecting users to Azure AD

Combine MsalGuard with a custom guard

Summary

Work apps need work data

It's all about the context

Bring work data into your app

Get notified in Microsoft Teams

Easily show files as cards using Microsoft Graph Toolkit and hTWOo

Show files as cards using Microsoft Graph Toolkit and hTWOo

Inconvenient showing file details

Easily show files as cards with Microsoft Graph Toolkit

Load document thumbnail using mgt-get

Load file location

Summary

Extend Microsoft Viva Connections with your existing web development skills

Combine `MsalGuard` with a custom guard