1

I am dynamically creating a progress bar, however, when attempting to set the current step, if my components are dynamically created, they are never set to the step I indicate. Seems to only work If my components are added manually.

Works:

<aura:component >

    <lightning:progressIndicator aura:id="progress-ind" class=" slds-size_4-of-12" currentStep="step1" type="base" hasError="false" variant="base">

    <lightning:progressStep label="Step One" value="step1"/>
    <lightning:progressStep label="Step Two" value="step2"/>
    <lightning:progressStep label="Step Three" value="step3"/>

    </lightning:progressIndicator>

</aura:component>

enter image description here

Doesnt Work:

component.cmp

<aura:attribute name="Requirements" type="Requirement__c[]"/>
<aura:attribute name="RequirementTypes" type="String[]" />
<aura:attribute name="currentStep" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.initSteps}"/>

<lightning:progressIndicator aura:id="progress-ind" class=" slds-size_4-of-12" currentStep="{!v.currentStep}" type="base" hasError="false" variant="base">

    {!v.body}

</lightning:progressIndicator>

controller.js

({
    initSteps : function(cmp, event, helper) {
        var reqTypes = [];
        var steps = cmp.get('v.Requirements'); //returns Server response
        steps.forEach(function(element, index) {
            if(!reqTypes.includes(element.Requirement_Type__r.Name)){
                reqTypes.push(element.Requirement_Type__r.Name);
                helper.helperCreateProgress(cmp, event, element.Requirement_Type__r.Name);
            }
        });
        cmp.set('v.currentStep', reqTypes[0]);
        console.log('currentStep--->',reqTypes[0] ) //returns initial step
    },
})

helper.js

({
helperCreateProgress : function(cmp, evt, stepName) {
    $A.createComponent(
        "lightning:progressStep",
        {
            "label": stepName,
            "value": stepName
        },
        function(newProgressStep, status, errorMessage){
            //Add the component to the body array
            if (status === "SUCCESS") {
                var body = cmp.get("v.body");
                body.push(newProgressStep);
                cmp.set("v.body", body);
            }
            else if (status === "INCOMPLETE") {
                console.log("No response from server or client is offline.")
                // Show offline error
            }
            else if (status === "ERROR") {
                console.log("Error: " + errorMessage);
                // Show error message
            }
        }
    );

},
})

enter image description here

My immediate conclusion is that, the component doesnt support being assigned a startValue dynamically, however, I could be wrong. Has anyone managed to make this work?

  • I had an issue with this during one of my POCs, but this component expects a string in the step. Perhaps you need to forcefully convert the stepName.toString()? – tsalb Aug 9 '18 at 16:48
  • unfortunatelly it does not make a difference. – glls Aug 9 '18 at 16:53
  • so, crazy suggestion, what if you just always converted your step values to indexes, so current step is always 0? This is what I did, but i had to forcefully convert 0 to "0" (string), however I wasn't using $A.createComponent though – tsalb Aug 9 '18 at 17:01
5

As near as I can tell, lightning:progressIndicator only works "on init", which means it has to know the steps at the time its created. The alternative solution, then, is to create the steps first, then the progress indicator itself, and finally throw it into the component hierarchy. Here's a client-side only self-contained example. I'll leave it as an exercise to you to make it work with your code.


<aura:application extends="force:slds">
    {!v.body}
    <aura:handler name="init" action="{!c.init}" value="{!this}" />
</aura:application>

({
    init: function(component, event, helper) {
        $A.createComponents(
            [
                ['lightning:progressStep', { label: 'Step One', value: 'v1'}],
                ['lightning:progressStep', { label: 'Step One', value: 'v2'}],
                ['lightning:progressStep', { label: 'Step One', value: 'v3'}]
            ],
            function(steps) {
                $A.createComponents(
                    [['lightning:progressIndicator', { currentStep: 'v2', body: steps }]],
                    function(indicator) {
                        component.set("v.body", indicator);
                    }
                )
            }
        );
    }
})
| improve this answer | |
  • @glls Disregard my previous comment. It seems I was right, I just ran into a red herring. Create the progressIndicator after the steps for best results. – sfdcfox Aug 9 '18 at 19:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.