Technology has always been a bridge, but today, it feels more like a mirror. With the rapid rise of AI , we are seeing things enter our lives and leave them at a pace we can barely track. To understand where this is going, we first have to understand how technology actually impacts the core of who we are. The Survivalist vs. The Ego Our minds are biologically wired for one thing: survival . We are designed to handle the worst-case scenario, an ancient instinct gifted to us by nature. We consider ourselves conscious decision-makers, but a critical question remains: Who is really making the call?
SLDS path is a graphical representation of the process. Here is a component for this. Just pass the status of the process in this component.
 |
| SLDS Path |
Component:
<apex:component >
<apex:attribute name="Status" type="string" required="false" description="Status" default="Submit"/>
<article class="slds-card">
<div class="slds-card__body slds-card__body_inner">
<div class="slds-path">
<div class="slds-grid slds-path__track">
<div class="slds-grid slds-path__scroller-container">
<div class="slds-path__scroller" role="application">
<div class="slds-path__scroller_inner">
<ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
<apex:outputPanel >
<li class="slds-path__item slds-is-won" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-6" role="option" tabindex="-1">
<span class="slds-path__stage">
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span style="color:white;">Record No</span>
</a>
</li>
</apex:outputPanel>
<li class="slds-path__item {!CASE(Status,'Draft','slds-is-current slds-is-active','Cancelled','slds-is-incomplete','Submit','slds-is-complete','Approved','slds-is-complete','slds-is-incomplete')}" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-6" role="option" tabindex="-1">
<span class="slds-path__stage">
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span>Draft</span>
</a>
</li>
<li class="slds-path__item {!CASE(Status,'Submit','slds-is-current slds-is-active','Draft','slds-is-complete','Approved','slds-is-incomplete','slds-is-incomplete')}" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-7" role="option" tabindex="-1">
<span class="slds-path__stage">
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span >Submit</span>
</a>
</li>
<li class="slds-path__item {!CASE(Status,'Approved','slds-is-current slds-is-active','Draft','slds-is-incomplete','slds-is-incomplete')}" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-7" role="option" tabindex="-1">
<span class="slds-path__stage">
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span >Approved</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</apex:component>