[SalesForce] Open child component from parent on the same page

I've made two components:

  1. Is the main component. We chose value and based on that value, must
    be opened 2nd component.(parent)
  2. 2nd component (child)

I would like do the following (step by step):

  1. Run parent component on button click.
  2. On parent component select value.
  3. After selecting value on parent component, I press continue button.
  4. After pressing continue button must be open a new component on the
    same window.

My problem is, when I hit a continue button, child component opens on a full size. I want to open component on the same record page as popup as runs the parent component.
My code is below:
Parent component

<aura:component description="Work" implements="force:appHostable,force:lightningQuickActionWithoutHeader,force:hasRecordId">
<aura:attribute name="recordId" type="Id"/>
<aura:attribute name="options" type="List" default="[
{'label': '1', 'value': 'sendOfferAndProfile'},
{'label': '2', 'value': 'sendOffer'},
{'label': '3', 'value': 'sendProfile'},
{'label': '4', 'value': 'createOffer'}, 
{'label': '5', 'value': 'createProfile'},
{'label': '6', 'value': 'deleteOffer'},
{'label': '7', 'value': 'deleteProfile'}                                                    
]"/>
<lightning:navigation aura:id="navService"/>
<aura:attribute name="pageReference" type="Object"/>
<aura:attribute name="value" type="String"/>
<aura:html tag="style">
    .cuf-content {
        padding: 0 0rem !important;
    }
    .slds-p-around--medium {
        padding: 0rem !important;
    }
    .slds-modal__content {
        overflow-y: hidden !important;
        height: unset !important;
        max-height: unset !important;
    }
    .slds-radio{
        padding-top: 10px;
    }
</aura:html>

<!--======================= HEADER ======================-->
<div class="slds-col modal-header slds-modal__header">
    <h2 class="title slds-text-heading--medium" style="color:blue;">NNNNNN</h2>
</div>

<!--======================= BODY ======================-->
<div class="slds-col modal-body scrollable slds-p-around--medium" style="min-height: 100px; max-height: 600px; overflow-y: auto !important;">
    <div class="slds-m-around_xx-large" style="margin:5px 10px 10px 10px;">
        <lightning:radioGroup name="radioGroup" label="chose value:" options="{! v.options }" value="{! v.value }" type="radio" onchange="{!c.select}"/>
    </div>
</div>

<!--======================= FOOTER ======================-->
<div class="slds-col modal-footer slds-modal__footer">
    <lightning:button aura:id="continue" disabled="true" variant="neutral" label="Continue" onclick="{!c.fire}"/>
</div>

Parent component controller

({
select: function(component, event, helper) {
    var type = component.get("v.value");
    if(type != null){
        component.find("continue").set("v.disabled", false);
    }
},

fire: function(component, event, helper) {        
    var type = component.get("v.value");
    var recId = component.get("v.recordId");         
    if(type == 'sendOfferAndProfile'){                
        var navService = component.find("navService");
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__CreateOfferAndProfile'
            },
            state: {recordId: recId}
        };
        component.set("v.pageReference", pageReference);
        navService.navigate(pageReference);          
    }
}
})

Best Answer

you should use lightning:overlayLibrary to show component as modal popup. first add overlay component in to your component then update your fire like below code snippet for your use case.

cmp

<lightning:overlayLibrary aura:id="overlayLib"/>

cmpcontroller

fire: function(component, event, helper) {        
    var type = component.get("v.value");
    var recId = component.get("v.recordId");         
    if(type == 'sendOfferAndProfile'){                
        $A.createComponent("c:CreateOfferAndProfile",{
                    'recordId':recId
                },(modalcmp, status,errors) =>{
                    if (status === "SUCCESS") {                   
                    component.find('overlayLib').showCustomModal({
                    body: modalcmp, 
                    header: "Application Confirmation"
                    showCloseButton: true,
                    cssClass: "csourceComponentName yourcustomstyle", // yourcustomstyle is css class for modal pop styles like size ,color
                    closeCallback : function(){
                    alert('You closed the alert!');
                }
             });

            }
        })        
    }
}
Related Topic