function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Arrielle KooimanArrielle Kooiman 

lightning:picklistPath Lightning Component in Community

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: 
User-added image 
User-added image


In the builder I get this error on page load:
User-added image
Best Answer chosen by Arrielle Kooiman
Arrielle KooimanArrielle Kooiman
Just in case anyone runs into this issue in the future: 

I found out that my code is working as expected. The actual problem is that since I'm not using a RecordPage which has the RecordId immediately on load. I found out that since I'm making that call to the backend, I'm loading the path and then fetching the ID with my previous code.

I needed to make sure the ID was fetched before trying to load the path. To do this, I just added an aura:if to see if the id was null or not. 
<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-->
    <aura:if isTrue="{!v.serviceFileId != null">
        <lightning:picklistPath aura:id="picklistPath" recordId="{!v.serviceFileId}"
            variant="non-linear"
            picklistFieldApiName="FileStatus__c"
            >
        </lightning:picklistPath>
    </aura:if>
</aura:component>

 

All Answers

Arrielle KooimanArrielle Kooiman
Just in case anyone runs into this issue in the future: 

I found out that my code is working as expected. The actual problem is that since I'm not using a RecordPage which has the RecordId immediately on load. I found out that since I'm making that call to the backend, I'm loading the path and then fetching the ID with my previous code.

I needed to make sure the ID was fetched before trying to load the path. To do this, I just added an aura:if to see if the id was null or not. 
<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-->
    <aura:if isTrue="{!v.serviceFileId != null">
        <lightning:picklistPath aura:id="picklistPath" recordId="{!v.serviceFileId}"
            variant="non-linear"
            picklistFieldApiName="FileStatus__c"
            >
        </lightning:picklistPath>
    </aura:if>
</aura:component>

 
This was selected as the best answer
S N RS N R
Hi Arrielle,
How your fetching id in controller? Can you please share your controller code? In communities, my component only showing gray path.

Thanks,
SNR
Arrielle KooimanArrielle Kooiman
Hey SNR, 

If your component is on a page that has the recordId available you can simply use
implements="force:hasRecordId" 
and
<aura:attribute name="recordId" type="String" />
and then use your recordId like {!v.recordId}

Otherwise, if your case is like mine, you'll need to make a callout to apex. I don't have that code any more, but it would look something like:
 
doInit: function(component, event, helper) { 

   var action = component.get("c.yourClassName");
   var value = component.get("v.value"); //Get whatever parameter you need to pass to apex 
   to find your data

   action.setParams({ paramName : value });

        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var fromApex = response.getReturnValue();
                component.set('v.yourId', fromApex);
            }
            else {
                console.log('Error');
            }
               
    });
    $A.enqueueAction(action);
}

If you're having any trouble feel free to post your code and I can try to help. 

-Arri
 
Arrielle KooimanArrielle Kooiman
What type of community page are you trying to put this on? A contact Record Detail page? 
If so, I don't think there's any reason for you to make an apex call for the contact record. Instead you’ll only need the component: 
Component:
<aura:component  implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"  access="global" controller="xyzController">
<aura:attribute name="recordId" type="Id" />
<lightning:picklistPath recordId="{!v.recordId}"
                                         variant="non-linear"
                                         picklistFieldApiName="ConStatus__C"
                                     onselect="{!c.handleSelect}" />
</aura:component>
In this case, the page already knows what the recordId of the page is, so you can just pass it along to your path.

However, if you’re trying to get the contactId of the currently logged in user and use that to populate this path, you’ll need the following code:
Component:
<aura:component  implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"  access="global" controller="xyzController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="contactId" type="Id" />
<lightning:picklistPath recordId="{!v.contactId}"
                                         variant="non-linear"
                                         picklistFieldApiName="ConStatus__C"
                                     onselect="{!c.handleSelect}" />
</aura:component>
You'll need to run the init method so that we can run the javascript as soon as the page loads. 

Controller:
doInit : function (component, event, helper) {
            var action = component.get("c.getxyz");
     action.setCallback(this, function(response) {
          var state = response.getState();
             if (state === "SUCCESS") {
             var conId = response.getReturnValue();
             component.set('v. contactId’, conId);
                }
             else {
             console.log('Error');
             }              
});
$A.enqueueAction(action);
}
We're just calling apex to return the contact Id of the currently logged in user.

Apex:
public class xyzController {
@AuraEnabled
public static Id getxyz(Id contactId){      
      Id userId = UserInfo.getUserId();
      User u = [SELECT Id, ContactId FROM User WHERE Id = :userId];  
      Return u.ContactId;     
}
}
Gets the user and related contact id and passes it back to the controller.


That code should get you the correct path, then you’ll need to work out what you need to do with the handleSelect method. 
I hope that helps!
-Arri

 
Arrielle KooimanArrielle Kooiman
Maybe try ConStatus__c instead of ConStatus__C.
If that's not it, try posting a new question.
Good luck!
S N RS N R
Thanks for sharing your ideas.