Sticky Collapsible feedback panel in SharePoint

[vc_row][vc_column width=”3/4″][vc_column_text]In this article, I will describe one of the component of my previous design. I wanted to hear what our customers think about the new landing page, so instead of sending an old fashion email, or having a link to some kind of lists, I thought, I would integrate a nice sticky panel on the side, as most of the modern sites would do.

The panel is a collapsible panel which shows the user a very simple interface.

A set of Smileys (as what you see in the airport, once you finally get through the long queue :(, and a field for comments.

The users will just need to pick the icon which best represents how they feel about the new design and send some comments.

Once submitted, the users will see a thank you message and the data is stored in SharePoint. At this time it gets interesting. For this, I have used SP.JS to create a new item in a custom SharePoint List with just two columns [Title, Description].[/vc_column_text][/vc_column][vc_column width=”1/4″][vc_single_image image=”99201″ img_size=”full” alignment=”center” style=”vc_box_shadow_3d” onclick=”link_image” css_animation=”bounceInDown” css=”.vc_custom_1564595259700{margin-bottom: 20px !important;}”][vc_single_image image=”99202″ img_size=”full” alignment=”center” style=”vc_box_shadow_3d” onclick=”link_image” css_animation=”bounceInDown” css=”.vc_custom_1564595268839{margin-bottom: 20px !important;}”][vc_single_image image=”99203″ img_size=”medium” style=”vc_box_shadow_3d” onclick=”link_image” css_animation=”fadeInLeft”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

The HTML Side

<div id="feedback">
    <div id="feedback-form" style='display:none;' class="col-xs-3 col-md-3 panel panel-default">
        <div id="FBContent">
                <strong>Tell us what do you think about the new design ??</strong>
                <div class="form-group" style="margin-top: 10px; margin-bottom: 50px;">
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <img class="Ratting" id="Rat1" src="LinkToYourImagesLocation/unhappy.png" style="height:32px; margin: 0 auto; display: block;" onclick="Rate(1);"/>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                    <img class="Ratting" id="Rat2" src="LinkToYourImagesLocation/confused.png" style="height:32px; margin: 0 auto; display: block;" onclick="Rate(2);"/>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <img class="Ratting" id="Rat3" src="LinkToYourImagesLocation/smiling.png" style="height:32px; margin: 0 auto; display: block;" onclick="Rate(3);"/>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <img class="Ratting" id="Rat4" src="LinkToYourImagesLocation/happy-2.png" style="height:32px; margin: 0 auto; display: block;" onclick="Rate(4);"/>
                    </div>
                </div>
                <div class="form-group">
                    <textarea class="form-control" name="body" id="C_FeedBack" required placeholder="Please write your feedback here..." rows="4"></textarea>
                </div>
                <button id="BtnFeedBack" class="btn btn-primary pull-right" type="button" onclick="SubmitFeedBack();">Submit</button>
        </div>
        <div id="FBDone" style="display:none">
            <img src="LinkToYourImagesLocation/like.png" style="max-height: 128px; max-width: 128px; display:block; margin:0 auto; margin-top:20px; "/>
            <strong style="display:block; margin: 0 auto; font-size: 24px; font-weight: 600; margin-top: 20px; text-align: center">Thank you !!</strong>
        </div>
    </div>
    <div id="feedback-tab">Feedback</div>
</div>

JavaScript

This function is called when a user clicks on one of the icons, it saves the value selected in a variable and applies some css style to highlight what has been clicked.

var RateValue=0;
        function Rate(X)
        {
            RateValue=X;
            $Object1 = $('#Rat1');
            $Object2 = $('#Rat2');
            $Object3 = $('#Rat3');
            $Object4 = $('#Rat4');
            $Selected = $('#Rat'+X);
            $Object1.css("opacity","0.3");
            $Object2.css("opacity","0.3");
            $Object3.css("opacity","0.3");
            $Object4.css("opacity","0.3");
            $Selected.css("opacity","1");
        }

The next function is the one responsible of storing the data in the SharePoint Custom List (in my case HP_Feedback) and display a thank you message if successful.

function SubmitFeedBack()
        {
            var Comments = $('#C_FeedBack').val();
            createListItem();
            function createListItem() {
            var clientContext = new SP.ClientContext();
            var oList = clientContext.get_web().get_lists().getByTitle('HP_Feedback');

            var itemCreateInfo = new SP.ListItemCreationInformation();
            this.oListItem = oList.addItem(itemCreateInfo);

            oListItem.set_item('Title', RateValue);
            oListItem.set_item('Description', Comments);
            oListItem.update();
            clientContext.load(oListItem);

            clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
            }

            function onQuerySucceeded() {

            $('#FBContent').css("display","none");
            $('#FBLDone').css("display","block");
            }

            function onQueryFailed(sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
            }           
        }

[/vc_column_text][/vc_column][/vc_row]