0

i have tried every suggestion given on community but not able to call second component from first component.I want it to display as modal popup, after clicking on button nothing is showing on screen. Please suggest if i am missing something in my code.

Component 1: Catalogue Component 2: CaseForm

Catalogue.cmp :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
                access="global">

    <table>
        <tr>
            <h3><b><u>PRODUCTS CATALOGUE</u></b></h3>
        </tr><br />
        <tr>
            <td>
        <tr>
            <ui:button aura:id="button" label="Autoclass" press="{!c.getInput}" />
        </tr><br />
        </td>
        </tr>


    </table>
</aura:component>

CatalogueController :

({
    getInput: function (component, event, helper) {
        $A.createComponent(
            "c:CaseForm",
            {

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

    }
})

CaseForm.cmp :

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<!-- Include Static Resource-->
<ltng:require styles="/resource/bootstrap/css/bootstrap.min.css" 
              scripts="/resource/bootstrap/js/jquery.js,/resource/bootstrap/js/bootstrap.min.js"/>

<aura:html tag="style">
  html
    {
     background-color: white;
    }
</aura:html>

<!-- Define Attribute-->
<aura:attribute name="cs" type="Case" default="{'sobjectType': 'Case',
                     'ContactId': '','AccountL__c': '','Requestor_First_Name__c': '', 
                     'Requestor_Last_Name__c': '','Requester_Email__c':'',
                     'Requester_Contact_Number__c':'','Status': '',
                     'Subject': '','Template__c': '','Products__c': '',
                     'Componet__c': '','Business_Impact__c  ': '',
                     'Business_Urgency__c': '','Environment__c': '',
                     'On_Behalf_of__c': '','Description__c': ''
                   }"/>

<div horizontalAlign="center" class="container-fluid" >
    <center><h1><b>CONTACT CUSTOMER SUPPORT</b></h1></center>
      <center><h3>Tell us how we can help.</h3></center>
</div>
  <lightning:recordEditForm aura:id="recordViewForm" objectApiName="Case">
     <lightning:messages />
 <div class="slds-grid" width="80" size="2">
        <div class="slds-col slds-size_1-of-2">
   <lightning:inputField fieldName="ContactId" Value=""/>
    <lightning:inputField fieldName="AccountL__c"/>
    <lightning:inputField fieldName="Status"/>
    <lightning:inputField fieldName="Subject"/>
    <lightning:inputField fieldName="Products__c"/>
    <lightning:inputField fieldName="Componet__c"/>
    <lightning:inputField fieldName="Environment__c"/>
    <lightning:inputField fieldName="Description__c"/>      
   </div>
     <div class="slds-col slds-size_2-of-2">
    <lightning:inputField fieldName="Requestor_First_Name__c"/>
    <lightning:inputField fieldName="Requestor_Last_Name__c"/>
    <lightning:inputField fieldName="Requester_Email__c"/>
    <lightning:inputField fieldName="Requester_Contact_Number__c"/>
    <lightning:inputField fieldName="Business_Impact__c"/>
    <lightning:inputField fieldName="Business_Urgency__c"/>
    <lightning:inputField fieldName="On_Behalf_of__c"/>
    </div>
     </div>
</lightning:recordEditForm>
<aura:attribute name="accept" type="List" default="['.jpg', '.jpeg']"/>
<aura:attribute name="multiple" type="Boolean" default="true"/>
<aura:attribute name="disabled" type="Boolean" default="false"/>
<lightning:fileUpload  name="fileUploader"
                       label= "Upload Files"
                       multiple="{!v.multiple}"
                       accept="{!v.accept}"
                       disabled="{!v.disabled}"
                       recordId="abcd"
                       onuploadfinished="{! c.handleUploadFinished }"/>
<br/>
<br/>

CaseFormController :

({
handleUploadFinished: function (cmp, event) {
    // This will contain the List of File uploaded data and status
    var uploadedFiles = event.getParam("files");
    alert("Files uploaded : " + uploadedFiles.length);
}});
  • Pls use {} for formatting code and before copy-pasting code, pls align the code with indentation using Salesforce dev console or VS Code – salesforce-sas Aug 12 at 6:22
  • Can you show .cmp also for both child and parent. You might have probably missed {!v.body} in parent – salesforce-sas Aug 12 at 6:27
  • i have edited the question with other component. – Snehal Aug 12 at 6:38
0

You have to put {!v.body} in parent component as you are pushing the new component in body with below code:

var body = component.get("v.body");
body.push(newCmp);
component.set("v.body", body);

Change the parent code to below and try clicking on button, you will understand:

<aura:component implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,lightning:isUrlAddressable" access="GLOBAL">

    <table>
        <tr>
            <h3><b><u>PRODUCTS CATALOGUE</u></b></h3>
        </tr><br />
        <tr>
            <td>
        <tr>
            <ui:button aura:id="button" label="Autoclass" press="{!c.getInput}" />
        </tr><br />
        </td>
        </tr>


    </table>

    body - {!v.body}

</aura:component>
  • It worked. Thank you. – Snehal Aug 12 at 6:51

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.