1

I have a lightning quick action that is very simple component and redirects to another custom component using lightning:navigation.

navigateLightning.navigate(pageReference,true)

The replace argument of the navigate method indicates that the new page should replace the current page in the navigation history.

However, as you can see in the screenshot below, the custom component is displayed but the top action bar is also displayed. And they are not clickable nor functional at all. I do not want those top action bar to be visible as they are not part of the custom component. Sometimes they display, and sometimes they do not display.

​​​​​​​Is this a Salesforce Mobile Known Issue?

MyRedirectQuickActionComponent

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <lightning:navigation aura:id="navService" />
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    Redirecting...
</aura:component>



({

    doInit : function(component, event, helper) {

        window.setTimeout(
            $A.getCallback(function() {


                component.find("navService").navigate({
                    "type": "standard__component",
                    "attributes": {
                        "componentName": "c__MyRedirectedComponent",
                    },
                    "state": {
                        "c__recordId": component.get('v.recordId')
                    }
                },true);

   
            }), 1
        );
   )
})

MyRedirectedComponent

<aura:component implements="lightning:isUrlAddressable,force:hasRecordId">

    <lightning:navigation aura:id="navService" />
    
    <aura:attribute name="recordId" type="Id"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="change" value="{!v.pageReference}" action="{!c.reInit}" />    

    <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small"
        aria-labelledby="modal-heading-01" aria-modal="true">
        <div class="slds-modal__container">
            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
                <lightning:buttonIcon iconName="utility:close" size="large" class="slds-modal__close" variant="bare-inverse" title="Close" alternativeText="Close modal" onclick="{!c.closeModal}"/>
                <span class="slds-assistive-text">Cancel and close</span>
            </button>
            <div class="slds-modal__header">
                <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Modal header </h1>
            </div>
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam
                    incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia
                    tempor esse quis. Cillum sunt ad dolore quis
                    aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor
                    adipisicing.</p>
                <p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do
                    dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident.
                    Eiusmod et adipisicing culpa deserunt nostrud
                    ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit
                    enim excepteur ea.</p>
            </div>
            <div class="slds-modal__footer">
                <button class="slds-button slds-button_neutral" aria-label="Cancel and close" onclick="{!c.closeModal}">Cancel</button>
                <button class="slds-button slds-button_brand" onclick="{!c.closeModal}">Save</button>
            </div>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>

</aura:component>

({
    doInit : function(component, event, helper) {
        var pageRef = component.get("v.pageReference");
        if(pageRef && pageRef.state) {
            component.set("v.recordId", pageRef.state.c__recordId);
        }            
    },
    reInit : function(component, event, helper) {
        $A.get('e.force:refreshView').fire();
    },
    closeModal : function(component, event, helper) {

        var navigateLightning = component.find('navService');
        var pageReference = {
            type: 'standard__recordPage',
            attributes: {
                recordId: component.get('v.recordId'),
                objectApiName: 'MyCustomObject__c',
                actionName: 'view'                
            }
            
        };
        event.preventDefault();        
        navigateLightning.navigate(pageReference,true);   
    }
})

enter image description here

0

You must log in to answer this question.

Browse other questions tagged .