MDEV30: Building modern enterprise-grade collaboration solutions with Microsoft Teams and SharePoint

Editor's Notes

• #2: Notes: This Ignite presentation was originally developed and delivered by Mike Ammerlaan. You can find a recording at: https://techcommunity.microsoft.com/t5/microsoft-ignite-the-tour-2019/building-modern-enterprise-grade-collaboration-solutions-with/m-p/907333
• #3: ER: Good afternoon and welcome to MDEV30, or how to build apps on Teams and SharePoint.
• #5: ER: Identity is the foundation of security, no matter where we are in this stack. Identity is also the foundation of personalization, the work we do, the content we touch, the people we work with, the messages we send, and our daily schedules -truly every meaningful interaction we have whether with other people, systems or content is rooted in identity. The Graph then represents the collection of these interactions, identities and objects. The Graph makes these things navigable and queryable, constrained only by the permissions on the objects themselves. Together, Microsoft’s Graph and Identity services composes what we call the Intelligent Cloud. Then we talk about building these as client experiences – empowering people in the contexts where they spend their workdays. We build apps and websites, some for end users, and some of which are packaged as app services that can be surfaced in SharePoint or Teams, or in client applications like Outlook and Excel. You might be asking why I lump Teams and SharePoint together – isn’t Teams a client app? And the answer is yes, it is, but Teams is very much a web app that makes it easy to surface what is ultimately served up by SharePoint – list, libraries and web parts are easily added into Teams as Tabs. If you’re building for SharePoint, you’re also building for Teams.
• #6: ER: All together, these appear to people as the intelligent intranet. If there is a theme to what Microsoft has invested in this past year it would be – the intelligent intranet. Project Cortex brings AI training to metadata population, Hub Sites + Home Sites are building blocks. Search now has a consistent experience wherever you are. And this intelligent intranet is simple, discoverable and engaging, and adaptable to the shape and purpose of any org.
• #7: ER: At the centre of this experience is SharePoint, which contains building blocks that more and more we’re able to reuse and repurpose across Microsoft 365. For those of you that are newer to SharePoint, sites let you share files, news, and data in the form of lists. They let you tell stories and create solutions with web pages, and deliver apps that solve business problems. Two Ignites ago MSFT unveiled SharePoint spaces, which let anyone create immersive, mixed reality experiences. And SharePoint is integrated with and across Microsoft 365, including into Teams. Shared content and solutions created with SharePoint can be delivered either on the intranet, in a browser, or right inside Teams.
• #8: ER: SharePoint has been evolving rapidly over the past 3 or 4 years. Every major aspect has been redesigned, rebuilt or updated to align with this more open, reusable architectural model, and to solve problems or remove constraints that we had in the past. Pages and content now render beautifully on any device, automagically. News was reworked to support syndication and aggregation across sites. Communication sites make it far easier to create great looking, engaging web pages. Hub Sites and Home sites give us new tools to aggregate, organize and navigate content while avoiding infinite subsite syndrome.
• #9: ER: When we look at SharePoint sites and pages, you can think of each of these components as either stored in, or originating from the Microsoft Graph. And all that content is rendered with controls built with the SharePoint Framework. Even with all the advances with the Power Platform, SharePoint Framework is still one of the most widely used ways to extend SharePoint experiences, and the community keeps on growing.
• #10: ER: This slide really represents the philosophy of the SharePoint Framework. It starts with being able to use the JavaScript frameworks you prefer, rather than forcing you into a single lane. Microsoft might use React a lot in its own components and demos, but if you prefer Knockout or AngularJS, you can bring that to SharePoint too. These frameworks will keep evolving, the landscape may be as different in 2 to 3 years as it was 3 years ago, but this flexibility helps us not only survive but to embrace and benefit from these trends.
• #11: ER: As ever, web parts are the building blocks of page design. Where they were once served by the hosting web server, they are now rendered client-side in your web browser. The basic philosophy of page design is that it should be at least as easy to compose a SharePoint web page as a Word document. DEMO: Edit the vacation calendar news page.
• #12: ER: Beyond web parts there are 3 areas you can tailor with SPFx – Every page provides zones at the top and bottom for you to customize. We’ve moved away from the model where you can customize any part of a page, so that both your customizations and what Microsoft builds can both easily survive upgrades. You can add options to menus, like the drop down menu that appears for files in a document library. You can also change the way that fields work, and build new field types with your own javascript renderings.
• #13: Now when we say SharePoint Framework that includes many things. Like the .NET Framework and others before it, the dev experience also includes the build process & toolchain, as well packaging & deployment, and even the user experience you’re creating is supported by the way that SharePoint pages and menus work. Every page has ways to optimize the Javascript libraries being called so you’re not loading 6 copies of JQuery. Every page provides context and site data APIs to make it easy to retrieve the information you’re most likely to either render, or use to query the Graph. For packaging and deployment, we’re able to package solutions and then manage solutions in the App Catalog. And while the default is to deploy tenant-wide, you can also create site-scoped app catalogs to target your customizations into a single site collection. Any shared resources like script libraries are automatically distributed by Microsoft’s CDN network improving load times, with security options so you’re not forced to share custom libraries with the world. During the build, Microsoft uses a number of popular tools like Yeoman, which now has scaffolding for the most popular SharePoint projects.
• #14: Generate a web part with yeoman - don’t wait for it to finish unless it’s quick, open a pre-built WP instead Open a WP project with VS Code Gulp serve the WP Open the workbench, add the webpart
• #15: DEMO: Show the templates in the Look Book Show the installed template in a tenant (The Landing)
• #16: ER: Teams, right back to the preview was designed to be extensible. Basically anywhere you see a menu, there’s probably a way to customize it. In the activity feed you can implement link unfurling so if someone pastes a link you can get a rich preview for it – think YouTube previews and the like.
• #17: MA: Take Trello. We launched the Trello integration for Teams some time back, but the beauty of the Trello integration is that – with Atlassian and their partners – we’ve taken a project management application… (click) and turned it into a connector, where you get beautiful interactive cards sent to you in Teams channels when a Trello card, relevant to you, has been created, modified or completed and then you can have a conversation with your colleagues around that card. We also surface Trello as a 1-1 bot, where you can interact with your Trello boards and complete a variety of actions, with Trello. Finally, Trello also surfaces in it’s original, beautiful form inside a Teams channel tab, like you see there on the far right, where you can interact with Trello as you would inside the Trello app or via the browser of your choice.
• #18: ER: The best place to start is a Teams tab It’s just a web page, and it’s as easy as bringing in a page you’ve already built. If you attended MDEV10 this morning, one of the demos from that session was (or should have been) building a tab.
• #19: ER: [Rest of the slides are fairly self-explanatory.]
• #20: Package the WP already built Open the App Catalog and upload the WP Synch to Teams Add the WP as a Teams tab
• #23: ER: [Review the parts] The images on the right show the sort of interaction you can build into a bot – it doesn’t need to only be an all-text Q&A session
• #24: ER: So the first thing we need to do is create an App Registration – this is basically a recognized container for my bot app.
• #25: ER: On this page we give the application a name
• #26: ER: And once we have the registration, we create a secret. The registration gives us an App ID, and the secret gives us a password, and combined these will be the credentials used to reach our bot app.
• #27: ER: There my secret is created
• #28: ER: Now that we’ve registered our App, we create the Web App itself using the Web App Bot template.
• #29: ER: Most of the setup here is pretty straightforward. I do have a choice of bot templates, these will give me a Hello World bot in the flavor I choose.
• #30: ER: And at the bottom, we find a place to plug in the values from our App Registration. That’s the wire-up.
• #31: ER: And when you’re done, you’ll have a running Web Bot App.
• #32: ER: Next we open up the new Web Bot App and connect it to Channels. You can connect your bots to many platforms including Slack. But here we want Teams.
• #33: ER: When we press Save we’ll then get a link to our own Teams instance where we can start testing our brand new bot. This is the point where if you want the bot to do anything interesting, you’ll write some code.
• #34: ER: Then we move into Teams and create an App manifest for the bot. [Show how to get to the App Studio app in the left rail] In a way this is like when we upload a WP into SharePoint’s app catalog, Teams just does it this way for native Teams apps like bots.
• #36: ER: This page captures the same sort of properties you might provide in an app or WP manifest.
• #37: ER: We’ve declared this will be a bot, so now we get to bot-specific settings like permissions and scope within the Team. Note that your bot needs to be built to support these scopes, by default only Team scope will be enabled.
• #39: ER: [MA opens up the source here for his Teams Coach bot. Instead, run through using the QnAMaker.ai wizard to generate a KB-style bot. Discuss the benefits of having the wire-up done for you.]
• #40: MA: SharePoint sites are the building blocks of the modern intranet. You can create all of these experiences with SharePoint. And with the innovations we’ve brought to SharePoint over the last three years, you can build sites in minutes, not months, that are fast, beautiful, and natively mobile. [CLICK TO BUILD] For those of you that are newer to SharePoint, sites let you share files, news, and data in the form of lists. They let you tell stories and create solutions with web pages, and deliver apps that solve business problems. And last year we unveiled SharePoint spaces, which in 2019 will let anyone create immersive, mixed reality experiences. And SharePoint is integrated with and across Microsoft 365. In another session we cover integration with Microsoft Teams, so that shared content and solutions created with SharePoint can be delivered either on the intranet, in a browser, or right inside Teams. [CLICK TO BUILD] In this session, as we look at building employee experiences for your organization, we’ll see how SharePoint integrations with Yammer and Stream drive engagement and effective communication and learning.
• #42: MA: MS 365 dev training: It has modules for both Beginner and Intermediate. Topics include Microsoft Graph, Microsoft Identity, Microsoft Teams, SharePointFramework, Office Add-ins New modules are added into Microsoft Learn every quarter. (by Dec 2019: additional 3 Graph, 2 Identity, 1 Teams, 1 SP; by Mar 2020: additional 2 Graph, 2 Identity, 3 Teams, 8 SP, 5 Office add-ins) You can learn all modules at self-pace, listen to recordings, test your knowledge, track your learning progress, earn badges Microsoft 365 developer certification Microsoft continues to invest in role-based training and certifications to meet market demand, expanding its certification portfolio with new Microsoft 365 Certifications to cover a range of skills and concepts needed for developer job role. The new Microsoft 365 Certified: Developer Associate certification has one exam that is in Beta: MS-600: Building Applications and Solutions with Microsoft 365 Core Services.  All attendees will get access to a free certification voucher unless they use it for a test at the conference. It is planned that the voucher will last for 6 months. The voucher is only good for one certification. For other developers not at Ignite, check out MS learn blog at https://www.microsoft.com/en-us/learning/community-blog.aspx to receive discount code at 80% off and preparation information and take the exam by Dec 20, 2019. Office 365 developer program The developer program connects developers to the tools, resources, and expertise they need to create intelligent, connected solutions for Microsoft 365. Benefits New free renewable Microsoft 365 E5 subscriptionBe your own admin New dev sandbox creation tools Preload sample users and data for Microsoft Graph, and more Access to Microsoft 365 experts Join bootcamps and monthly community calls Tools, training, and documentation Learn, discover, and explore about Office 365 development Blogs, newsletters, and social media Stay up to date with the community