Microsoft 365 Community SharePoint, 25 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a list view command set to demote previously promoted news articles from pages library

Description

For this 10-minute Developer-focused demo, Mikael Svenson dives into an extension allows users to demote read-only promoted news pages! Pull Theme colors from Global state object or UI Fabric getTheme for SVG icon. The code checks if page is in promoted state and if user has permissions to demote. This example shows how extensions – in this case a demotion capability - can be made available to all sites across the tenant and adopt local site theme. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on February 25, 2021.

Demo Presenter: Mikael Svenson (Microsoft) | @mikaelsvenson

Supporting materials:
• Sample - Add Folders Command | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-command-addfolders
• Blog - Fixing base64 SVG icons in SPFx — an interactive post | https://tahoeninjas.blog/2019/08/31/fixing-base64-svg-icons-in-spfx/
• Document - Controlling tenant wide deployment from App Catalog site collection | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/basics/tenant-wide-deployment-extensions#controlling-tenant-wide-deployment-from-app-catalog-site-collection
• SharePoint UserVoice - We can Promote but not Demote News. Add ability to Demote News pages. | https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/38255671-we-can-promote-but-not-demote-news-add-ability-to

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

So I created this example earlier in the week as I was talking to some old consultant friends of mine who had an issue where well, people are promoting uh their pages as news, but there's no easy way to demote them. So you used to be able to do quick, edit mode and add the column, but that's not possible anymore, because the promoted state field which is used to set if a page is used or not, is now in read-only mode.

A

So so here's my regular page, I mean you, have this promote option right now and then you can do post as news on the site, and now this is news, but there's no way to get back. So if I go to pages library right so here's my page- and I now have this button called demo and I will click. This page is no longer promote as news but remember to republish your page, so I didn't add republishing to the page. So that means, if I go back to the page, I have to republish it.

A

And now you see the promotion is available again. So to do this. So there's a couple of things uh interesting things in this extension, um so one is the icon and getting and getting the icon up there and also getting the theme colors.

A

So uh what you have to do is the easiest way so so for the image I'm using an svg file um in xml format. uh So there's multiple ways of doing this, so I'm not going into how you can convert and get your icons into the svg files. But that's that's possible, but if you also want to get these as uh get the theming colors- oh let's do like this.

A

So if we so on the list view updated commands. So this is this triggers when you when you, when you pick an item, so I have this helper method here to get the theme color, which is very short. So basically what it does is it's using the global theme state object, so there's there's tons of issues getting the current theme in in a list extension. uh But since since, uh since the theme is in a global state, object, well just let's pull it from there and then that allows you to get get to different slots.

A

If, for some reason, this object will despair, we fall back to using the ui fabricate theme and hopefully that will sometime in the future, give you the right theme uh and not just the default blue theme. So so that's just to get the color. uh So what happens here is I have the same svg um code and then I do a and then we sort of set for fill.

A

So I just slot the color in here right. So that means it just picking up the theme color and then putting that in as in and svg, and that means, when you deploy different sites, I can will be in in the right color.

A

uh So, thanks to hugo for alerting me that I can url, you know arcane image. Url is actually exposed on the command object and then I'm checking also, if you have permissions to edit the item so at the top here. Just you know using the page context to see. Well, okay, you have add list items, because if you can't add list items you can't really edit it. So that's the checking on the permission.

A

If the option should show or not and then the real work right so fetching the fetching, the uh fetching the page and checking well, if is it already promoted or not? So that means, uh if I take this so if I demo this right now well, this is not demoted. So we can't really do it no two times in a row and then I'm checking is. Is it checked out to some other user? If it's checked out to some other user?

A

Well, you need to take ownership of it first and then, if everything is in order, you can then set the promoted state field to back to zero from two. That's that's what happened here, but but the crux of it all is that you can't use the normal update command on the list item.

A

This is a read-only field, so you have to use the validate update list item which sort of skips past that read-only option and you can set the value so that so that's sort of what's blocking you for using a normal update and that's uh basically so I'll show one more thing. uh So if you look at the elements xml, so if you deploy this to a site, so 119 that's a side, page library to ensure that it only appears inside pages. I've also added the rights here.

A

So that means, if you deploy this just to one side, that means it will do a pre-check and it won't show the custom action unless you have those rights and then it's the same thing if you do tend wide, but but there's no option to have the rights and that's why I have the right to check in the code as well, and that was the demo.

A

B

Sorry, yes, I I just let's, let's read up on a few things. Sorry patrick also jump in here, because this is actually really cool. What you're showing right now in here just to people to understand, because I don't think everybody understands that when you're creating an extension, you can automatically make it available across the tenant in a document, library or a list or a specific document library type and since the site pages library has a unique id which happens to be 119. I'm not sure.

B

If this new ideas, I think they're documented somewhere, if they're not actually me too yeah,.

A

I mean these are all going back to sharepoint.

B

Yeah exactly shape one stone age, yes, um we're dinosaurs, I get it and now, but that basically means that whenever we are then deploying this solution uh to the tenant as part of the deployment as part of the package, we actually add an entry to this uh app catalog. There is a specific list, I don't know have you tested? Have you do you have an app catalog here? Can we actually show how it works?

B

Because we have some few minutes here um and then, if you go to site contents,.

B

Oh yeah, if you upload that, so what happens is that when we're uploading, the sbb kg file sharepoint basically checks the inside of it and then realizes that? Oh, you want this button to be activated across all of the site pages across the whole tenant automatically and and that's actually really cool this super powerful capability and how do we control that is using a tenant-wide deployment list from the epic app catalog? So now, if we go to the after deployment first of all, it clearly says that we're doing that and there's the permissions.

B

And now, if you go to the site content, we can actually see that there is a list, a tenant, wide extension list, the last one on the list. This one is the one where we control the one of the extensions which will be exposed across the tenor. So now.

A

B

Actually see here, one of these entries is the one which you pushed in yes. Well now we can say list template this one one night and that what happens on a runtime is that whenever sharepoint is rendering the list 119 uh on the back end, we're double checking that are there any tenant wide extensions to be rendered, and then we basically on runtime, render so immediately when the list.

B

The item is in this list, it will be then activated across all of the sites within antenna, and so we don't actually deploy anything on a site level on runtime when we're rendering in the site site site site, and we actually check the content of this list. And then, if the entry is in here, then we render the button and but it's really really powerful way of pushing extensibility on a list and libraries buttons and extensions and list your command. Let's and executing your code, then as part of the libraries as well.

B

um Maybe one more thing: if you don't mind, michael, if you go back on the on the individual page level, uh just to call out that one, because that's a classic discussion point, it would be really cool if we would be able to add the button on that page as well. So the and that's unfortunately, currently not possible. So please use the user voice. Let's get this fixed and the the people responsible of the pages, which is unfortunately not me. It's a different set of people and and our team are on the platform team.

B

They haven't really prioritized that thing, but it would be really cool if you would be able to add extensions and patterns on this view, not just when you are in the site pages.

A

And just for this functionality mode, it would be awesome if the product would allow you to sort of revoke news from this pain. Instead,.

B

Yeah yeah exactly exactly: there should be a native yeah, a native way of doing that, and then, if not, we would be able to add additional buttons actually on that. Even on that level, it would be cool to have a additional way or support having extensions on this panel as well, because that would be a superpower, okay, but anyway. So thank you mikhail on this one, sorry for taking humans extra, but I think it's it's good to explain uh for, for the different concepts and behind of the solution, so patrick yeah.

A

There's some nice nice nuggets in this code for different things, so uh yeah people should take a look at it. Absolutely.