Build a Chevron Process View Using Salesforce Lightning Framework
Output :
1) Survey.cmp
<aura:component >
<aura:attribute name="selectedStep" type="string" default="stage1"/>
<aura:attribute name="options" type="List" default="[
{'label': 'Yes', 'value': 'option1'},
{'label': 'No', 'value': 'option2'}
]"/>
<aura:attribute name="value" type="String" default="option1"/>
<div class="slds-m-around_xx-large">
<lightning:progressIndicator currentStep="{!v.selectedStep}" type="path">
<lightning:progressStep label="2019" value="stage1" onclick="{!c.selectstage1}" class="slds-progress-bar__value slds-progress-bar__value_success"/>
<lightning:progressStep label="2020" value="stage2" onclick="{!c.selectstage2}"/>
<lightning:progressStep label="2021" value="stage3" onclick="{!c.selectstage3}"/>
<lightning:progressStep label="2022" value="stage4" onclick="{!c.selectstage4}"/>
</lightning:progressIndicator>
<div class="slds-p-around--medium">
<div class="{!v.selectedStep == 'stage1' ? 'slds-show' : 'slds-hide'}">
<lightning:radioGroup name="radioGroup"
label="1) Do You Live in USA ?"
options="{! v.options }"
value="{! v.value }"
type="radio"/>
</div>
<div class="{!v.selectedStep == 'stage2' ? 'slds-show' : 'slds-hide'}">
<p><b>Step 2</b></p>
</div>
<div class="{!v.selectedStep == 'stage3' ? 'slds-show' : 'slds-hide'}">
<p><b>Step 3</b></p>
</div>
<div class="{!v.selectedStep == 'stage4' ? 'slds-show' : 'slds-hide'}">
<p><b>Step 4</b></p>
</div>
</div>
<div>
<button disabled="{!v.selectedStep != 'stage1' ? '' : 'disabled'}" class="slds-button slds-button--neutral" onclick="{!c.handlePrev}">Back</button>
<aura:if isTrue="{!v.selectedStep != 'stage4'}">
<button class="slds-button slds-button--brand" onclick="{!c.handleNext}">Next</button>
</aura:if>
<aura:if isTrue="{!v.selectedStep == 'stage4'}">
<button class="slds-button slds-button--brand" onclick="{!c.handleFinish}">Finish</button>
</aura:if>
</div>
</div>
</aura:component>
---------------------
2) SurveyController.js
({
handleNext : function(component,event,helper){
var getselectedStep = component.get("v.selectedStep");
if(getselectedStep == "stage1"){
component.set("v.selectedStep", "stage2");
}
else if(getselectedStep == "stage2"){
component.set("v.selectedStep", "stage3");
}
else if(getselectedStep == "stage3"){
component.set("v.selectedStep", "stage4");
}
},
handlePrev : function(component,event,helper){
var getselectedStep = component.get("v.selectedStep");
if(getselectedStep == "stage2"){
component.set("v.selectedStep", "stage1");
}
else if(getselectedStep == "stage3"){
component.set("v.selectedStep", "stage2");
}
else if(getselectedStep == "stage4"){
component.set("v.selectedStep", "stage3");
}
},
handleFinish : function(component,event,helper){
alert('Finished...');
component.set("v.selectedStep", "stage1");
},
selectstage1 : function(component,event,helper){
component.set("v.selectedStep", "stage1");
},
selectstage2 : function(component,event,helper){
component.set("v.selectedStep", "stage2");
},
selectstage3 : function(component,event,helper){
component.set("v.selectedStep", "stage3");
},
selectstage4 : function(component,event,helper){
component.set("v.selectedStep", "stage4");
},
})
3) Launch the App
<aura:application extends="force:slds"> <c:Survey /></aura:application>
