Poll webpart using REST and Angularjs in SharePoint 2013

Poll web part will allow users to select one out of 2 to 5 choices and see the results right away, and cannot vote twice for same Poll question.

There are few available in SharePoint App store but most are paid and other I don’t like, so decided to create mine own as it should be easy right, well almost.

So here is the output we are trying to achieve:

Requirements:

• User can vote only once for one poll
• User should see results right away as soon he/she votes
• If already voted, show result view
• The result should show the total votes and % of each vote
• The Web Part should be responsive
• The poll can have max 5 and minimum of 2 choices
• Adding question and answers should be super easy for authors

Solution:

We decided to use REST & Angularjs to accomplish this task and using SP List as database as it was internal weekly Poll for our landing page.

You can add angularjs, jquery in masterpage, page layout or just local for this web part.

So let’s create database first, I mean custom lists 🙂

We need to Create three lists:

1. Poll Questions
2. Poll Logs
3. Poll Symbols (You can omit this list if don’t want to use icons in Title, I love to add little things to play with)

The columns for Poll Questions:

This list will have Question and particular answers. Active (Yes/No) will decide which Poll is currently active and can be automated using workflow or manually. But only top one question will shown in webpart. The columns with count in name will have to count of the answers and total count of votes.

Symbol is a lookup column based on list Poll Symbols title.

Column Name	Type	Required
Question	Single line of text	True
Answer1	Single line of text	True
Answer2	Single line of text	True
Answer3	Single line of text	False
Answer4	Single line of text	False
Answer5	Single line of text	False
Symbol	Lookup	True
Active	Yes/No	True
CountAnswer1	Number	False
CountAnswer2	Number	False
CountAnswer3	Number	False
CountAnswer4	Number	False
CountAnswer5	Number	False
TotalCount	Number	False

The columns for Poll Logs:

This list will keep record of the users who has voted for particular Poll.

The columns for Poll Symbols:
This list will be lookup for Poll Question and contains the name and value of Font Awesome icons

The list will look like:

Now our database is ready let’s do some coding.

Here is the process I’m following:

The HTML you need is following. I added it as Script Editor webpart and paste it in it.

This solution is using Bootstrap CSS.

 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.2%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.5%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fsites%2FStyle%2520Library%2Fjs%2Fmain.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

    
<div ng-app="ng-app-polls">
        
<div ng-controller="pollSubmitCtrl">
            
<div>
                
<div class="panel panel-primary" ng-show="poll.hasData">
                    
<div class="panel-heading">
                        
<h3 class="panel-title"><i class="fa fa-lg {{poll.Question.Symbol}}"></i>{{poll.Question.Text}}</h3>

                    </div>

                    
<div ng-show="!poll.result">
                        
<div class="panel-body">
                            
<ul class="list-group ulpoll">
                                
<li class="list-group-item" ng-repeat="answer in poll.Answers" ng-style="{ 'background-color' : $index == selectedIndex ? '#f5f5f5' : '' }" ng-click="selectedAnswer($index)">

<div class="radio">
                                        <label>
                                            <input type="radio" ng-model="poll.selectedAnswer" ng-value="{{ answer.Id }}" name="radioPollAnswers">
                                            {{ answer.Text }}
                                        </label>
                                    </div>

                                </li>

                            </ul>

                        </div>

                        
<div class="panel-footer text-center">
                            <button type="button" class="btn btn-success btn-md" ng-disabled="!poll.selectedAnswer" ng-click="pollSubmit()">
                                <span class="fa fa-check-square-o fa-lg"></span>Vote
                            </button>
                        </div>

                    </div>

                    
<div ng-show="poll.result">
                        
<div class="panel-body">
                            
<ul class="list-group ulpoll">
                                
<li class="list-group-item" ng-repeat="answer in poll.Answers">

<div class="pollAnswer">
                                        <span>{{ answer.Text }}</span><span class="pollPercent">{{answer.Percent}}</span>
                                    </div>

                                    
<div class="progress">
                                        
<div class="progress-bar" role="progressbar" aria-valuenow="{{ answer.Count }}" aria-valuemin="0" aria-valuemax="100" ng-style="{'width': answer.Percent}">
                                            <span class="sr-only">{{answer.Percent}}</span>
                                        </div>

                                    </div>

                                </li>

                            </ul>

                        </div>

                        
<div class="panel-footer">
                            
<div ng-show="poll.result">
                                

Total - {{ poll.Question.Total }}

                            </div>

                        </div>

                    </div>

                </div>

                
<div ng-show="!poll.hasData">
                    
<div class="alert alert-danger" role="alert">No Active Poll for now.</div>

                </div>

            </div>

        </div>

    </div>

Add the following code in main.js. I’m not going to go in details of angular code or there may be better way of doing it. I’m also learning it day by day, this works for me.

var PollQuestionslistName = 'Poll Questions';
var PollLogslistName = 'Poll Logs';

var appPollResults = angular.module('ng-app-polls', []);

//Controller
appPollResults.controller('pollSubmitCtrl', function ($scope, pollResultsService) {
    $scope.poll = [];

    $scope.getUserDetails = function (pollData) {
        pollResultsService.getUserDetailById(pollData.Question.Id)
        .then(
        function (isSubmitted) {

            pollData.result = isSubmitted;
            $scope.poll = pollData;
        }
        );
    }

    $scope.getPollsData = function () {
        pollResultsService.getPollDetails(PollQuestionslistName)
        .then(
        function (pollData) {
            $scope.getUserDetails(pollData);
        }
        );
    }

    $scope.pollSubmit = function () {

        pollResultsService.getLoginName()
        .then(
        function (userLogin) {
            pollResultsService.setUserDetailById($scope.poll.Question.Id, $scope.poll.selectedAnswer, userLogin)
            .then(
            function (success) {
                if (success) {
                    pollResultsService.getItemById($scope.poll.Question.Id)
                    .then(
                    function (data1, pollData) {
                        var selectedAns = $scope.poll.selectedAnswer;
                        pollResultsService.setPollDetails(selectedAns, data1, pollData)
                        .then(
                        function (success) {
                            if (success) {
                                pollResultsService.getPollDetails(PollQuestionslistName)
                                .then(
                                function (pollData) {
                                    pollData.result = true;
                                    $scope.poll = pollData;
                                });
                            }
                        }
                        );
                    }
                    );
                } else {
                    alert('unknown error occured');
                }
            });
        });
    }

    $scope.getPollsData();

    $scope.selectedIndex = null;
    $scope.selectedAnswer = function (index) {
        $scope.selectedIndex = index;
    }

});

//Services
appPollResults.service(
        'pollResultsService',
        function ($http, $q) {
            return ({
                getPollDetails: getPollDetails,
                setPollDetails: setPollDetails,
                setUserDetailById: setUserDetailById,
                getUserDetailById: getUserDetailById,
                getItemById: getItemById,
                getLoginName: getLoginName
            });

            //Get the Poll Question and Answers
            function getPollDetails() {

                var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + PollQuestionslistName + "')/Items?$Select=";
                fullUrl += 'ID,Title,Answer1,Answer2,Answer3,Answer4,CountAnswer1,CountAnswer2,CountAnswer3,CountAnswer4,TotalCount,Symbol/Value&$expand=Symbol&$orderby=ID desc&$filter=Active eq 1&$Top=1';

                var request = $http({
                    method: 'Get',
                    url: fullUrl,
                    headers: { "accept": "application/json;odata=verbose" }
                });

                return (request.then(successGetPollDetails, handleError));
            }

            //Success Poll Details
            function successGetPollDetails(data) {
                var pollData;
                if (data.data.d.results.length > 0) {
                    var result = data.data.d.results[0];
                    var percent1 = ((result.CountAnswer1 / result.TotalCount) * 100).toFixed(0) + '%';
                    var percent2 = ((result.CountAnswer2 / result.TotalCount) * 100).toFixed(0) + '%';
                    var percent3 = ((result.CountAnswer3 / result.TotalCount) * 100).toFixed(0) + '%';
                    var percent4 = ((result.CountAnswer4 / result.TotalCount) * 100).toFixed(0) + '%';
                    var percent5 = ((result.CountAnswer5 / result.TotalCount) * 100).toFixed(0) + '%';

                    pollData = angular.fromJson({
                        "hasData": true,
                        "result": false,
                        "Question": {
                            "Id": result.ID,
                            "Text": result.Title,
                            "Symbol": result.Symbol.Value,
                            "Total": result.TotalCount
                        },
                        "Answers": [{
                            "Id": 1,
                            "Text": result.Answer1,
                            "Count": result.CountAnswer1,
                            "Percent": percent1
                        }, {
                            "Id": 2,
                            "Text": result.Answer2,
                            "Count": result.CountAnswer2,
                            "Percent": percent2
                        }]
                    });

                    if (result.Answer3) {
                        var obj = {};
                        obj["Id"] = 3;
                        obj["Text"] = result.Answer3;
                        obj["Count"] = result.CountAnswer3;
                        obj["Percent"] = percent3;
                        pollData.Answers.push(obj);
                    }
                    if (result.Answer4) {
                        var obj = {};
                        obj["Id"] = 4;
                        obj["Text"] = result.Answer4;
                        obj["Count"] = result.CountAnswer4;
                        obj["Percent"] = percent4;
                        pollData.Answers.push(obj);
                    }
                    if (result.Answer5) {
                        var obj = {};
                        obj["Id"] = 5;
                        obj["Text"] = result.Answer5;
                        obj["Count"] = result.CountAnswer5;
                        obj["Percent"] = percent5;
                        pollData.Answers.push(obj);

                    }
                } else {
                    pollData = angular.fromJson({
                        "hasData": false,
                        "result": false,
                        "Question": {
                            "Id": 0,
                            "Text": "",
                            "Symbol": "",
                            "Total": 0
                        },
                        "Answers": [{}]
                    });
                }
                return (pollData);
            }

            //Set the Poll Details
            function setPollDetails(selectedAnsId, data1) {

                var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + PollQuestionslistName + "')/items";
                var itemType = "SP.Data." + PollQuestionslistName + "ListItem";

                var selAns = 'CountAnswer' + selectedAnsId;
                var value = '';
                var cat = {
                    '__metadata': { "type": itemType }
                };

                if (selectedAnsId == '1') {
                    value = data1.data.d.CountAnswer1;
                } else if (selectedAnsId == '2') {
                    value = data1.data.d.CountAnswer2;
                } else if (selectedAnsId == '3') {
                    value = data1.data.d.CountAnswer3;
                } else if (selectedAnsId == '4') {
                    value = data1.data.d.CountAnswer4;
                else {
                    value = data1.data.d.CountAnswer5;
                }

                cat[selAns] = value + 1;
                cat['TotalCount'] = data1.data.d.TotalCount + 1;

                var request = $http({
                    url: data1.data.d.__metadata.uri,
                    method: "POST",
                    data: JSON.stringify(cat),
                    headers: {
                        "Accept": "application/json;odata=verbose",
                        "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                        "X-HTTP-Method": "MERGE",
                        "Content-Type": "application/json;odata=verbose",
                        "If-Match": data1.data.d.__metadata.etag
                    }
                });


                return (request.then(successSetPollDetails, handleError));
            }

            function successSetPollDetails(data) {

                return true;
            }

            //Set the Poll Details
            function setUserDetailById(QuestionId, selectedAnswer, userLogin) {

                var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + PollLogslistName + "')/items";
                var itemType = "SP.Data." + PollLogslistName + "ListItem";

                var cat = {
                    "__metadata": { "type": itemType },
                    "Title": userLogin.UserName,
                    "loginid": userLogin.UserId,
                    "userid": _spPageContextInfo.userId,
                    "SelectedAnswer":String(selectedAnswer),
                    "QuestionId": String(QuestionId)
                };

                var request = $http({
                    url: fullUrl,
                    method: "POST",
                    data: JSON.stringify(cat),
                    headers: {
                        "Accept": "application/json;odata=verbose",
                        "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                        "Content-Type": "application/json;odata=verbose"
                    }
                });

                return (request.then(successSetUserDetailById, handleError));
            }

            function successSetUserDetailById(data) {
                return true;
            }

            function getUserDetailById(itemID) {

                var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + PollLogslistName + "')/Items?$Select=";
                fullUrl += "Title,QuestionId&$filter=userid eq '" + _spPageContextInfo.userId + "' and QuestionId eq '" + itemID + "'&$top=1";

                var request = $http({
                    method: 'Get',
                    url: fullUrl,
                    headers: { "accept": "application/json;odata=verbose" }
                });

                return (request.then(successGetUserDetailById, handleError));
            }

            function successGetUserDetailById(data) {
                if (data.data.d.results.length > 0) {
                    return true;
                } else {
                    return false;
                }

            }

            function getItemById(itemID) {

                var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + PollQuestionslistName + "')/Items('" + itemID + "')";

                var request = $http({
                    url: fullUrl,
                    Method: "GET",
                    headers: { "accept": "application/json;odata=verbose" },
                });

                return (request.then(successGetItemById, handleError));
            }

            function successGetItemById(data) {
                return data;
            }

            function getLoginName() {
                var userid = _spPageContextInfo.userId;
                var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";

                var request = $http({
                    url: fullUrl,
                    contentType: "application/json;odata=verbose",
                    Method: "GET",
                    headers: { "accept": "application/json;odata=verbose" },
                });

                return (request.then(successGetLoginName, handleError));
            }

            function successGetLoginName(data) {
                var lname = data.data.d.LoginName;
                lname = lname.split("|")[1];
                var userLogin = {
                    "UserName": data.data.d.Title,
                    "UserId": lname,
                    "Email": data.data.d.Email
                }
                return userLogin;
            }

            //Handle Error
            function handleError(response) {

                if (
                    !angular.isObject(response.data) ||
                    !response.data.message
                    ) {
                    return ($q.reject("An unknown error occurred."));
                }
                // Otherwise, use expected error message.
                return ($q.reject(response.data.message));
            }
        }
);

Well that’s it. If you find any issues or have question please leave a comment.

Source Code: Poll WebPart