 Many of the properties in a web parts manifest file are well known to developers because they're covered quite well in the SharePoint Framework documentation. But did you know there's a lot more properties that are available to you? So in this SharePoint Framework quick tip, I want to focus on some of the properties in a web parts manifest file that many people are not familiar with. Hey, I'm Andrew Powell. This episode is also available as a blog post on Voitanos.io and as a podcast on Voitanos.show. Check out the description below the video for links to these other resources. So many of the properties in a web parts manifest file are well known to developers because they're well covered in the developer docs. So for example, you're probably familiar with a pre-configured entries property. So that property, if I go to my manifest file, that pre-configured entries property contains an object of name value pairs that tells SharePoint what things like what group the web part should show up in the toolbox when someone goes to add it to a page. Maybe a localized title and description of the web part. Maybe the default values for any custom properties that we've defined in our web part. Bunch of options that we have there. We've also got things like supported host. And that says where can our web part be used just as a SharePoint Framework web part, as a full page app, as a tab inside of Microsoft Teams, or as a inside of Microsoft Teams as a personal app. Did you know there's actually a lot more properties than what we get here on the default of our web part manifest file? So that's what I want to talk about in this episode here. Now I'm only going to cover a couple of these. There's really four of them that are worth noting. And while I'm going to cover these four, one or two of them I rarely see seen used. In fact, I can't find any documentation on one of them. So I wonder really how much it's really used or even if it's even applicable anymore. So let's first look at this one called the image link property names. So let's say for example that I've created a another property that I allow people to show an image or pick an image for display inside of my web part. And let's say for example that the image that is going to be selected is maybe it's going to be gigantic like say 1200 by 1200 pixels. So let's say that image is called the default banner image. And I'll just say that's in my sites slash my site slash documents and some file and the name is 1200 by 1200 dot PNG. Now this image, I don't want to show a 1200 by 1200 image pixel image on my in my SharePoint site. That's just this gigantic and even if it's scaled down, it's still I don't want to like change the dimensions of it. I really want to change the size of it so I don't send this gigantic file down to my users or maybe instead of using these icons for the how I want my web part to look. Maybe I'm going to point to an actual image so I can use like an icon image URL property as well. Well, Microsoft has this thing called the image helper API that was included as part of the preview release of SPFX one dot 14. And one of the things that you can do is I can tell SharePoint that what property on this web part what properties contain images on this web part. And I want to make sure that Microsoft goes ahead and creates the scaled versions of those images. But not only that, I also want to make sure that they're stuck inside of a CDN. If the CDN is enabled and in SharePoint online for my tenant so that when I go to fetch those images, they're already available to me. They've already been rescaled. They've already been resized for me when the web part was added to the page. So what I can do is to do that, I need to tell SharePoint the SharePoint framework that what properties contain images. So in this case here, I've got this thing called the default banner image. So the way I'm going to do that is I'm going to come up here and parallel to the preconfigured entries. I have an option here called the image link property names, right? So what I'm going to do with that, that expects an array and I'm just going to pass in an array of all of the property names. In this case here, I'm using default banner image, but that's going to be used to tell the SharePoint framework. Hey, we got a custom property on this web part. It's named default banner image. There's going to be a URL in there. As you know from the image helper API, that can be either a fully qualified URL or a relative URL to the location of where the image is. In my case here, I'm using a relative URL. So when the user changes that value with the web part and they save it, it'll make sure that it's available inside of for all the resizing and all that jazz that happens and available on the CDN. So that the first time they go to use the web part, they don't have this extra load of having to make sure go fetch all that stuff. It's already done for us. And I still am going to have to use the image helper API to go fetch that URL, the CDN URL. But I have to worry about, you know, it's not going to be nearly as long of a process to go fetch that URL when my web part renders, because it's already been done for us because it told SharePoint framework and needs to be done. Now another one of the properties that's available to us is one called the image link property. So the image link property name. What this is, is this is going to allow us to say like if I have a URL in that's being used as a or have a property that contains a URL to something else in SharePoint, like an image or maybe a document inside of a document library. Well, Microsoft SharePoint has this thing called link fix up. And what it allows me to do is that if I take a URL, if I take a document from one document library and move it to another document library, SharePoint can actually behind the scenes, it can do like something called link fix up where it's like updating the search index and making sure that no links are going to be broken just because the path has changed to that image. It'll make sure that those all those URLs are updated so it knows where the new version of that or the new path is to that image or that document. But if I'm storing that data inside of my web part, well, SharePoint doesn't do link fix up to those properties on my web part automatically, it's expecting, it will do it, but I have to tell it, you know, what properties are there. So let's say for example, that I create this, I have this property here on my web part. And let's just say my web part's doing something about adding reference documentation. So I'll have a reference, see reference page. So I have a reference page property. And let's just say that that's going to point to site slash my site slash documents and then slash some file dot doc x. Well, to tell SharePoint that hey, there's a link inside a link a property that contains a link inside of this web part. I want you to do link fix up to it. If someone moves that document. So what I can do is I can tell SharePoint the SharePoint framework that that property is a link by saying link property names and I can pass it in again as an array, just like the image link property name that I just referenced a second ago. Now that's not all there's something else that we can do with this too. Let's say I have another property here on my web part and I want that to be included in the search results. So by default, the SharePoint framework or the SharePoint indexing process doesn't index all properties on a web part. It's going to do things like title, maybe description, but none of our custom stuff. So, you know, let's say, for example, that I created some web part that shows a stock symbol or shows a stock quote of and it takes a single property in of a stock symbol. So let's say, for example, that I've got like some stock like or I have a section of my site where I do I have profile pages of all my competitors or of different securities. So like, for example, let's say if I've created a page about Contoso, and I want to write up a bunch of stuff about Contoso, but what would be really nice is that right now, if someone does a search in our SharePoint site for Contoso, it'll find that page in the results because Contoso is going to be in the content of the page. It will have been indexed. But if they search for the stock symbol for Contoso, let's just say it's C-O-N-T, then the problem that I'm going to run into is if I drop my stock web part on there, and even though it has a property on there for the stock symbol of, you know, I put in C-O-N-T to show a quote, it's not going to show up in the search results. But it'd be nice if someone could actually search in SharePoint for either Contoso or the stock symbol for Contoso, C-O-N-T, and have it show up. I can do that. I can tell SharePoint Search that there's a public property on this web part that should be indexed. And so let's say, for example, that I've got that web part that's going to show a stock quote. So I'm going to have something like, say, stock symbol as a public property. And let's just put the default here in our case as just Microsoft, MSFT. So what I can tell SharePoint is say that there's a property on this web part that I also want you to index. And I do that by using the searchable property names. And again, I have to specify what that is, what the name of that property is. In my case, it's stock symbol. So now when SharePoint indexes the page that this web part is on, it's going to see the web part, and it's going to say, hey, that web part says I should also index this other property. So now I get even richer results here. Now, another thing that we have is this thing called the required capabilities. Now, this feature is interesting. There's one part here that I find that is useful, and there's another one that I'm not sure is really being used by anyone. I can't find any instances even exercising my Google Foo of anybody even asking a question about it. So if nobody's asking a question about it, it's kind of like a tree falls in the forest. Anybody doesn't make a sound because nobody heard it? I don't know. So we have this thing here called this property here on our web part called the required capabilities. And it accepts an array, but there's really like two things that can be set here. What this does is this says if anything on this object that I'm specifying, if there is a required property that I'm specifying here and it's not present on my SharePoint site, then this web part should not be shown as being available to being added to my page. So the first example I have here is about using Bing Maps. So let's say that my web part that I'm creating is going to embed a Bing map. Well, to be able to embed a Bing map, I have to have a Bing map account key to be able to do that. So what this property does is it's a Boolean property. And so I set it by simply saying the Bing Maps key is equal to either true or false. Now by default, it's set to false. But in this case here, I'm going to set it to true. And what that says is that says if this SharePoint site or site collection or tenant, if it contains a specific key value for the Bing Maps account key, then make sure this web part is available to be added to a page. If it doesn't, then don't show it. So how do I actually set that value? So the way you're going to set that value is you can do that using the SharePoint REST API. You can use it on the SharePoint online management shell. You can use the PMP PowerShell or the CLI for Microsoft 365. So what I'm going to do, let me show you how. Let's see if I was using it for Microsoft 365 or the CLI. So let's say hypothetically, I've got a SharePoint online tenant and I have a Bing Maps account key that I've created for my entire tenant. And I want it to be available across my entire tenant. Now the way I can do this is by setting a tenant scope property in my SharePoint online tenant. So the way you can set a tenant scope property, I'm just going to say M365 log in. So that's going to log in using the Microsoft 365 CLI. I'm not going to go through that, but you get the picture. And then what I can do is I can set a property. So I do that by saying M365 SPO space storage entity. I want to use the set operation. And the key name that I want to set is the Bing underscore maps underscore key. All that's in caps. So Bing underscore maps underscore key. So that's the value of the key of the name of the property that the SharePoint framework is going to look for. And then I have to set the value of that. And that can be whatever the key is. So A, B, C, D, E, F, 1, 2, 3, 4, 5, 6. That's it. So I'd set that value like that. So now if that key is set, this web part, the way that I have it configured, because I said it's required capability, that web part would show up in the toolbox for someone to be able to add to my site. So that's pretty cool. You can even scope that at like the web level, the site collection level if you wanted to. And you would do that using the property bag. So that's not a tenant scope property. You would look for it in the property bag. The tenant scope property is like a property bag, but it's for the tenant. Now the other option that we have here, this is admittedly, it's there and it's supported, but I've never seen it used. The other option that we have here is the authentication model. And in this case here, there are two options you can set. You can set either the federated authentication or open ID connect authentication. If you have these enabled on your tenant, then this web part would show up in the toolbox for you to use. Again, I've never seen these used. They're apparently, they're there. They're there for us to work or to use them. Like for example, you could say that I only wanted to be able to use this web part if I have the federated authentication already set up. So that I could make calls to say Microsoft Graph from an on-prem tenant, something like that, right? Or open ID connect to do the exact same thing. It's just, it's an option for us. Never seen it used, but it is available to us. So that's a handful of some lesser known properties, how you can use them. So just to recap, we've got the image link property names. That's going to give us the ability to specify, to tell the SharePoint framework that, hey, there's a custom property on this web part that contains an image. So the image helper API should make sure that it's ready to scale and generate the CDN version URL of that image. We have the link property names option, and that option is going to give us, to allow us to specify what property on our web part contains a link to another something else inside SharePoint. So that if that file or image or whatever is moved, when SharePoint does its link fix up, it'll include that property as part of its link fix up. The searchable property names, that's telling the SharePoint indexing process that, hey, I've got a property on my web part that you don't know about, but now you do, and I want you to index it as part of the index content for this page. And then the fourth one is the required capabilities where you can say, don't show this web part unless the Bing Maps key has been set on our tenant or as I showed the authentication model. Four properties you may not have known of, now you can use them in your web parts. You got a question or comment? Let me know what you think by dropping a comment in the video below or tweeting me at Andrew Connell or at Voitamos. And if you liked this episode, man, I'd really appreciate it if you'd share it with the rest of your friends. This episode, as I said earlier, is also available as a blog post on Voitamos.io and on the Voitamos podcast at Voitamos.show. I've included links in the description below to these other resources. And hey, don't forget to subscribe to this channel and click that little bell in the corner to be notified of future episodes.