SharePoint Online Web Part Development

Unilever is a British-Dutch transnational consumer goods company, co-headquartered in London, United Kingdom, and Rotterdam, Netherlands. Its products include food, beverages, cleaning agents, beauty products, and personal care products. It is Europe’s seventh most valuable company and its 400+ brands are available in over 190 countries.

After a successful SharePoint project delivery with Unilever in 2020, we worked with a third-party company, MK Brand, to further enhance Unilever’s Home Care SharePoint site in early 2021. The task at hand was to rebuild their home care site to match the design provided by MK Brand, and also to develop two systems on top of their current SharePoint environment; one was a Wiki, and the other was an e-learning checklist, in which employees can mark their training modules as completed and managers can track staff members’ completion.

The Solution

One of the requirements of the rebuild was to create a customised colour scheme for Unilever’s SharePoint site. The colours were not available in the out of the box SharePoint themes and so as a solution we used PowerShell (a command line tool used to perform advanced tasks on Windows and SharePoint) to create a new theme colour palette to match the Unilever brand.

To create the Wiki feature, we created a bespoke web part using SPFx – SharePoint Framework – to match the system’s design. The final solution included the addition of a search box to the web part to allow users to search for Wiki pages in the Home Care site to understand more about the brands they work with. Each result would roll up the first paragraph of each page and present the user with a link to view the full page. If an image existed on the Wiki page this would be rendered on the search result too.

To satisfy the requirements of the e-learning system we designed two SharePoint web parts; the main web part was for employees to track their completion. They would be shown a user friendly list of all the modules they needed to complete, and a link to take them direct to the course’s web page (all the e-training was delivered on multiple external platforms). Once a staff member mark a module as complete, it disappears from the list. At the end of the list there is an option for them to view their completed modules.
The second web part for this aspect of the project was the administration web part; this was built as an app part (a special type of SharePoint page that displays only the one web part). This solution allowed the option of only designated users (set via Azure Active Directory) to access this page and administer the list of modules, assign modules to users, and monitor each staff member’s completion. Furthermore, managers can download a report as a Word file to get a quick glance at an individual’s progress.
All of the data for this was hosted within SharePoint using list functionality.