Microsoft 365 Community Community Demos, 2 Jul 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building an application customizer to inform end users of alerts within date period

Description

In this 8-minute Developer focused demo, Sudharsan Kesavanarayanan introduces viewers to a SPFx Application extension called Alert Message that enables site owners to setup and manage department/user focused, time banded Alert messages to be displayed immediately above a SharePoint page header. The message is easily managed in a SharePoint list. The client-side solution uses Morphext, Animate.css, @pnp/sp (2.0.4) and React functional (Alert) component with hooks. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 2, 2020.

Demo Presenter(s): Sudharsan Kesavanarayanan (NTT) | @sudharsank

Supporting materials:
• Knowledge Share | https://spknowledge.com/
• Pre-allocate space for SharePoint Framework extension placeholders | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/basics/preallocated-space-placeholders

Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

A

Hi everyone, my name, is su descent, k7r, ina and I've been working as a SharePoint consultant at entity based in Singapore. So these are my social links and my blog site espionage comm. So today we are going to see a very simple application extension called alert message using jQuery plugin.

A

So the main que a use case scenario is my client wants to display a message, a kind of a flash message, some important announcement to the end users so based on the department, and it should have an expired so something like that so, but they have to manage the message easily using the SharePoint list. So this is the business case.

A

Some of the features like the messages are maintained in a SharePoint list, which makes it end-users easily manage the messages, and there are two dates started and expiry date where they can draft the message when it should start displaying to the end-users and then and then they can also set the expiry date. And there is a nice active flag where, if they want to soft delete it or if they want to remove the message immediately, they do they actually no need to delete the item.

A

They can just change the flag and then there is a property called animation type, which is a property for this extension bad. They can change the animation. So some of the artifacts used in this or I have used a jQuery plug-in called a more fixed and then animate dot C s. So this animate RCS is used for animation, where you can select various animations like bouncing from right left. Those are all some sample.

A

Animation effect and I have used PNP SP, and there is one component alert component which I have developed using react, functional components with hooks. So let us get back to the demo.

A

So here you can see the extension, so once you refresh it once you deployed it so so it is an application extension, so it will automatically start displaying the messages. So since this is an extension that has to be a list which you need to create, which has to which has columns like start date, expert date is a queue and the sequence, so the sequence, the messages will be displayed based on the sequence, and you can also set the start date and end date.

A

So whenever you refresh the page, so I have used the predefined placeholders of size, 35, 250 pixel, so that it will previously allocate the size and then it will start displaying the message. So it is very simple and easy to maintain and it is very, very simple extension. There is no great functionality, complex functionality implemented in this, so let us go through the core.

A

So the first is the application customizer dot TS, where I have defined animation type of property. You can change the animation type, and this is where I am rendering the placeholders. So this render placeholders and I am just pausing. The property to the component called react. Sorry alert dot, yes alert component, so this is the alert component and one thing I need to mention it here, because I have seen in some forums and in some of the issues that they are not rendering the placeholders.

A

So this line is more very much important for the extension that we need to implement this line, because this line will check whether the placeholders are already there in the page or not, then it will render the our custom component. So this is a very important line, so we have to include this and I have set it up the SP context and let us move to the alert component. So this is a normal reactor.

A

Functional component, so here I have used in selective imports for webs and listed items, and this is a start inert animation component, where I am just using the jQuery plug-in called the morph extension and then I am setting up the properties. So by default it will be bouncing right and if there is any animation property declare, so it will take the animation property and the operator will be a tilde simple and the speed is 5000. So this exact this sample I have defined only the animation type property.

A

Maybe you can enhance the sample by giving is the duration and also we can you can implement the separator properties and and other properties which you can define based on the morph extension and load alerts. It's pretty simple. I have just defined the query so based on the camel query, based on the exact you flag, star date and expiry date, and then I am just fetching the title and I'm using PNP JS to get items using the camel query, and then I am just joining the alerts and said hitting setting up in the state.

A

So once it is set it up in the state, then it got displayed so based on the alert start animation. It will trigger it and then it will displayed, and the last is elements detects. Someone here I have applied this package to the site collection. It is not a tenant level activation, so I have used these elements. They are text someone. So this is the test of property. I haven't changed anything on this. The main thing is the host properties. I have defined the pre-allocated application top height, which is 35 pixel.

A

So this is a very major feature where there won't be any flick around your page. If you have implemented this reallocation height so hopefully I have covered everything. That's it.

B

Excellent yeah: that's that's actually pretty good point on the pre-allocated application. Customers are high because then just can you go back on the on the implementation. We can explain what it means for those who are not on the UI. So if you do not define that booking so to say beforehand, you can actually see when it's loading, there's a white or on the location where the red line is coming. Can you do it one more time sweetheart there we go white bar and there's a red line.

B

The white bar is basically there because we have that free allocation in the user, custom action and define as part of the implementation. So whenever the solution is loaded, we service ID, with basically all than 35 pixel, so that whenever the actually implementation is rendered on client side in a project because this JavaScript it doesn't actually move the baits down, because I know that everybody is is every now and then super anoint on different applications and websites with date is loading gradually and an async endemic Mouse and trends transitions and and even actually SharePoint?

B

Does it every now and then and it's super annoying, so the pre allocation is basic behind for handling that section, but super powerful and obviously like like Sudarsan said you can absolutely evolve this sample with a you could actually modify the the implementation. You can modify the background color you can modify, let's say a support in HTML inside of the the rendering.

B

So you could say the pay by the way is two very important message read hear more from here and then flick that when I land on an article page where you can we additional dates or so really really cool kind of a solution, shim and starting points where which people can use in their implementations, so really cool stuff. Thank you. Thanks return on that, one.