Web Template implementation- to generate and capture Assessment Forms from Dynamics Table created in the 2nd part of this topic.
Go to the Web Template created in the 1st part of this topic and paste the below snippet into it
<script>
(function(webapi, $){
function safeAjax(ajaxOptions) {
var deferredAjax = $.Deferred();
shell.getTokenDeferred().done(function (token) {
// add headers for ajax
if (!ajaxOptions.headers) {
$.extend(ajaxOptions, {
headers: {
"__RequestVerificationToken": token
}
});
} else {
ajaxOptions.headers["__RequestVerificationToken"] = token;
}
$.ajax(ajaxOptions)
.done(function(data, textStatus, jqXHR) {
validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
}).fail(deferredAjax.reject); //ajax
}).fail(function () {
deferredAjax.rejectWith(this, arguments); // on token failure, pass the token ajax and args
});
return deferredAjax.promise();
}
webapi.safeAjax = safeAjax;
})(window.webapi = window.webapi || {}, jQuery)
</script>
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/browse/survey-jquery@1.9.79/survey.jquery.js"></script>
<link href="https://unpkg.com/survey-jquery/modern.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/survey-jquery/1.9.76/survey.jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<form>
<div class="loader" id="page-loader"></div>
<div class="form-group">
<div id="surveyElement"></div>
</div>
<div class="form-group">
<div class="alert alert-info text-center scrolling-text" role="alert" id="save-info">
</div>
</div>
</form>
<script type="text/javascript">
var survey;
var formID = "{{request.params.id}}";
$(document).ready(function()
{
getSurveyData();
});
function getSurveyData()
{
$('#page-loader').show();
webapi.safeAjax({
type: "GET",
url: "/_api/cr84c_formspayload("+formID+")?$select=cr84c_surveyjspayload,cr84c_surveyresponseobject",
contentType: "application/json",
success: function (data, textStatus, xhr)
{
var result = data;
console.log(result);
var cr84c_payload = result["cr84c_surveyjspayload"]; // Multiline Text
var surveyJSON = JSON.parse(cr84c_payload);
var storedSurveyResponse = result["cr84c_surveyjspayload"];
storedSurveyResponse = JSON.parse(storedSurveyResponse);
survey = new Survey.Model(surveyJSON);
survey.data = storedSurveyResponse;
survey.onPartialSend.add(function(sender)
{
saveSurveyData(sender);
});
survey.sendResultOnPageNext = true;
$("#surveyElement").Survey({model: survey});
// Render the SurveyJS object to the page
survey.render("surveyElement");
$('#page-loader').hide();
$('#save-info').show();
$("#save-info").text("");
var message = "Your responses would be saved on navigating through pages while not completing all required fields. In order to submit/complete the form all the required fields must be filled.";
$("#save-info").text(message);
survey.onComplete.add((survey, options) => { registerSurveyCompleteHandler("complete") });
survey.onPartialSend.add((survey) => { registerSurveyCompleteHandler("draft") });
},
error: function (xhr, textStatus, errorThrown)
{
$('#page-loader').hide();
console.log(xhr);
}
})
}
function registerSurveyCompleteHandler(actionType)
{
$('#page-loader').show();
debugger;
var title = "dummy";
var pages = [];
var questionNumber = "";
var elements = {};
for (var i = 0; i < survey.visiblePages.length; i++)
{
var page = survey.visiblePages[i];
var questions = page.questions;
for (var j = 0; j < questions.length; j++)
{
var question = questions[j];
questionNumber = question.name;
elements[questionNumber] = survey.data[question.name];
}
}
var record = {};
record.cr84c_surveyresponseobject = JSON.stringify(elements); // Multiline Text
webapi.safeAjax({
type: "PATCH",
contentType: "application/json",
url: "/_api/cr84c_formspayload("+formID+")",
data: JSON.stringify(record),
success: function (data, textStatus, xhr)
{
$('#page-loader').hide();
console.log("Record updated");
},
error: function (xhr, textStatus, errorThrown)
{
console.log(xhr);
}
});
}
function saveSurveyData(survey)
{
var data = survey.data;
data.pageNo = survey.currentPageNo;
//window.localStorage.setItem(storageName, JSON.stringify(data));
registerSurveyCompleteHandler("draft");
}
</script>
Comments
Post a Comment