0

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);          
    }
}
})
1

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!');
                }
             });

            }
        })        
    }
}
1
  • Thank You! my hero!) – Viktor Oct 17 '19 at 7:20

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.