{"id":4818,"date":"2020-06-16T07:33:57","date_gmt":"2020-06-16T14:33:57","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=4818"},"modified":"2020-06-16T07:33:57","modified_gmt":"2020-06-16T14:33:57","slug":"building-a-windows-presentation-foundation-wpf-microsoft-teams-app","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/building-a-windows-presentation-foundation-wpf-microsoft-teams-app\/","title":{"rendered":"Building a Windows Presentation Foundation (WPF) Microsoft Teams App"},"content":{"rendered":"

Author: Alessandro Avila, a Microsoft Apps Consultant developer<\/p>\n

Today\u2019s guest blog post comes from Alessandro Avila, a Microsoft Apps Consultant developer, and his experiences with app development, cloud migration, and overall digital transformation at ABB \u2013 a global leader in robotics, power, heavy electrical equipment, and automation technology based in Europe.<\/em><\/p>\n

Introduction<\/h2>\n

Teams is the hub for teamwork in Microsoft 365 \u2013 bringing together people, chat, content, calls and apps in a central space for collaboration and productivity. Enterprises across the globe rely on the rich features provided by the platform to build powerful workspaces and provide valuable feedback to the Teams product group to further enhance those experiences. This post covers my recent experience with an enterprise customer, ABB \u2013 a global digital transformation leader, helping their marketing organization through their Teams adoption, as well as custom app solution development to address some of their process automation needs.<\/p>\n

ABB\u2019s marketing organization was an early adopter of Teams \u2013 and heavily used the Microsoft Planner app integration in Teams to organize activities and tasks in a systematic and structured fashion and assign them to staff across different divisions and geos. For those unfamiliar with the app, Microsoft Planner is a project management application that allows teams to create, assign and organize work visually to better facilitate teamwork and monitor progress. With the high usage of Teams and the Planner integration, our customer needed a solution that would be able to automate the capability of copying Planner plans (including tasks\/activities\/content) in bulk across different Teams teams \u2013 eliminating the time-consuming manual copy process that it was performing currently.<\/p>\n

In this post we\u2019ll walk you through our custom app solution demo we built for ABB to address their need and requirements. We\u2019ll cover knowledge areas spanning across Teams app development, Graph APIs, C#, and Azure.<\/p>\n

Planner app integration in Teams<\/h3>\n

Teams extends content and web services through \u2018apps\u2019<\/em> that enable one or more capabilities teams can use in their daily work for collaboration and productivity. You can take advantage of the many Microsoft and 3rd<\/sup>-party app integrations available in the Teams store or you can even build your own custom app for your organization or widely-available to the public.<\/p>\n

\"Screenshot<\/p>\n

With the Microsoft Planner app integration in Teams, teams can create custom plans, create tasks, and assign work item all within a Teams channel. Tasks are organized in Buckets (Kanban) by default and enhanced with contextual details (Task progress, Start Date, Due Date, Checklist) that fosters teamwork, collaboration, and productivity.<\/p>\n

\"Screenshot \"Screenshot<\/p>\n

 <\/p>\n

The Planner app integration in Teams, provides the ability to copy an existing Planner plan as a tab. However, there are a couple limitations which impact the user experience for these migration scenarios:<\/p>\n

    \n
  1. Provides only an \u2018intra-team\u2019<\/em> copy (i.e., you can create a copy of an existing plan only within the same Team where the source plan resides);<\/li>\n
  2. By selecting an existing plan and adding it as a tab, the copied plan is actually a pointer<\/strong> to the previous one: any changes made to the newly created plan would affect the source plan; in other words, it\u2019s a shallow copy<\/strong>, not a deep copy<\/strong>.<\/li>\n<\/ol>\n

    \"Screenshot<\/p>\n

    To address these limitations that was impacting our client\u2019s experience, we built a custom app solution (\u201cTeamsApp\u201d) which enables an inter-Teams<\/em> copy of Planner Plans, with full copy<\/strong> of underlying Buckets and Tasks and gives IT Admins a tool that can be used to set up tasks within a new team.<\/p>\n

    Prerequisites<\/h3>\n

    Before we dive into the demo, we\u2019ll walk through some of the prerequisites you\u2019ll need to complete.<\/p>\n

    We\u2019ll be leveraging Microsoft Graph APIs, so a Microsoft 365 tenant<\/strong> is needed. We recommend using a developer tenancy for this and you can get one if you register for the Microsoft 365 Developer Program here<\/a>.\u00a0 An Azure AD App<\/strong> needs to be registered in the Azure Portal, as well.<\/p>\n

    Having these set up will enable communication between \u2018TeamsApp\u2019 and the Microsoft Identity Platform of the specific tenant and establishes the information that it uses to get OAuth Access Tokens. Through the registered Azure AD App, the \u2018TeamsApp\u2019 can access Microsoft 365 organization resources.<\/p>\n

    Azure AD App Registration<\/h4>\n

    (For a detailed description, follow the steps explained in the Microsoft Docs<\/a><\/em>).<\/em><\/p>\n

      \n
    1. Sign into the Azure Portal with a Work or School \/ Personal Account.<\/li>\n
    2. If the specified account gives access to more than one tenant, select the desired tenant.<\/li>\n
    3. From the left-menu: Azure Active Directory -> App registrations -> New registration.<\/li>\n<\/ol>\n

      \"\" \"Azure<\/p>\n

      4. Fill in the mandatory fields:<\/p>\n

      a. Name<\/strong>: the app name (e.g.: \u201cTeamsApp<\/em>\u201d).<\/p>\n

      b. Supported account types<\/strong>: it depends on which accounts will access TeamsApp and Graph APIs through the AD v2.0 application. You can choose between:<\/p>\n

      i. (default) Accounts in this organizational directory<\/em> <yourOrgName>: this option maps to Azure AD only single tenant; select this option if you\u2019re building a line-of-business application;<\/p>\n

      ii. Accounts in any organizational directory<\/em>: this option maps to Azure AD only multi-tenant;<\/p>\n

      iii. Accounts in any organizational directory and personal Microsoft accounts<\/em> (e.g. Skype, Xbox, Outlook.com); this option maps to Azure AD multi-tenant and personal Microsoft accounts; this option targets the widest set of customers. Note: This was the option we used.<\/p>\n

      c. Redirect URI<\/strong>: it\u2019s URI AD will return the authentication response to, after successfully authenticating the user.<\/p>\n

      i. Select \u201cPublic client (mobile & desktop)<\/em>\u201d from the first dropdown;<\/p>\n

      ii. Set the value to \u201curn:ietf:wg:oauth:2.0:oob\u201d<\/em> in the textbox.<\/p>\n

      5. Click on Register<\/strong>.<\/p>\n

      \"App<\/p>\n

      6. On the application page, take note of the Application (client) ID<\/strong> field, we\u2019ll need it when it comes to properly setting the authentication properties in our app;<\/p>\n

      7. Since we are using NET<\/strong> as .NET authentication library (v4.9.0) to get tokens from the AD identity platform, we need to get back to our application and change the Redirect URI<\/strong> field.<\/p>\n

      8. From the Suggested Redirect URIs<\/strong> section, select the URI in the form:<\/p>\n

      msal<appclientID>:\/\/auth (MSAL only)<\/p>\n

      9. Take note of the new Redirect URI<\/strong> as well.<\/p>\n

      App Permissions<\/h4>\n

      Since \u2018TeamsApp\u2019 integrates with Microsoft Identity Platform, it follows an authorization model that gives users control over how data can be accessed; see Microsoft Docs<\/a> for more information about permissions and consent.<\/p>\n

      Specifying the app\u2019s permissions (or scopes), we have fine-grained control over data our APIs can access to perform their functions.<\/p>\n

      For our purposes, we need to setup two permissions:<\/p>\n

        \n
      1. Read.All: Sign in and read user profile<\/li>\n
      2. ReadWrite.All: Read and write all groups<\/li>\n<\/ol>\n

        Here are the permissions already granted for the demo AD App:<\/p>\n

        \"Permissions<\/p>\n

        Let\u2019s add a new permission:<\/p>\n

          \n
        1. Click on \u201cAdd a permission\u201d button;<\/li>\n
        2. Select \u201cMicrosoft Graph\u201d as Microsoft APIs, then Delegated permissions as type of permissions, since \u2018TeamsApp\u2019 needs to access the API as the signed-in user.<\/li>\n
        3. Look for \u201cGroup.ReadWrite.All\u201d, check it and click on Add permissions button.<\/li>\n<\/ol>\n

          \"Permissions<\/p>\n

          4. Since Admin consent is required for this permission, click on \u201cGrant Admin consent for Contoso\u201d.<\/p>\n

          \"Consent<\/p>\n

          The \u2018TeamsApp\u2019 Solution<\/h2>\n

          Solution Architecture<\/h3>\n

          We developed \u2018TeamsApp\u2019 with Visual Studio, and it contains the following two projects:<\/p>\n