I'm trying to create a custom lightning:picklistPath component for my community. 

I want to use the userId to find the contactId and then find an active service file. My Apex code is working perfectly (I can display the correct service file recordId on my page), but the component still isn't showing up properly. Sometimes it shows up as an empty/grey path, but most times the component doesn't show up at all. 

<aura:component implements="forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes " access="global" controller="PortalController">

    <aura:attribute name="serviceFileId" type="String"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

	Service File Id: {!v.serviceFileId} <!--This is correct-->

    <lightning:picklistPath aura:id="picklistPath" recordId="{!v.serviceFileId}"
        variant="non-linear"
        picklistFieldApiName="FileStatus__c"
        >
    </lightning:picklistPath>
</aura:component>

I should have the picklistFieldApiName selected correctly: 
 



In the builder I get this error on page load:

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