Pages

Friday, April 15, 2016

How to Add Item or Data In Survey List's Rating Scale Column in SharePoint

Introduction

Survey lists are useful lists when it comes to getting a feedback from bulk of people. It provides lots of column types by which we can create questions. It also provides a column type name as "Rating Scale".

To know more about Rating Scale column, click here!

Here, I will demonstrate how to add an item to a Survey list particularly in to this "Rating Scale" column type and it's sub questions.

Prerequisites


Here, prerequisites requires knowledge of:

2. CSOM
3. JQuery


Let's get started...

Let's create a test survey list in SharePoint and we will name it as "TestSurvey".

In this list, we will add 3 questions or columns:

1. Requester Name - Single Line of Text as a column type



2. Supplier Name - Single Line of Text as a column type


3.  How would you rate Vendor in the below categories? - Rating Scale as a column type

So, in above Rating Scale question, as we can see that the main question heading/title is "How would you rate Vendor in the below categories?" and the sub- questions are:
"Overall performance", "Quality of deliverable", "Timeliness", "Ease of use (how easy it was to work with the vendor and/or their system)", "Cost" (all in separate lines).

"Number Range", I have kept as is and it is set to 5. "Range Text" is showing "Low", "Average" and "High".


This is how our Survey's new form will looks like:


Our Survey list is ready with questions along with our Rating Scale set of questions.

We will now add a response to this Survey using custom code.

Adding data to Survey using code

Adding a response to "Single line of text" type column is straight forward but when it comes to "Rating Scale" type column, we have to consider few things.

For adding/inserting data to "Rating Scale" type column, we need to first enter the sub-category question text and then separate its rating by ";#" then enter rating and then again put "#". 

For e.g., in our case "Overall performance" is a sub-category question. So, when adding/inserting the data for this sub-category question to the Survey list, we will separate it like - "Overall performance;#5#". 

This will insert rating of "Overall performance" as "5". If you notice, I have given the exact text of a sub-category question including the spaces.

To add ratings to other columns, for e.g., this time we will add rating to "Overall performance" and "Quality of deliverable", we will format our code as following:
"Overall performance;#5#Quality of deliverable;#4#".

This will insert "Overall performance" rating with "5" and "Quality of deliverable" as "4".

The exact code will be:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnSave").click(function () {
                SaveData();
            });
        });

        function SaveData() {
            var currClientContext = new SP.ClientContext.get_current();
            var currList = currClientContext.get_web().get_lists().getByTitle('TestSurvey');
            var itemCreateInfo = new SP.ListItemCreationInformation();
            var oListItem = currList.addItem(itemCreateInfo);
            oListItem.set_item('Requester_x0020_Name', "Sunny Bahree");
            oListItem.set_item('Supplier_x0020_Name', "Sunny Bahree");
            oListItem.set_item('How_x0020_would_x0020_you_x0020_', "Overall performance;#5#Quality of deliverable;#4#Timeliness;#3#Ease of use (how easy it
was to work with the vendor and/or their system);#4#Cost;#5#"
);
            oListItem.update();
            currClientContext.load(oListItem);
            currClientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
            function onQuerySucceeded() {
            }

            function onQueryFailed(sender, args) {
                console.log('Request failed for TestSurvey function. ' + args.get_message() + '\n' + args.get_stackTrace());
            }
        }
    </script>
</head>
<body>
    <input type="button" id="btnSave" value="Save" />
</body>
</html>

As you can see in above code, I have added a "Save" button to a page and clicking on this "Save" button will add and save response to the "Survey" list with "Requester Name" and "Supplier Name" as "Sunny Bahree".

To the question of "How would you rate the Vendor in the below categories?", the sub-category questions i.e. "Overall performance" will have rating as "5", "Quality of deliverable" will have rating as "4", "Timeliness" will have "3", "Ease of use" will have "4" and "Cost" will have rating as "5".

This how the response will look like after it gets saved into our "TestSurvey" list:


Conclusion

We have seen in this post on how we can add ratings to a Survey list using custom code particularly to a Rating Scale column. Hope it will help!

No comments:

Post a Comment