Summary : Implementing the Clickable Progress Bar in Web form in CrmPortals.
copy the following code and paste in the Javascript field in web page which is your webform associated
Code:
// JavaScript source code
$(document).ready(function () {
applicationNavigationForm();
});
function applicationNavigationForm() {
var i = 1;
$("#WebFormControl_ProgressIndicator ol.progress li").each(function () {
var content = this.innerHTML
if (!$(this).hasClass('active')) {
var link = $('<a>').attr({
href: '#',
title: content,
onclick: 'someFunction(this)',
id: i
}).html(content);
this.innerHTML = "";
$(this).append(link);
}
else if ($(this).hasClass('active')) {
var link = $('<div>').attr({
title: content,
id: i
}).html(content);
this.innerHTML = "";
$(this).append(link);
localStorage.setItem("CurrentStage", i);
$("#WebFormControl_ProgressIndicator ol.progress li a").removeAttr("href");
$("#WebFormControl_ProgressIndicator ol.progress li a").unbind("click");
}
i++;
var stepName = content;
if (stepName != undefined) {
stepName = stepName.replace('<span class="glyphicon glyphicon-ok"></span>', '');
}
});
if (localStorage.getItem("ClickedStage") != undefined && localStorage.getItem("CurrentStage") != undefined) {
if (parseInt(localStorage.getItem("ClickedStage")) == parseInt(localStorage.getItem("CurrentStage"))) {
localStorage.setItem("ClickedStage", null);
localStorage.setItem("CurrentStage", null);
}
else if (parseInt(localStorage.getItem("ClickedStage")) < parseInt(localStorage.getItem("CurrentStage"))) {
$('#PreviousButton').click();
}
else if (parseInt(localStorage.getItem("ClickedStage")) > parseInt(localStorage.getItem("CurrentStage"))) {
$('#NextButton').click();
}
}
}
function someFunction(obj) {
localStorage.setItem("ClickedStage", $(obj).attr('id'));
localStorage.setItem("CurrentStage", $("#WebFormControl_ProgressIndicator ol.progress li div").attr('id'));
var nextButton = $('#NextButton');
if ($("#NextButton").is(":disabled")) {
$('#PreviousButton').click();
}
else if ($(obj).parent().hasClass('text-muted list-group-item-success')) {
$('#PreviousButton').click();
}
else if ($(obj).parent().hasClass('incomplete')) {
nextButton.click();
}
}
