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
Karthik GunasekaranKarthik Gunasekaran 

how to show different lightning component on a button click within same region of a record page in lightning console

Hi, i creates a record page(selected Template is with 3 sections) for my lightning console. I added a custom lightning component "Interaction Log" to the right side section. On click of "save log" i need to open another lightning component in the same section where i highlighted. Anyone can plz help me to sort this out as it is opening always as a seperate subtab(which i don't want).
Thanks,
Karthik
User-added image
Best Answer chosen by Karthik Gunasekaran
Gopal ChoudharyGopal Choudhary
You need three components in total, lets say my third component studysMainCmp and is as below.

<aura:component access="global" implements="force:appHostable">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="c:navigateToCmp" action="{!c.NavigateComponent}" />

    <div>
        {!v.body}
    </div>
</aura:component>

Controller:

doInit : function(component, event, helper) {
    $A.createComponent("c:studys", {

    }, function(newCmp) {
        if (component.isValid()) {
            component.set("v.body", newCmp);
        }
    });
},

NavigateComponent : function(component, event, helper) {
if(event.getParam("navigate") == "true")
{
    $A.createComponent("c:studyDetail", {

        }, function(newCmp) {
            if (component.isValid()) {
                component.set("v.body", newCmp);
            }
        });
}
}

In your study component the button action should fire an event, the button function will be as below

buttonFunction : function(component, event) {
    var event = $A.get("e.c:navigateToCmp");
    event.setParams({
        "navigate" : "true"
    });
    event.fire();
},

Lightning event named navigateToCmp will be as below:

<aura:event access="global" type="APPLICATION" description="Event template" >
    <aura:attribute name="navigate" type="Boolean" default="false"/>
</aura:event>

It worked for me, hope it helps for you.

All Answers

Gopal ChoudharyGopal Choudhary
You need three components in total, lets say my third component studysMainCmp and is as below.

<aura:component access="global" implements="force:appHostable">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="c:navigateToCmp" action="{!c.NavigateComponent}" />

    <div>
        {!v.body}
    </div>
</aura:component>

Controller:

doInit : function(component, event, helper) {
    $A.createComponent("c:studys", {

    }, function(newCmp) {
        if (component.isValid()) {
            component.set("v.body", newCmp);
        }
    });
},

NavigateComponent : function(component, event, helper) {
if(event.getParam("navigate") == "true")
{
    $A.createComponent("c:studyDetail", {

        }, function(newCmp) {
            if (component.isValid()) {
                component.set("v.body", newCmp);
            }
        });
}
}

In your study component the button action should fire an event, the button function will be as below

buttonFunction : function(component, event) {
    var event = $A.get("e.c:navigateToCmp");
    event.setParams({
        "navigate" : "true"
    });
    event.fire();
},

Lightning event named navigateToCmp will be as below:

<aura:event access="global" type="APPLICATION" description="Event template" >
    <aura:attribute name="navigate" type="Boolean" default="false"/>
</aura:event>

It worked for me, hope it helps for you.
This was selected as the best answer
Karthik GunasekaranKarthik Gunasekaran
Hi Gopal,
That was amazing. It works perfectly as i expect. Thanks a lot!..
Gopal ChoudharyGopal Choudhary
Most welcome
Karthik GunasekaranKarthik Gunasekaran
Hi Gopal,
I have another issue with same component. I am pasing record id from studysMainCmp component to studys component. In studys component i have a contact lookup which i need to prepopulate on doinit of studys component. But it is not prepopulating.
Here is my code. Any idea? 
Note: When i add studys component directly to a lightning page. It is prepopulating with below highlighted code.

cmp:
<aura:attribute name="workitem" type="Work_Item__c" default="{'sobjectType':'Work_Item__c'}"/>  
<force:inputField aura:id="taskContact" value="{!v.workitem.Contact__c}"/>

JS controller: 

 doInit: function(component, event, helper) {
        var action = component.get("c.loadWorkitem");
        var workitemId = component.get("v.recordId");
        var workitem = component.get("v.workitem");   
           action.setParams({
            "recordId":workitemId
        });
         action.setCallback(this,function(response){
            var state = response.getState();
            if(component.isValid() && state === "SUCCESS"){                   
                 workitem = response.getReturnValue();              
                 component.set("v.workitem", workitem);
                //Using force:inputField it is not possible to set a prepoulated value directly in controller using aura id for example –
                //component.set('v.workitem.Contact__c', '001f4000002TfjEAAS');
                //The workaround to assign a lookup object as a value is –

                var contactValue = [{ 
                    type: 'Contact', 
                    id: workitem.Contact__c, 
                    label: workitem.Contact__r.Full_Name__c
                }]; 
                component.find("taskContact").get("v.body")[0].set("v.values", contactValue);