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

}

Create entity in Dynamics 365 new power platform UI

How to Implement Custom Search Control with JQuery tables in Entity Form...

Create your first model driven app in Dynamics 365 power platform