I recently had a requirement to display a List items from a one List on several SharePoint sites. The Highlighted Content Web Part doesn’t support List items, so the other choices were to use Modern Search, develop an SPFx webpart or use Javascript / JQuery. In the end I decided JQuery was the best option for my use case. The main factor being the item needed to display instantly and so Search based solutions would be to slow.

I started by creating a List to host the data I needed. In this example the List is called Notices

• Title – Text
• Description – Text / Multi-line Text
• URL – Text (you could also use a Hyperlink column)
• Active – Yes / No

I used the Modern Script Editor webpart part to run the script below. In each site I added the webpart, each of which has a copy of the code. The downside is that if you update the code, it needs to be manually updated in each webpart.

<h2><div id="ListData"/></h2>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript">
</script>
<script type="text/javascript">
    $("#ListData").html("");
$.ajax({
        url: "https://TENANT.sharepoint.com/sites/SITENAME/_api/web/lists/getbytitle('Notices')/items?$Filter=Active%20ne%20true",
        type: "GET",               
        headers: {
            "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            var html="";
            html+="<table border='0' cellpadding='1' cellspacing='1' table style='background-color:#FFCCCB';>";  
            for (var i = 0; i < data.d.results.length; i++) {  
              var item = data.d.results[i];  
              var id = item.ID;  
              var title = item.Title;
              var description = item.Description;
              var link = item.Link
              html+="<tr><td>"+title+":"+description+"<br><a href="+link+"> (view notice)</a></td></tr>"; 
            }
                 $("#ListData").html(html)    
        }
    });
</script>

The Modern Script editor may display a warning for the first line. I found this could be ignored. That line adds a DIV tag to the page and uses $(#ListData”).html(html) to write data after the DIV.

The code does and API call to the List and filters on the “Active” column so that only Active Items are displayed. Then it generates an HTML table with Title, Description and the URL. Here is the output.

The API call works across sites and is instant when the item changes.

The HTML can be easily extended with additional columns, more custom formatting and logic for how to display the item. This worked and fulfilled my immediate requirements.

The code above is based on code from StackExchange with my custom modifications.

The SharePoint List Rest API documentation on Microsoft Learn is very helpful.