Community Sample: News Ticker app (SPFx Extensions)

Published May 10 2021 07:21 AM 1,566 Views
Occasional Contributor

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 TickerNews Ticker

 

Below is the data source:

Data Source ListData 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.

 

1. Use React component in the SPFx Extension

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 ComponentRender React Component

 

2. Get data from SharePoint list based on View using PnP JS

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:

  1. Get the view information using list.views.getByTitle(...)
  2. Get list item based on the list view XML using list.getItemsByCAMLQuery(...)

You can find my implementation code here.

 

Get Data Based on List ViewGet Data Based on List View

 

3. Use React third party component

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 ComponentUse Third Party Component

 

Thanks for reading. Hope you find this article useful :smile:

Co-Authors
Version history
Last update:
‎May 10 2021 06:43 AM
Updated by: