Apex Code Development You need to sign in to do that
Don't have an account?
Custom Path Component
Hi, I am looking for some suggestions (and possible examples) for a custom path component.
My primary requirements are that the component retain the step wording (not changing to the checkmark after passing a step), be able to edit the colors for each step of the path, and the key fields may have more than 5 fields for a step.
It does not have to be a "path component" since it will be custom, but my client likes the look of the path. However, this path is for projects that often require them to skip a step or complete a future step before a current step. So I would like to be able to customize the colors and leave the words. If they have completed all necessary fields, I want to show the step in green, if there are fields left to be completed, show it in yellow, and if nothing is completed it can be white/gray, etc. I also want to leave the words so they can easily see the step names.
I have looked at both aura component and LWC. I prefer LWC development but it looked like aura components might be easier to adjust the colors on? The other requirement is that I need to be able to have more than five fields, which in a custom component shouldn't be an issue since I can show/hide the form data myself.
Anyone have any suggestions based on creating custom paths? Or a suggestion on which way to proceed, aura or LWC, and why.
Thanks in advance,
Rebekah
My primary requirements are that the component retain the step wording (not changing to the checkmark after passing a step), be able to edit the colors for each step of the path, and the key fields may have more than 5 fields for a step.
It does not have to be a "path component" since it will be custom, but my client likes the look of the path. However, this path is for projects that often require them to skip a step or complete a future step before a current step. So I would like to be able to customize the colors and leave the words. If they have completed all necessary fields, I want to show the step in green, if there are fields left to be completed, show it in yellow, and if nothing is completed it can be white/gray, etc. I also want to leave the words so they can easily see the step names.
I have looked at both aura component and LWC. I prefer LWC development but it looked like aura components might be easier to adjust the colors on? The other requirement is that I need to be able to have more than five fields, which in a custom component shouldn't be an issue since I can show/hide the form data myself.
Anyone have any suggestions based on creating custom paths? Or a suggestion on which way to proceed, aura or LWC, and why.
Thanks in advance,
Rebekah
Creating a custom path component with the requirements you mentioned can be achieved with either Aura components or LWC. However, LWC is the newer technology, and it provides better performance and features compared to Aura. So, I would recommend using LWC for your custom path component.
To achieve your requirements, you can create a custom LWC component that displays each step of the path with a checkbox and the step name. You can customize the color of each step based on whether the fields are completed or not by using CSS styles. For example, you can add a class to the step element based on its status (completed, incomplete, skipped) and define the color of the element based on the class using CSS.
To handle the case where a step has more than five fields, you can use a modal dialog or a pop-up window to display the additional fields. You can use the Lightning Design System (LDS) to style the modal dialog or pop-up window to match the look and feel of the path component.
Here is an example of a custom path component created using LWC that meets your requirements:
Code:-
<div class="slds-path">
<ul class="slds-path__nav" role="listbox">
<template for:each={steps} for:item="step">
<li key={step.label} class="slds-path__item slds-is-incomplete">
<a class="slds-path__link" href="javascript:void(0);" role="option" tabindex="0">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href={step.icon}></use>
</svg>
<span class="slds-path__title">{step.label}</span>
</span>
<span class="slds-assistive-text">{step.label}</span>
</a>
</li>
</template>
</ul>
</div>
</template>
In this example, the steps variable is an array of step objects that contain the label, icon, and status of each step. You can set the status of each step based on whether the fields are completed or not. For example, you can set the status of a step to 'completed' if all the required fields in that step are completed.
I hope this helps! Let me know if you have any further questions.
Regards