0

I have a Lightning web component which doesn't fit in the half-sized modal popup screen but I need to open it from the action on the record page.

I have found an interesting idea about how this can be implemented.

This is the auraQuickAction.html listing

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

This is auraQuickActionController.js listing

({
    onInit : function(cmp) {
        var navService = cmp.find("navService");
        var compDefinition = {
            componentDef: "c:createFromRecord",
            attributes: {
                recordId: cmp.get('v.recordId'),
                objectApiName: cmp.get('v.sObjectName')
            }
        };
        // Base64 encode the compDefinition JS object
        var encodedCompDef = btoa(JSON.stringify(compDefinition));

        var pageReference = {
            type: 'standard__webPage',
            attributes: {
                url: '/one/one.app#' + encodedCompDef
            }
        }
        navService.navigate(pageReference);
    }
})

The component is opened, however, the double lightning header is shown, which I want to avoid. Double Lightning Header is shown on the picture

0

Looks like that it is enough to replace the line navService.navigate(pageReference); with line

window.location.href = '/one/one.app#' + encodedCompDef;

and this will work like a charm.

Also, pageReference variable is no longer needed.

({
    onInit : function(cmp) {
        var navService = cmp.find("navService");
        var compDefinition = {
            componentDef: "c:createFromRecord",
            attributes: {
                recordId: cmp.get('v.recordId'),
                objectApiName: cmp.get('v.sObjectName')
            }
        };
        // Base64 encode the compDefinition JS object
        var encodedCompDef = btoa(JSON.stringify(compDefinition));

        window.location.href = '/one/one.app#' + encodedCompDef;
    }
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.