Why Isn’t My URL Button Working on Mobile?

Question

I have a Lightning Web Component (LWC) that is URL Addressable and defined as follows:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__UrlAddressable</target>
    </targets>
</LightningComponentBundle>

The component retrieves the record ID from the URL parameters using CurrentPageReference:

_oppId;
set oppId(value) {
    this._oppId = value;
    this.init();
}

get oppId() {
    return this._oppId;
}

@wire(CurrentPageReference)
getStateParameters(currentPageReference) {
    if (currentPageReference) {
        this.oppId = currentPageReference.state.c__oppId;
    }
}

The init() method makes an Apex call using the oppId. I created a custom URL button on the Opportunity record page with the following URL:

/lightning/cmp/c__nuevaVersionChecklist?c__oppId={!Opportunity.Id}

Answer

This issue occurs because Salesforce Mobile handles URL parameters differently than the desktop Lightning Experience. The mobile app may strip or misinterpret parameters when navigating to a URL-Addressable LWC using a custom URL button.

The main reason for this is that direct navigation to /lightning/cmp/c__ComponentName is not officially supported on mobile. While it may work on desktop, the mobile app uses a different navigation framework that does not always pass state parameters correctly. A better approach is to use Lightning Navigation Service, which ensures that parameters are passed reliably.

Solution : Use a Quick Action with NavigationMixin

Since LWC record actions are not supported on mobile, you can use a Lightning Aura Component Quick Action to navigate to the LWC while ensuring the oppId is properly passed. This Aura component is used as a Quick Action on a record page to navigate to a URL Addressable LWC, passing the record ID as a parameter. Since Lightning Web Component (LWC) Quick Actions are not yet supported on Salesforce Mobile, we use an Aura wrapper to handle the navigation.

Step 1: Create an Aura Component for the Quick Action

<aura:component implements="force:lightningQuickAction,force:hasRecordId">
    <aura:handler name="init" value="{!this}" action="{!c.navigateToLWC}" />
    <lightning:navigation aura:id="navService" />
</aura:component>

Explanation

implements="force:lightningQuickAction, force:hasRecordId"
force:lightningQuickAction makes this component available as a Quick Action.
force:hasRecordId allows the component to automatically receive the record ID of the current record where the action is triggered.

<aura:handler name="init" value="{!this}" action="{!c.navigateToLWC}" />
This event handler runs the navigateToLWC function in the controller as soon as the component loads.
Since we are using this component as a Quick Action, we don’t need any UI elements—it should trigger immediately.

<lightning:navigation aura:id="navService" />
This is the Navigation Service, which is responsible for navigating to the LWC.
It allows us to programmatically control navigation in Lightning Experience and Mobile.

Step 2: Add the Navigation Logic in the Aura Controller

({
    navigateToLWC: function (component, event, helper) {
        var navService = component.find("navService");
        var pageRef = {
            type: "standard__component",
            attributes: {
                componentName: "c__nuevaVersionChecklist"
            },
            state: {
                c__oppId: component.get("v.recordId")
            }
        };
        navService.navigate(pageRef, true);
    }
});

Explanation

var navService = component.find("navService");
Retrieves the Lightning Navigation Service, which we declared in the Aura component (<lightning:navigation aura:id="navService" />).
This service is required to programmatically navigate between pages in Salesforce.

Define pageRef as an object with navigation details:
type: "standard__component"
Specifies that we are navigating to a custom LWC component instead of a standard page (like a record page or an app page).

attributes: { componentName: “c__nuevaVersionChecklist” }
The componentName must match the API Name of the LWC you are navigating to.
In this case, the LWC is named “c__nuevaVersionChecklist”.

state: { c__oppId: component.get(“v.recordId”) }
Passes the record ID from the current record page as a URL parameter named c__oppId.
The LWC can then retrieve this value using CurrentPageReference.

navService.navigate(pageRef, true);
This executes the navigation, redirecting the user to the LWC while ensuring that the record ID parameter is passed correctly.
The true parameter enables replace history, meaning the navigation replaces the current view rather than opening a new one.

This Aura component acts as a bridge to allow a Quick Action to navigate to an LWC while passing the record ID. The Lightning Navigation Service ensures that the record ID parameter is correctly passed, solving the issue of URL buttons not working reliably on mobile. The LWC must be URL Addressable (lightning__UrlAddressable) and should retrieve the parameter using CurrentPageReference.

Enroll for Career-Building Salesforce Training with 100% Money Back Guarantee

Our Salesforce course is designed to provide you with a comprehensive understanding of the Salesforce platform, empowering you with the essential skills to thrive in the CRM industry. The course covers key topics such as Salesforce Admin, Developer, and AI, seamlessly integrating theory with practical application. By engaging in hands-on projects and assignments, you’ll develop the expertise to solve real-world business challenges using Salesforce solutions. Our expert trainers ensure you gain the technical knowledge and industry insights needed to excel in the Salesforce ecosystem.

In addition to technical skills, our Salesforce Training in Mysore offers personalized mentorship, certification guidance, and interview coaching to support your career growth. You’ll have access to a wide range of study materials, live projects, and dedicated support throughout the course. By the time you complete the program, you will be well-prepared for certification exams and equipped with the problem-solving skills that employers value. Start your Salesforce career today and unlock a world of opportunities. Sign up for a free demo now!