Implementing the Clickable Progress Bar in Web form in CrmPortals/PowerApps Portals

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();
    }

}