PATH IS NOT COMING IN MOBILE??

Hi Trailblazer Community,

Last few days i was getting the problem that path was not showing in mobile. Might be you guys also have seen this issue.

What i have done to resolve this problem i have used the lightning base component and override the mobile layout from by lightning component(Short and sweet).




                                                                             ||

Above screenshots are showing the the path in Desktop and Mobile.

I have used lightning:path base component for that that has been reduced my lines of code....Thanks @Salesforce for the base component.

I have designed the Lightning Component for that and override with the mobile layout in Button and Action section.

Here i am sharing the entire layout for that you can use this layout generically for all object for which component path is not coming in mobile.

Step 1 : Create Component and give any name you want and copy the below code in your component.

 <aura:component implements="lightning:actionOverride,flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader,flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName" access="global" >  
   <aura:attribute name="recordId" type="String"/>  
   <aura:attribute name="sObjectName" type="String" />  
   <aura:attribute name="variant" type="String" default="linear"/>  
   <aura:attribute name="hideUpdateButton" type="Boolean" default="false"/>  
   <aura:attribute name="accountFields" type="String[]" default="Name,Phone,Fax" />  
   <aura:attribute name="record" type="Object" />  
   <aura:attribute name="componentRecord" type="Object" />  
   <aura:attribute name="recordError" type="String" />  
   <force:recordData  
     aura:id="recordLoader"  
     recordId="{!v.recordId}"  
     layoutType="FULL"  
     mode="EDIT"  
     targetRecord="{!v.record}"  
     targetFields="{!v.componentRecord}"  
     targetError="{!v.recordError}" />  
   <div class="slds-page-header">  
   <div class="slds-media">  
     <div class="slds-media__figure">  
       <lightning:icon iconName="action:new_account" />  
     </div>  
     <div class="slds-media__body">  
       <p class="slds-text-body_small slds-line-height_reset">{!v.sObjectName}</p>  
       <h1 class="slds-page-header__title slds-truncate slds-align-middle"  
         title="{!v.componentRecord.Name}">{!v.componentRecord.Name}</h1>  
     </div>  
     <lightning:buttonGroup class="slds-button-group">        
       <lightning:button label="Edit" onclick="{!c.onEdit}" />  
       <lightning:buttonMenu iconSize="x-Large" onSelect="{!c.doTest}" >  
         <lightning:menuItem label="Delete" value="1" />  
         <lightning:menuItem label="New Contact" value="2"/>  
         <lightning:menuItem label="New Case" value="3"/>  
         <lightning:menuItem label="New Note" value="4"/>  
      </lightning:buttonMenu>  
     </lightning:buttonGroup>  
   </div>  
 </div>  
   <br/>  
   <lightning:path aura:id="path" recordId="{!v.recordId}" variant="{!v.variant}" hideUpdateButton="{!v.hideUpdateButton}" onselect="{!c.handleSelect}"/>  
   <br/>  
   <br/>  
   <lightning:tabset selectedTabId="two">  
     <lightning:tab label="Related" id="one">  
       //Add Your Item Here  
     </lightning:tab>  
     <lightning:tab label="Details" id="two">  
       <div class="slds-p-left_large slds-p-right_medium">  
           <lightning:recordForm aura:id="Form"  
                 recordId="{!v.recordId}"  
                 objectApiName="{!v.sObjectName}"  
                 layoutType="Full"  
                 mode="View"  
                 fields="{!v.accountFields}"  
                 columns="1" class="slds-col_bump-left slds-button__icon_hint"/>  
       </div>  
      </lightning:tab>  
     <lightning:tab label="Chatter" id="three">  
       //Add Your Item Here  
     </lightning:tab>  
   </lightning:tabset>  
 </aura:component>  

In the above code for showing the record i have used the lightning data service(lightning:recordForm). 

Step 2 : Click on the controller in the right side(Create Controller).

 ({  
   handleSelect : function (component, event, helper) {  
  
    var stepName = event.getParam("detail").value;  
    var toastEvent = $A.get("e.force:showToast");  
    toastEvent.setParams({  
     "title": "Success!",  
     "message": "Toast from " + stepName  
     });  
     toastEvent.fire();  
   },  
   onEdit : function( component, event, helper) {  
     var editRecordEvent = $A.get("e.force:editRecord");  
     editRecordEvent.setParams({  
      "recordId": component.get("v.recordId")  
     });  
     editRecordEvent.fire();  
   },  
   doTest : function(component,event,helper){  
      var temp = event.get("value")  
      alert(temp);  
      //case "1": alert('test');  
      //case "2": alert('test1');  
   }  
 })  

Step 3 : Click on the style in the right side(Create CSS).

 .THIS {  
 }  
 .THIS .slds-button{  
 }  
 .THIS .slds-form-element__static{  
 display: inline-block;}  

Now It's time to override the component for mobile.

Follow below screenshots --->>>

If you guys need any help reach to me @ yogeshwer1994@gmail.com

Thanks & Happy Coading.......!!!  😊