+ Start a Discussion
Stéphane C.Stéphane C. 

Add the new lightning "picklistPath" component to work order

Hi,

I try to add the new lightning "picklistPath" component to work order.

I write the code to cmp :
 
<aura:componentimplements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId">
    <force:recordData aura:id="propertyService" recordId="{!v.recordId}"targetFields="{!v.WorkOrder}" layoutType="FULL" mode="EDIT" />
    <div class="slds-card">
        <lightning:picklistPath aura:id="picklistPath" recordId="{!v.recordId}"
            variant="non-linear"
            picklistFieldApiName="Status"
            onselect="{!c.handleSelect}">
        </lightning:picklistPath>
    </div>
</aura:component>

I write this code to js :
 
({
    handleSelect : function (component, event, helper) {
    var stepName = event.getParam("detail")
        .value;
    component.set("v.WorkOrder.Status", stepName);
    component.find("v.propertyService")
        .saveRecord($A.getCallback(function(result) {
            console.log(result.state);
            if (result.state === "SUCCESS" || result.state === "DRAFT")
            {
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    "title": "Success!",
                    "message": "Le statut de l'intervention a été mis à jour à " + stepName + ".",
                    "type": "succes"
                });             
                toastEvent.fire();
            }
        }))
    }
})

I can't find what it is wrong.

I am inspiring from this webinar : https://youtu.be/WsVW5qU4XWI?t=35m24s
Best Answer chosen by Stéphane C.
Alain CabonAlain Cabon
Ok, I see where the problem is indeed.  I fixed it below.
 
({
    handleSelect : function (component, event, helper) {
        var stepName = event.getParam("detail").value;
        component.set("v.simpleRecord.Status__c", stepName);
        component.find("propertyService")
        .saveRecord($A.getCallback(function(result) {
            console.log(result.state);
            if (result.state === "SUCCESS" || result.state === "DRAFT")
            {
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    "title": "Success!",
                    "message": "Le statut de l'intervention a été mis à jour à " + stepName + ".",
                    "type": "succes"
                });             
                toastEvent.fire();
            }
        }))
    }
})
 
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="simpleRecord" type="Object"/>
    <force:recordData aura:id="propertyService" recordId="{!v.recordId}"
                      targetFields="{!v.simpleRecord}" layoutType="FULL" mode="EDIT" />
    <div class="slds-card">
        <lightning:picklistPath aura:id="picklistPath" recordId="{!v.recordId}"
            variant="non-linear"
            picklistFieldApiName="Status__c"
            onselect="{!c.handleSelect}">
        </lightning:picklistPath>
    </div>
</aura:component>

AIain

All Answers

Alain CabonAlain Cabon
Hello,

You find an aura:id not an attribute here so you don't need the  v.

 component.find("propertyService")

... and your code will work perfectly.
Alain CabonAlain Cabon
picklistFieldApiName="Status" (standard field)  or "Status__c" is you use a custom field.
Stéphane C.Stéphane C.
Hi Alain,

Did you test it on WorkOrder? It's not working for me (with your recommendations too)

Any idea? Perhaps it doesn't work on this satndard object.
Stéphane C.Stéphane C.
Hi Alain,

When I change the picklist value, the path change. But when I click on a path value, the picklist value don't change.

I have also a stange behaviour when I change the picklist value, the path values before the selected one don't pass to green.
Stéphane C.Stéphane C.
Did you see the video? The behaviours are not equal.
Alain CabonAlain Cabon
Ok, I see where the problem is indeed.  I fixed it below.
 
({
    handleSelect : function (component, event, helper) {
        var stepName = event.getParam("detail").value;
        component.set("v.simpleRecord.Status__c", stepName);
        component.find("propertyService")
        .saveRecord($A.getCallback(function(result) {
            console.log(result.state);
            if (result.state === "SUCCESS" || result.state === "DRAFT")
            {
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    "title": "Success!",
                    "message": "Le statut de l'intervention a été mis à jour à " + stepName + ".",
                    "type": "succes"
                });             
                toastEvent.fire();
            }
        }))
    }
})
 
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="simpleRecord" type="Object"/>
    <force:recordData aura:id="propertyService" recordId="{!v.recordId}"
                      targetFields="{!v.simpleRecord}" layoutType="FULL" mode="EDIT" />
    <div class="slds-card">
        <lightning:picklistPath aura:id="picklistPath" recordId="{!v.recordId}"
            variant="non-linear"
            picklistFieldApiName="Status__c"
            onselect="{!c.handleSelect}">
        </lightning:picklistPath>
    </div>
</aura:component>

AIain
This was selected as the best answer
Alain CabonAlain Cabon
You can use simpleRecord or any other name you want.

User-added image

Now the update is OK.

Alain
Stéphane C.Stéphane C.
It's perfect.

Just miss the color on the path to be changed (green before the active value) and on the toaster (green).
Alain CabonAlain Cabon
Ok, good. With javascript, the code can say "ok" without doing all the work and it should complain if  an attribute is missing (<aura:attribute name="simpleRecord" type="Object"/>)  
Strange error indeed.
Your case was interesting.
Alain
Stéphane C.Stéphane C.
Yep. Very strange. We have not the same behaviour than the webinar.
Stéphane C.Stéphane C.
If it's possible I would want to know why it is not working in this case.
Alain CabonAlain Cabon
Without <aura:attribute name="simpleRecord" type="Object"/> ? it is a bug (a missing attribute is not detected) and the code should not be saved and without the toast of success as I also got while nothing is save reallly (double bugs)
Stéphane C.Stéphane C.
I have change one thing too :
 
"type": "success"

 
Alain CabonAlain Cabon
For the toast OK. That is not checked. There are few checks in javascript. That is allowed while the value is not existing but that was not your problem. 
Alain CabonAlain Cabon
You had a big problem at the beginning and the cause was not the toast by the way.
Stéphane C.Stéphane C.
Yep. I test it on a custom object and it doesn't work too. Very strange.

On the webinar it's working.
S N RS N R
Hi Alain, above provided code is working good in record home page. Any ideas to use this component in communities?
Thanks, SNR