❌

Vue normale

Il y a de nouveaux articles disponibles, cliquez pour rafraîchir la page.
À partir d’avant-hierWaldek Mastykarz
✇Waldek Mastykarz

#65 Find meeting times and schedule a meeting using Microsoft Graph

#65 Find meeting times and schedule a meeting using Microsoft Graph

In my last newsletter, I shared with you a few resources to help you get started building apps for Microsoft 365. If you work with an organization that uses Microsoft 365 for work, you've got a great opportunity to use your developer skills and bring data and insights stored on Microsoft 365 into your work apps.

Recently I've been working on another app that shows how you'd find meeting times and schedule a meeting for you and other people in your organization. This is a common scenario for work apps, and while it's available in Outlook, having it directly in the work app helps your colleagues stay in the flow of work.

📝 Check out the article I published about this scenario on freeCodeCamp.

📺 Here's also a recording from a recent community call where I showed the app in action.

👾 And if you're interested in digging into it some more, here's the code.

Remember, the best way to check the app out, is to see it running. Follow the setup steps in the readme and run it on your tenant.

I've got some more ideas for new demos that I'll be working on in the coming weeks, so stay tuned for more updates. Meanwhile, if you've got any questions, don't hesitate to reach out by leaving a comment.

✇Waldek Mastykarz

Find a meeting time and schedule a meeting on Microsoft 365

Find a meeting time and schedule a meeting on Microsoft 365

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!

✇Waldek Mastykarz

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

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

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.

Browser window with a web page showing upcoming meetings for a user

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.

Animated gif showing signing in to the app with a Microsoft 365 account and viewing upcoming meetings

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.

✇Waldek Mastykarz

#64 Build your first app for Microsoft 365

#64 Build your first app for Microsoft 365

Learning something new is often daunting, especially when it's something like developing for a new platform. Building for a platform comes with all kinds of specific knowledge like what tooling, SDKs, and APIs to use, how to integrate your app, and how to package and distribute it. The great thing is though, that platforms are multipliers that allow you to tap into an existing audience. Yes, you need to learn a lot to truly benefit from a platform, but the great thing is that you can start small and build your way up.

🥇 Get started

To help you get started, I recently published a tutorial that shows you how to build your first app for Microsoft 365 in under 10 minutes. Literally. This tutorial is a great place to start, either for yourself or the new developers you're onboarding in your organization.

Check it out: How to build your first app for Microsoft 365 in 10 minutes .

📆 First scenario: show upcoming meetings

After you've built your first app, you're ready to work on a simple scenario: show upcoming meetings for the signed-in Microsoft 365 user. It's not overly complex, but it teaches you a common scenario that you might need when integrating work apps with Microsoft 365.

Check out the tutorial: How to show upcoming meetings for a Microsoft 365 user.

🚀 Supercharge your app with Microsoft Graph Toolkit

Both tutorials use the Microsoft Graph JavaScript SDK which gives you the most robust way to connect to the Microsoft Graph API. If you're looking for an even quicker way to integrate with Microsoft Graph, you should check out the Microsoft Graph Toolkit: a collection of web components and auth providers to connect your apps to Microsoft 365.

See how I built the upcoming meetings apps using the Microsoft Graph Toolkit.

💯 Extra!

As a subscriber to my newsletter, I'll give you a sneak peek at something I've been working on in the last few days: a single-page app connected to Microsoft 365 that allows you to find a meeting slot for a few attendees who are on Microsoft 365.

Check it out here: Find meeting times and schedule a meeting using Microsoft Graph Toolkit.

It's similar to the functionality that you get in Outlook but which you could integrate into your work apps.

The best way to learn is to run these apps and see them in action!

If you're building apps for Microsoft 365, I'd love to hear about them. Leave a comment and I'm looking forward to hearing from you.

✇Waldek Mastykarz

Show upcoming meetings for a Microsoft 365 user

Show upcoming meetings for a Microsoft 365 user

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.

Browser window with a web page showing upcoming meetings for a Microsoft 365 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.

✇Waldek Mastykarz

Reference sample: Single Page App connected to Microsoft 365

Reference sample: Single Page App connected to Microsoft 365

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.

Types of apps that you can build on Microsoft 365 grouped into extensions and custom apps

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.

✇Waldek Mastykarz

Build your first Microsoft 365 app in 10 minutes

Build your first Microsoft 365 app in 10 minutes

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.

Browser window with a web page showing Microsoft 365 user profile information

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.

❌
❌