Building a Communication Center for your users – Part 1


This will be the first post of a multi-post series. I will show you how I built a custom control center for my company’s internal communications. To give you a background, my company uses multiple lists to house our news, announcements, and alerts. As we all know, sometimes SharePoint is not the most user friendly for people that are used to using content management systems like WordPress. Therefore, I set out with the goal of building a more user friendly tool.

To create this communication center, I utilized simple JavaScript, jQuery, and the SharePoint REST API.  MSDN has a good reference to the SharePoint REST interface here, so I won’t go too far in depth here. I also used the trusty ‘ole webpart known as the content editor. I selected that so that I could simply upload all of my HTML and JavaScript files to the subsite’s asset library and then can be imported via the link function.

Currently my company, UDig, uses a list to feed our news display on the main landing page of our intranet. The list itself is a custom list (not a content type as this is only used in a single place) and captures the title, subtitle, body copy, image (if there is one), and the ability to either promote the news item to the top or let it go down to the body of the page.

When the news item is promoted to the top of the page, the image is displayed to the left and the text is to the right. The body copy of the news piece is truncated at 350 characters and has a ‘read more’ link appended to it. The ‘read more’ link then opens a modal and displays the full article. Here are some example screenshots:

example_promoted_news_building example_modal_building

To update this, I thought about building an area where our content managers didn’t have to jump around to multiple menus.  They would be able to go to this tool and create new items, update existing ones, or delete ones that were no longer needed. Basically, I am trying to treat the lists and perform basic data operations on them as if they are tables in a SQL database (which is where they are stored). With this tutorial we will use the GET and POST verbs so that we can create, update, and delete items.

In the next post, I’ll walk through the actual display of the news tool and the functionality of it. The third post in this series will walk through building the code that makes it all work. There is nothing too complex about this and it makes your content managers’ lives a lot easier than having to update the lists through the site contents menu. The example above was built using the Microsoft Fabric UI grid. Incorporating that into our intranet has made life much easier with making the site responsive. Making your intranet responsive by building it with the Microsoft Fabric UI will be a whole different post.

Need help with SharePoint? Feel free to contact me.

Have a bigger project? Check out my company, UDig, LLC.