You might be familiar with the running text that shows some breaking news on a news tv channel. I think it would be nice if we have a similar thing on a SharePoint site to show some breaking news to its users so I created the News Ticker app. Basically, the app will show some news from a SharePoint list as a running text at the top of every modern page on the site. Below is how it looks:
News Ticker
Below is the data source:
Data Source List
You can find the full source code and how to install it here.
In this article, I will share some key points from the solution code that might be useful for other SPFx projects.
SPFx extension doesn't include React component by default but we can easily add it manually.
We just need to render our React component in the placeholder element provided by the SPFx Extension Application Customizer.
You can find my implementation code here.
Render React Component
I'm using SharePoint list as the data source.
In order to make it simple to manage the news, I'm leveraging the list view and getting the data based on the view configuration.
It's great because we don't need to build any custom configuration mechanism in our app to configure (sort, filter, top, etc.) the data to be displayed. Just use the OOTB list view configuration.
It's very easy to get the data based on the list view using the PnP JS. Below is my implementation:
You can find my implementation code here.
Get Data Based on List View
I'm using an open-source React third party component for the running text component: react-ticker.
It's easy to add any React third party components to our SPFx project.
You can find my implementation code here.
Use Third Party Component
Thanks for reading. Hope you find this article useful
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.