March 19, 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

[vc_row parallax=”content-moving” parallax_image=”99103″ css_animation=”fadeIn” css=”.vc_custom_1563115556985{margin-top: 0px !important;padding-top: 50px !important;padding-bottom: 50px !important;}”][vc_column width=”1/2″][vc_column_text css_animation=”fadeIn”]

Client

Rolls Royce

[/vc_column_text][vc_column_text css_animation=”fadeIn”]

Duration

~ 6 Weeks

[/vc_column_text][vc_column_text css_animation=”fadeIn”]

Used technologies

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

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_single_image image=”99129″ img_size=”full” alignment=”center” style=”vc_box_shadow” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1563146690446{margin-top: 50px !important;}”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css_animation=”fadeIn”]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.[/vc_column_text][vc_column_text]

Screenshots

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text css_animation=”flipInX”]

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).[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”99124″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”zoomInUp”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”99125″ img_size=”full” alignment=”center” onclick=”link_image” css_animation=”zoomInUp”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text css_animation=”flipInX”]

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[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”99126″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”zoomInUp”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”99127″ img_size=”full” alignment=”center” onclick=”link_image” css_animation=”zoomInUp”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text css_animation=”flipInX”]

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.[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”99128″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”zoomInUp”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”99129″ img_size=”full” alignment=”center” onclick=”link_image” css_animation=”zoomInUp”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text css_animation=”flipInX”]

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).[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”99130″ img_size=”full” alignment=”center” onclick=”link_image” css_animation=”zoomInUp”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text css_animation=”flipInX”]

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[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”99131″ img_size=”full” alignment=”center” onclick=”link_image” css_animation=”zoomInUp”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]