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

}

5 comments:

  1. Attend The Data Science Training in Bangalore From ExcelR. Practical Data Science Training in Bangalore Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Data Science Courses in Bangalore.
    ExcelR business analytics course in bangalore

    ReplyDelete
  2. Attend The PMP Certification in Abu Dhabi From ExcelR. Practical PMP Certification in Abu Dhabi Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The PMP Certification in Abu Dhabi.
    ExcelR PMP Certification in Abu Dhabi

    ReplyDelete
  3. Attend The PMP Certification From ExcelR. Practical PMP Certification Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The PMP Certification.
    ExcelR PMP Certification

    ReplyDelete
  4. I am impressed by the information that you have on this blog. It shows how well you understand this subject.
    ExcelR data science course in mumbai

    ReplyDelete

Popular Posts