Microsoft 365 Community Community Demos, 25 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Extend Microsoft Teams apps to Office and Outlook Mobile

Description

In this 13-minute developer focused demo – Sheena Makker and Garry Trinder start with an overview of the Office mobile app, current beta program and release roadmap. Then configure your developer tenant so you can build a custom app and have it surface in an Android Office app. Tips on configuring dev and debug environment. Scaffold a project, use Android Studio, run virtual version of Android phone, see simple app on mobile and how to provide feedback. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on October 25, 2022.

Demo Presenters
• Sheena Makker (Microsoft)
• Garry Trinder (Microsoft) | @garrytrinder

Supporting materials
• Documentation – Build tabs for Teams | https://learn.microsoft.com/microsoftteams/platform/tabs/what-are-tabs
• Documentation – Teams JavaScript client SDK | https://learn.microsoft.com/microsoftteams/platform/tabs/how-to/using-teams-client-sdk?tabs=javascript%2Cmanifest-teams-toolkit
• Documentation – App manifest schema for Teams | https://learn.microsoft.com/microsoftteams/platform/resources/schema/manifest-schema
• Pilot survey – Microsoft Teams App now available on Office Mobile | https://forms.office.com/r/gt2bxerykr
• Tools – android studio | https://developer.android.com/studio

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

A

Across uh different platforms, office and Outlook, now they're also available on the Android platforms on mobile, so uh my name is Sheila and I'm from The Office, Mobile team, and we want to introduce today- and we want your feedback- that how do these apps currently flow into office and Outlook mobile? And how can you test this experience?

A

So we have a short demo lined up today, so which Gary will take you through how you can access these apps inside Office Mobile and then also uh I'm, not sure how many of you actually know what office Mobile app does so I'll also go through a quick overview of the app itself. Office Mobile is basically it's a Content Hub, so you can access all your word excel. Powerpoint files, all your content across the M365 is something that you can access inside office.

A

So right now we have the content from word, excel PowerPoint and we're slowly building up on adding more content. You can access your teams meetings.

A

You can access all the recordings and uh other content types that you can access are Media or different media content types like images, Voice, your SharePoint files and all your stream files as well, and apart from this, apart from just accessing the content and using the different functionalities that are available with the content, we also have a lot of actions related to PDFs and images such as sharing collating images and also extracting text, and also doing a lot of annotations on PDFs.

A

So all of those kind of actions are available inside office app and yes, also. Every tool that you can think of you know we're trying to build. That would make productivity easier for our users is something that we are envisioning for: Office Mobile and then next thing is yes, the Indian Microsoft 365 app it's secure by Design, so the user data everything is secured here. So that's the basic overview of what office Mobile does now I'll just give a brief idea of where we are in terms of how this app is used. So.

A

Currently, we have a monthly active users of 140 million plus and even the monthly active devices are 174 million plus and it's rated one of the top 10 productivity apps on Google Android store. So, yes, I would tell you to check out this app, and you know explore this for building your teams app for this office, Mobile app as well.

A

So uh now that we talk about the app the teams, apps that are now being available on office Android, we are focusing on the team's personal Tab apps, so the apps with launch pages. So we do not support the ones with chat pages, but the ones with personal Tabs are supported on Office, Mobile and also on Outlook mobile So.

A

Currently, this feature is in preview in Office Mobile and it's very soon within a month or so it will soon come on Outlook Android as well, and uh the iOS will a fast follow post that so we're working on. That would be uh very soon we'll get that there so to test it out. uh You can join the beta program in the office uh in the office, apps Google, Play Store and you can join the betas.

A

You can click on the join under the beta section join the beta section and the apps that will start showing in Office Mobile will be using the Microsoft teams, JS version 2, so we are share sharing the links in the chat as well, where you can look at how different or like how can you upgrade your app using the team's toolkit and how? What all are the prerequisites for building these kind of apps and then the teams app manifest also has to be a version of 1.13.

A

So uh currently, if you go to the Play Store, so any Android, so the office app went to Android version of the one that we are stating here. Anything about this will support this feature. So. Currently, the apps that are available are power, bi, mural and Survey Monkey. So these are available in the preview for testing. So so we also have a sample app North Wind orders, so I am not somehow able to run this, but uh it's okay, uh I think once guy gives us the demo, it will be very well.

A

uh You know you can understand how the app can run okay over to you, Gary I. Think, let's run to the demo once.

B

All right thanks, Sheila, okay, let's share my screen so as Sheena mentioned, so we're gonna have a quick demo here. So what I'm going to do is I'm going to show you how you can set up your developer tenant uh the tenant that you're using, so that you can basically build a custom app and have that running uh in the Android office app and we're going to do this all locally as well, so I'm going to run through all the steps uh to basically enable you to get started uh building these new apps.

B

That can be surfaced in the Android mobile app. So the first thing to mention is this: is in preview so you're going to need to be on a on the target release and so in a developer tenant. It's not enabled uh by default. So if you come into the admin Center and you go in settings and organizational uh profile, you go to the release, preferences and change that to targeted release for everyone, just to know that it takes five days for the office parts to provision, and it does actually take all those five days.

B

uh I've tested it recently and it's something that uh hopefully we're gonna speed up but uh yeah, definitely something that you're gonna need to just go and switch on if you haven't done already. If you have then perfect, um what I'm gonna suggest as well is we're going to go through this is we can run a virtual version of an Android phone on our machines?

B

There is a studio, that's available, it's it could be used on Windows on Mac and Linux and Chrome OS as well, and so I'm going to show this on a Mac, but it'll be exactly the same on on Windows of whichever operating system. You prefer.

B

So those two prerequisites out of the way I'm going to show you a running app. So this is just a very basic app which I've scaffolded using teams toolkit um in Visual Studio code, just as simple as creating a new app and then selecting the SSO enabled personal tab um which is extended uh sending that teams app across Microsoft 365.

B

So that's all I've done I've gone through that wizard I've created the the project I've hit F5 things have been provisioned in the background that toolkit has handled for me and you can see that it is actually running in the terminal. One thing to note: there is a slight modification that I've had to make here and because we're running in a mobile device, a virtual device, it doesn't know what localhost is and so by default, everything runs through through localhost through through the toolkit and what height?

B

What I've done is I've added some configuration options in here and I've run ngrok in the background. Just so, I have a tunnel from that device to um to my machine, and so it's something that you you'll you'll need to do and you don't have to use ngrok.

B

You can use any other tunneling service, and but you need to tell uh the uh the add this into the app manifest so that it knows not to go to to localhost and if I go into the template, I'll scroll down to the section where this configuration option is used, and so we have here this config manifest FX resource front-end hosting. Basically it's just injecting those values into the Manifest so that, when that's published into teams, it's all wired up correctly and the same for the valid domains as well.

B

So this app is running and I'm going to skip back to my browser and show you this so I've come to office.com in my web browser I can access the app through the uh the the apps pane, so I can see, there's an extend across Outlook and office there we are. This is my local app that was running Visual Studio code.

B

um This is now running in my web browser. So let's go through the steps to get this running on an Android device.

B

So here we have our Android device, which is running so this is using the Android studio and I'm just going to quickly bring this up so in the studio when you've installed it there's a virtual device manager. So here's where you can create different devices to use you'll, probably get one by default. Just a bit of a warning. It doesn't include the Play Store which you will need.

B

So when you go to create device, you can choose the different Hardware, which is uh you can choose any pixel, so pixel 6 go to next and it will give you a list of operating systems to use pick the latest and but you'll see that there'll be images that actually contain Google play um store in there so make sure that you select one that has the store. Otherwise you'll have to start again because you'll think where's the store and I can't install the apps and so I've I have this running.

B

um So, let's switch to the um the actual Android device and I have the Play Store open, so open the Play Store search for office in the store and you'll find the the office Microsoft 365 app, and so, let's just click into that to view some details, and so Sheena mentioned um to get this working uh to display apps in in the office app. You actually need to join the beta program in here. So when you actually first install this you'll need to uh just in and roll yourself into the into the beta program.

B

It won't take too long. It'll take a few moments for that to uh to provision, but once you're in and then you can open the app and and have these new features. So let's open the app. So this is the office app that is, is running I've already signed in so I've signed into the the same tenant, which I showed the the web browser.

B

So the first thing that you'll want to do is to actually go into the settings in this app and you will want to enable remote, debugging so come in and turn that on and I'll show you how you can remote debug through Edge um for the uh for the code, that's actually running on the device.

B

So, if I come back to the home screen again, we've got the the apps section same as what we had in the web browser. uh We have all the different actions that Sheena was mentioning um previously and if I scroll to the side, we've got the power bi app SurveyMonkey and we have our extend across teams, Outlook and office. App I can click that and it opens up the app which uh is the same. It's the same app as which was running in my browser.

B

um So now, okay, great I've, got this running. How do I debug this well handly, if I go to Edge um Edge has the ability to inspect uh Android devices. So if you go to edgecon inspect and you have the emulator running, you have the ability to open the dev tools. If you click the inspect button here, it opens the dev tools and we can inspect the running code.

B

So here we are the typescript files, so index components and there we are our tab file and actually, if I show a bit more code, we've got the welcome file here. So I can set breakpoints like I normally would I can actually then click around in the uh in the actual device and that will trigger um the breakpoints to Fire, and that is it back to you Sheena. For for the summary, thanks.

A

Cody for the quick overview so quickly, if you've had a good demo so far I, what I would require from you guys is, uh if you could try out this experience and share your feedback with us, so that you know we can build better features and let us know how do you feel about this feature and uh what more tools would you need to make this a more seamless experience so yeah thanks everyone for going through this demo.

C

Excellent really cool. Thank you ashina! Thank you. Gary, uh awesome, awesome, stuff, so really really cool I wasn't that that edge Chrome trick was pretty wild. uh So super super cool good good. To get that one recorded.