Skip to content

Commit

Permalink
Merge pull request #20 from maaaaarco/spring24
Browse files Browse the repository at this point in the history 
Spring24
  • Loading branch information
@maaaaarco
maaaaarco authored May 24, 2024
2 parents aecec30 + 1c019a0 commit 2ee9d19
Show file tree
Hide file tree
Showing 10 changed files with 14,490 additions and 9,558 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

# Salesforce cache
.sfdx/
.sf/

# LWC VSCode autocomplete
jsconfig.json
Expand Down
2 changes: 1 addition & 1 deletion LICENSE
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2019 Marco Zeuli <marco@spaghetti.dev>;
Copyright (c) 2024 Marco Zeuli <marco@spaghetti.dev>;

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
26 changes: 10 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
# Salesforce-Custom-Path-Assistant-LWC

A custom path assistant built using only Lightning Web Components

## Reasons

Main reason for this project is that currently is not possible to replicate the same look and feel of the Opportunity Sales Path using custom Path Assistants.
When you create a new Path Assistant you can specify an Object, a picklist field and a record type... What you miss is the ability to defines which picklist values are mutually exclusive at the end of the path.
Replicates the same look and feel of the Opportunity Sales Path for any Standard and Custom object.

## Example

Expand All @@ -18,13 +13,7 @@ We have a Project Object used to track the different implementation projects rel
- Failed

We want to display the Status as a path on the Project record page. We want the path to be green in case the status is Completed, red in case the status is Failed.
If we create a Path Assistant and then add the standard _Path_ Lightning component to the record page this is what we get:

![alt text](./doc/images/projectStatus.png 'Project status')

Not really want we wanted! As you can see both values _Completed_ and _Failed_ are displayed. Even worst seems that _Failed_ is the status that comes after _Completed_.

Without creating the Path Assistant we can instead use the custom Lightning Component called _pathAssistant_.
In the Lightning App Builder drag and drop the custom component on the record page and fill the form on the right like this:

![alt text](./doc/images/appBuilder.png 'App Builder')
Expand All @@ -45,9 +34,14 @@ Depending on the final status they pick these can be the results:

![alt text](./doc/images/failed.png 'Failed')

## Requirements

- The picklist field, on which the path is based, has to be included in the Page Layout of the object.
- User has to have Edit permission on the field

## Considerations

This Lightning Web Component is fully aware of its context when added to a Record page. This means that it's not object specific and can be added on any object that has a picklist field.
It doesn't need to use an Apex controller thanks to the _uiRecordApi_ module that provides method to update and retrieve records.
In case your object has multiple record types the picklist values displayed are the one you enabled for it (same as standard Path Assistant).
The only requirements this component has is that the picklist field, on which the path is based, has to be included in the Page Layout of the object.
- This Lightning Web Component is fully aware of its context when added to a Record page. This means that it's not object specific and can be added on any object that has a picklist field.
- You are not required to include the picklist field on the Record Page if you are using Dynamics Form, it's sufficient to include it in the Page Layout.
- It doesn't need to use an Apex controller thanks to the _uiRecordApi_ module that provides method to update and retrieve records.
- In case your object has multiple record types the picklist values displayed are the one you enabled for it (same as standard Path Assistant).
6 changes: 1 addition & 5 deletions config/project-scratch-def.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,5 @@
"orgName": "mzeuli Company",
"edition": "Developer",
"features": [],
"settings": {
"orgPreferenceSettings": {
"s1DesktopEnabled": true
}
}
"settings": {}
}
205 changes: 105 additions & 100 deletions force-app/main/default/lwc/pathAssistant/pathAssistant.html
View file
Original file line number Diff line number Diff line change
@@ -1,116 +1,121 @@
<template>
<!-- error alert -->
<div
if:true={errorMsg}
class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error"
role="alert"
>
<span class="slds-assistive-text">error</span>
<span
class="slds-icon_container slds-icon-utility-error slds-m-right_x-small"
title="Description of icon when needed"
<template lwc:if={errorMsg}>
<div
class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error"
role="alert"
>
<lightning-icon
icon-name="utility:error"
size="small"
></lightning-icon>
</span>
<h2>
{genericErrorMessage}
</h2>
<p>
{errorMsg}
</p>
</div>
<span class="slds-assistive-text">error</span>
<span
class="slds-icon_container slds-icon-utility-error slds-m-right_x-small"
title="Description of icon when needed"
>
<lightning-icon
icon-name="utility:error"
size="small"
></lightning-icon>
</span>
<h2>{genericErrorMessage}</h2>
<p>{errorMsg}</p>
</div>
</template>

<article if:false={errorMsg} class="slds-card">
<div class="slds-card__body slds-card__body_inner">
<!-- path assistant -->
<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">
<!-- spinner -->
<lightning-spinner
variant="brand"
size="small"
if:true={hasToShowSpinner}
>
</lightning-spinner>
<template lwc:else>
<article class="slds-card">
<div class="slds-card__body slds-card__body_inner">
<!-- path assistant -->
<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">
<!-- spinner -->
<lightning-spinner
variant="brand"
size="small"
lwc:if={hasToShowSpinner}
>
</lightning-spinner>

<ul
if:true={isLoaded}
class="slds-path__nav"
role="listbox"
aria-orientation="horizontal"
>
<template for:each={steps} for:item="step">
<li
key={step.value}
class={step.classText}
role="presentation"
<ul
lwc:if={isLoaded}
class="slds-path__nav"
role="listbox"
aria-orientation="horizontal"
>
<template
for:each={steps}
for:item="step"
>
<a
aria-selected="false"
class="slds-path__link"
href="javascript:void(0);"
role="option"
tabindex="-1"
data-value={step.value}
onclick={handleStepSelected}
<li
key={step.value}
class={step.classText}
role="presentation"
>
<span class="slds-path__stage">
<lightning-icon
icon-name="utility:check"
size="xx-small"
variant="inverse"
></lightning-icon>
</span>
<span class="slds-path__title"
>{step.label}</span
<a
aria-selected="false"
class="slds-path__link"
href="javascript:void(0);"
role="option"
tabindex="-1"
data-value={step.value}
onclick={handleStepSelected}
>
</a>
</li>
</template>
</ul>
<span
class="slds-path__stage"
>
<lightning-icon
icon-name="utility:check"
size="xx-small"
variant="inverse"
></lightning-icon>
</span>
<span
class="slds-path__title"
>{step.label}</span
>
</a>
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
<div
if:false={hideUpdateButton}
class="slds-grid slds-path__action"
>
<template if:true={isLoaded}>
<!-- button enabled -->
<button
if:false={isUpdateButtonDisabled}
type="button"
class="slds-button slds-button_brand slds-path__mark-complete"
onclick={handleUpdateButtonClick}
>
{updateButtonText}
</button>
<div
lwc:if={displayUpdateButton}
class="slds-grid slds-path__action"
>
<template lwc:if={isLoaded}>
<!-- button disabled -->
<button
lwc:if={isUpdateButtonDisabled}
type="button"
class="slds-button slds-button_brand slds-path__mark-complete"
disabled="disabled"
>
{updateButtonText}
</button>

<!-- button disabled -->
<button
if:true={isUpdateButtonDisabled}
type="button"
class="slds-button slds-button_brand slds-path__mark-complete"
disabled="disabled"
>
{updateButtonText}
</button>
</template>
<!-- button enabled -->
<button
lwc:else
type="button"
class="slds-button slds-button_brand slds-path__mark-complete"
onclick={handleUpdateButtonClick}
>
{updateButtonText}
</button>
</template>
</div>
</div>
</div>
</div>
</div>
</article>
</article>
</template>

<!-- modal to select a closed step -->
<section
if:true={openModal}
lwc:if={openModal}
role="dialog"
tabindex="-1"
aria-labelledby="modal-heading-01"
Expand Down Expand Up @@ -161,9 +166,9 @@ <h2>
for:each={closedSteps}
for:item="step"
>
<option key={step.index} value={step.value}
>{step.label}</option
>
<option key={step.index} value={step.value}>
{step.label}
</option>
</template>
</select>
</div>
Expand All @@ -186,5 +191,5 @@ <h2>
</footer>
</div>
</section>
<div if:true={openModal} class="slds-backdrop slds-backdrop_open"></div>
<div lwc:if={openModal} class="slds-backdrop slds-backdrop_open"></div>
</template>
Loading

0 comments on commit 2ee9d19

Please sign in to comment.