Microsoft 365 Community SharePoint Framework, 3 Feb 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Framework Tutorial - Building Outlook Web App add-ins using SharePoint Framework

Description

This tutorial will guide you through on how you can use SharePoint Framework to build a Outlook Web App add-in. This is a preview capability as part of the SharePoint Framework 1.10, demonstrating the future work around other Office clients in both desktop and web user interface.

You can find the written version of this tutorial from the following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/office-addins-tutorial

January 2020 version using SharePoint Framework 1.10 (preview).

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

A

Welcome to this getting started with SharePoint framework tutorial series and in this video we'll be looking into how you can use SharePoint framework to implement and built office edits or more specifically, Outlook Web, Access Adan's, because that's the status in the preview release of this capability, which was part of the SharePoint framework um 1.10, and this video is recorded in January 2020 and, if you're, watching this later on on the spring 20/20 or even later, and please double check that you're watching the latest video and also follow up on the latest written guidance on using a SharePoint framework.

A

As for the office edits. So let's actually first go to the Windows machine and start creating our structures. Whoo. First of all, I'm gonna go to the right. Folder I'm gonna actually store everything in the code. Folder I have some samples already existing in here as well.

A

So, let's follow up on the qaida, so I'm going to use, create outlook, add-in, folder and we're gonna go down to that folder and it's an amplifier or Bursley I'm, gonna, clear up the console and in here what we want to do is that we want to execute and the yeoman generator you share plan the framework yeoman generator, but already at that point, I actually did a mistake already. So let's cancel that and let's be super super clear.

A

What we need to do here, because we're using shape on the framework 1.10 we in the end, we want to use a preview capability. We need to execute the human generator with the plus beta extension. So let's do that one more time so I'm going to clear that one, let's and the yeoman generator call what we're gonna do nice blonde splitter and that's actually going to give us access on the plus beta capability, so preview capabilities of sharepoint framework. So this also changes as an example. The yeoman generator flow.

A

If that would be the case as an example, the in as part of the SharePoint framework 1.10, if you're creating a search, extensive career extension, you would need to use the bus better, because that extension is only available in the plus beta or the beta or the preview flow.

A

So that's actually a this one in the past beta mode, and then we can actually create our solution structures we're going to use the default value over there, we're going to use chocolate, SharePoint Online, because suppose this doesn't work in on-premises and we can use the current folder because we're already into Outlook add-in folder name. We can actually use standpoint deployment option know for the unique permissions we aren't creating a web part because it is actually behind of the scenes in the preview capability.

A

The terminology has not yet been changed, so we're creating a bit part, even though technically it is actually just. How would I put it away? It's more like a panel exposed in Outlook Web Access in the in the window, but using right now the old terminology of SharePoint framework we're creating a web part. It's actually called, as my first add in, and they would go and let's call it the description as well. My first Outlook, it's actually there's a small typo, completely irrelevant.

A

Let's fix that one and adding over there and we're going to choose no JavaScript framework, which will start scaffolding process and again that's going to take a few minutes. So we're going to speed up the videos. Let's continue within a few seconds and there we go now. The solution structure has been completed. So, let's clear up the console for a while, we don't actually use it that much anymore, but let's open our visitors to their code. Now the visual studio.

A

We can actually see one new setting here, and this is confirming that my executors yeoman generator with the plus beta switch. So if you're not saying that you forgot about using the plus there better switch or here using a wrong version of SharePoint frameworks are starting from SharePoint framework 1.10. This is available and starting from a future versions. The office setting option and the folder will be there also in a non plus beta clarification so, and what we basically have here is a manifest file for Outlook Web Access with the default settings and default configurations.

A

You can absolutely modify their settings. Upload absolutely modify configurations. Few things to here notice. There are certain tax which is not actually changed. For example, the SharePoint tenant URL is automatically pointing to the hosting URL. You should not update that and we're adding also here automatically the component ID with system webpart, unique, unique web part manifest ID, so that the SharePoint knows which way part actually surface inside of the Outlook Web Access. So behind of the scenes, everything is automatically hosted by SharePoint, but you as a developer. This is completely seamless.

A

You don't actually need to worry about the hosting mechanism. As long as the solution is being deployed on a SharePoint and the catalog, everything is automatic and in the future that motor might be changing slightly, but then we'll update the documentation. There's also is configuration where true or false here, which is a good thing to actually know so. You can actually get rid of the query parameter if you don't want the web part to be configurable and all or not, okay, for the adding so in the long web.

A

Access Adams typically are not configurable, but because of the the SharePoint framework. We actually have this configuration option. It is supported for a one-time configuration to configure to add-in in the outlook experience as well, but if you want to get rid of that, you can just remove this query parameter in the manifest URL, but that's pretty much listen. Actually it and that's pretty much it. Let's not actually change the manifest XML as such. We're going to use it as as it is no changes over there just check it out how things are actually working.

A

No, it's actually open up or modify the settings. So, first of all, we want to actually include the office types, the Chow office, JavaScript STK types as part of the solution.

A

So let me go to the console and let me run npm install at types slash office chase, and this is gonna, then give us additional insights on what's actually happening so as part of the or what are the settings and what has the configurations which are available for the office context, and we will see that in a second and we are adding the times that doesn't actually take that one. Now, the next step. We can actually leave the console up and running if it takes a while to complete.

A

Well now it's actually already done, and the next step is then go to the web part. So, let's actually open up the exact web part in a typescript mode, and we can say the web part. We can see the default rendering and all of that and let's modify the render method completely. So let me actually get rid of the render method and paste in and the the one which we have in the documentation so we're using the render method there. Let me actually fix the indentation again and that's it.

A

That's really ugly indentation buck in the SharePoint framework, one upon 10, but that's separate discussion now. What we are doing here is that we are actually double checking.

A

Is that this context SDK office doesn't have a value or not, and if it has a value, we know that we are in the context of office so in the context of Outlook Web Access in this tutorial case or potentially in the context of Excel, Word or PowerPoint in the future stages, and that's in that case we're then saying, welcome to office and then we're saying you're in the context of following email address, so we're basically getting the email address of the user profile from the mailbox and the reason why we, those types in the console.

A

So what we did in here was that whenever we actually are adding additional types or doing intelligence, we actually see the different options available. So that's enhanced experience for understanding what are the different types and and the latest version of the types. So we understand what's available in the office context. So let me actually get cancelled that one. So we have email was the one which we were rendering out in that option and obviously is the same code is being rendered in a SharePoint context.

A

We still keep on saying, welcome to SharePoint, so we can use the same piece of code in SharePoint or as an Outlook Web Access in the shape and favicon button a release option now, let's actually test this out in practice. Quite simple thing probably have done this quite a few times: OOP CLS CLS. There we go and let's do call pond or condo. That's the ship.

A

That's going to package everything what we have done, there's no bending saves everything has been saved, so we know that we're ready to go and the other thing to execute was basically call up package solution. So go up package solution, that's the ship which will then prepared actual SP pkg file, and we can again see the shape. What phones are being created in here right about there and there we go extra shape and folder in the solution, and now we can open up the solution folder in the file explorer. Let's go to the SharePoint folder.

A

We can actually see the solution. We can see the outlook adding over there and let's actually go to our App Catalog slash sites, slash apps. Here we go and let's go to the App Catalog SharePoint app catalog. Let's actually track and drop our outlook, add-in SP pkj file into the arm catalog, which starts the installation process we do want to have and we want to use the tenant. My deployment option not necessarily again report.

A

It makes the whole contextual Association of components and manifest IDs and everything else easier and there there are technically a few different other options here, but typically you would say that expose this and say it's a not quite deployment. Let's click the point and that's it. Our code is actually in the available for anybody to take advantage. Now we don't do this in the tutorial written tutorial, but we can absolutely go to a any SharePoint site at this point. I create a new page.

A

Let's actually do not create a page, create a blank page and we can absolutely see the Outlook Web part in here. My first W a web part- and it's saying, welcome to SharePoint like it was designed to do so- no because we're in the context of share button, no getting that same web part to be rendered, though, as an office out sorry, Outlook, Web Access setting is a slightly different scenario, so we're going to use site loading in this case.

A

So let's go to the Outlook Web Access and we can, for example, use this particular email to make things happen. Let's actually go to treetops, let's open up cat add-ins, it's the last option in the menu, at least in my case, indicate adding an option. I can go to my headings and then I'm able to actually upload a car, basically using a site loading, I'm, able to add a file which will be the one which will be downloaded or has the information on which adding is going to be loaded in my Outlook Web Access.

A

So, basically now we need to point out that the manifest file just to skip the solution, URL path, I'm gonna, go to the outlook. Add-In. That's officer then copy pasting that URL get in here that one using that manifest file, selecting that one it is the manifest file for our solution. We want to install that one yes and there we go. There's our SPS pfx template. Now the all of the text, all of the information, the images, everything else you can modify them using the manifest file.

A

You can definitely do that in the scenario of our example and the simple the most simplistic tutorial. It did not do that, but doesn't example. This VFX template text is definitely available in the manifest file to be modified. We can actually find it in there so to display name, equals FFX template and you can observe the reference whatever icon, IVR URLs, and all of that you could potentially point out that BMP files in SharePoint and in this multiple different scenarios available there now there's are adding.

A

Let's actually make sure that that's available that is now available. So we are able to close that one, and that means that if I go three dots I can actually select my SPF X template. That's an adding to be rendered in the in the email Duke and there we go because we had our configuration options equal true in the URL in the manifest file. We have this one time also in order to configure settings not necessarily super useful.

A

If you don't want to do that, so we can absolutely hide that and then we are being rendered in the context of office because it says welcome to office actually slightly in zoom out, welcome to office. Extending offices cost an application extension and we are in the context of following email. That means at dun, dun, dun, dun dun, again my first owh adding so now. This context here is automatically actually rendered using SharePoint and we do not need to worry about the hosting.

A

Do permissions and everything else and I know better, because it is a SharePoint framework solution. You could really easily get access on using craft API, so you can use whatever been a custom. Api is you? Can you have all the access in the tenant level settings and the user contacts like within the normal SharePoint framework experience, so pretty cool setup and and really easily available, like that? This is recorded with the SharePoint framework 1.10 version, when this capability is still in preview.

A

Your feedback is more than welcome and will keep on evolving the experience better and better and in the following stages. It will be different available in the desktop applications as well, but thank you for this one and please give to keep the feedback coming. Thank you.