function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Etienne DKEtienne DK 

Navigate to a Lightning App Builder page

Hi, I've spent a few hours trying to make this work so hopefully it's possible and it's my Google fu that is off.

I'm trying to navigate to a Lightning App Builder record page from a custom lightning component, the custom component errors saying it cannot find the component  c:My_App_Builder_Page​   (I've tried a few variations but no luck)
  
// helper
({
    navigateToAppBuilderPage : function(component, event, helper) {
        var recordId = component.get("v.recordId")

        var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef: "c:My_App_Builder_Page",     //developer name in app builder
            recordId : recordId
            //componentAttributes :{ }
        });
        evt.fire();
    }
})

As background the custom component is used as a record view override, it does a callout and then tries to load the app builder page to show the record and related lists.

I would skip using the app builder page and use a custom component but I can't see how to programatically create a record page with related lists 


 
Raj VakatiRaj Vakati
The force:navigateToComponent event is deprecated. This event base64 encodes the component, which leaves it susceptible
to cross-site scripting attacks. Instead, implement the lightning:isUrlAddressable interface on the target component and
navigate to the component using the lightning:navigation component with the standard__component page type.
This process generates a route in the format /cmp/{componentName}?myAttr=attrValue. This workflow opens tabs and
subtabs to custom components without exposing security concerns


Please refer this link 
http://bobbuzzard.blogspot.com/2018/05/lightning-component-navigation-in.html
Etienne DKEtienne DK
Thanks for the useful link, I tried the new lightning:navigation component but it doesn't open a flexipage (App Builder Page).
I'm not sure if it is possible to open a flexipage via code.

  
<!-- component.cmp -->
<aura:component implements="flexipage:availableForAllPageTypes">
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="Nav to Flexipage" onclick="{!c.navigateToFlexipage}" />
</aura:component>


//------------------------------------------------------------------------------------------------

// controller.js

({
        navigateToFlexipage : function(cmp, event, helper) {
        var navService = cmp.find("navService");
        var pageReference = {
                "type": "standard__component",
                "attributes": {
                    "componentName": "c__My_App_Builder_Page"    
                },    
                "state": {}
        };

        navService.navigate(pageReference);    
    }
})

 
Raj VakatiRaj Vakati
If i understand correctly you are trying to app builder page .. which is override the standard lightning records page .. Please refer this code
  
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId">
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="Nav to Flexipage" onclick="{!c.navigateToFlexipage}" />
</aura:component>
  
({
    navigateToFlexipage : function(cmp, event, helper) {
        var navService = cmp.find("navService");
        var pageReference = {
            "type": "standard__recordPage",
            "attributes": {
                "recordId":  cmp.get("v.recordId"),
                "objectApiName": "Conatct",
                "actionName": "view"
            },
            "state": {}
        };
        
        
        
        navService.navigate(pageReference);    
    }
})

 
shakib jahanshakib jahan
<!-- the component file -->
<aura:component implements="flexipage:availableForAllPageTypes">
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="Nav to Flexipage" onclick="{!c.navigateToFlexipage}" />
</aura:component>
  
//Controller.js file
({
	navigateToFlexipage : function(cmp, event, helper) {
        var navService = cmp.find("navService");
        var pageReference = {
            type: 'standard__webPage',
            attributes: {
                url: 'https://shakibjahan-dev-ed.lightning.force.com/lightning/n/AppPageSample'
            },    
            "state": {}
        };

        navService.navigate(pageReference);    
    }
})
I have tried an tricky approach. I think this can resolve your problem.