February 25, 2024

SamTech 365

PowerPlatform, Power Apps, Power Automate, PVA, SharePoint, C#, .Net, SQL, Azure News, Tips ….etc

CRM Feed Back in SharePoint | Using BootStrap, SP.JS & JQuery


Rolls Royce


~ 6 Weeks

Used technologies

SharePoint, SP.JS, BootStrap, Html5, Css3, Jquery.

The aim of this project was to build an internal CRM to capture users interactions and the trend of the customers satisfaction through different interactions.

The project was built in Sharepoint on top of multiple lists and instead of having a ‘SharePointy’ looking application, I opted for a more webby style.

I used SP.JS to interact (CRUD operations) which the list, while the UI was handled using Bootstrap and JQuery.

Once the data was captured, some Power BI reports where built to have some nice looking dashboard about the trends and the satisfaction of the customers.

The fact that I used Bootstrap also allowed me to ensure a full responsivity of the application, which was one of the mandatory requirements as our users were supposed to log the interaction and feedback they got from the customers as soon as they walked out of the meeting room.


Home Screen

In the home screen we have the main navigation menu, the latest interactions with the satisfaction level, topic discussed, the customer name, and the details of the interaction.

Automatically, the application will detect whether you are browsing the to SharePoint site from a mobile device, and will redirect you to a simpler view, which I used Jquery, to get rid of all the SharePoint content, and just drop the relevant content (which is this case is the navigation menu only).

New interaction

This is a bootstrap form which once submitted uses SP.JS to submit the data to the back end SharePoint list.

Please note that I added an On Change even on the drop down and topics to change the smiley icons

List of stakeholders (customers)

In this page, I display the complete list of stakeholders, which is enhanced by a quick search (using Jquery, allowing to filter the results while I type on the search field).

The table has some nice looking css effects, as you can see the background color represents the actual satisfaction level, the country flags allows you to easily identify the location of the customers, and the far-right icon represents the trend of satisfaction.

Customer (Stakeholder) Profile page

In this page, I display in the first panel all the customer details (name, location, profile, department, their position in the hierarchy, last interaction date …etc.)

And in the second panel, I display all the interactions with this particular customer (Date, by whom, the topic discussed, satisfaction level and more details).

Power BI Reports

Multiple Power BI reports have been built to render the collected data in a nice-looking dashboards and display the trends, here is one of the reports

Show Buttons
Hide Buttons