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
Larry GiantonioLarry Giantonio 

The 'MyContactListApp' app does not contain the 'MyContactList' component

I'm working through the "Render and Preview the Contact List" lesson of the 'Quick Start: Lightning Components" Module in Trailhead. I get the error message "The 'MyContactListApp' app does not contain the 'MyContactList' component" when I attempt to add the "MyContactListApp" This message shows up as well: "The Lightning Bundle name 'MyContactListApp' is already defined. Please choose a different name." How do I find it? I must have created it??? it is not in the dev tabs but mycontact...cmp, .svg everything but is listed. I need it to add the following code: "<c:MyContactList /> ". I'm super green in this area and have no idea how to work this problem. Any help is much appreciated! Many thanks! Larry
Best Answer chosen by Larry Giantonio
Akshay_DhimanAkshay_Dhiman
Hi Larry,

Please follow these steps :
1) Open your Salesforce Org.
2) Open Your Developer Console
3) Click on File -> Open Lightning Resources -> c:MyContactListApp

After Clicking on Open Lightning Resources, a new small window will open,here you can see list of components which are created by you.
Regards,
Akshay

All Answers

Akshay_DhimanAkshay_Dhiman
Hi Larry,

Please follow these steps :
1) Open your Salesforce Org.
2) Open Your Developer Console
3) Click on File -> Open Lightning Resources -> c:MyContactListApp

After Clicking on Open Lightning Resources, a new small window will open,here you can see list of components which are created by you.
Regards,
Akshay
This was selected as the best answer
Larry GiantonioLarry Giantonio
THis is very helpful, many thanks!
Akshay_DhimanAkshay_Dhiman
Hi Lary,

It's my pleasure to help you! Please mark my answer as a best answer, if it is really helpful.
Regards,
Akshay
Larry GiantonioLarry Giantonio
Hi Akshay, I will definately do that! Can you help me with below? the below is the lesson, I tried everything and I keep getting this error "The 'MyContactListApp' app does not contain the 'MyContactList' component"
Render and Preview the Contact List
Add the following markup below the handler and attribute tags that you created earlier.
1<ul>
2<aura:iteration items="{!v.contacts}" var="contact">
3<li class="minli"> <h3>{!contact.Name}</h3> </li>
4</aura:iteration>
5</ul>
aura:iteration iterates over the list of contacts and displays their names.
Select File | Save.
In the Developer Console, select File | New | Lightning Application.
For the application name, enter MyContactListApp and click Submit.
In the body, add the following markup to add your component to the app.
1<c:MyContactList />  THIS SEEMS TO BE THE PROBLEM. I'VE ADDED BUT I MUST NOT HAVE ADDED IN THE RIGHT PLACE. THANKS! 
Select File | Save while on the application tab.
In the button panel on the right, click Preview.
Verify Step +25 points


 
Francesco GargiuloFrancesco Gargiulo
Hi Larry,
one possibility is that your MyContactListApp is not created as a Lightining Application, check it.
If that's problem, creating a new: File | New | Lightning Application
with body:
<aura:application >
    <c:MyContactList />

</aura:application>
should solve your problem.
 
Larry GiantonioLarry Giantonio
Hi Francesco, thanks for helping me out on this. Here' s image of what I have. I've added the several times but it never works, I still get the message. Strange. I screwed something up! lol!
Francesco GargiuloFrancesco Gargiulo
I see no image, have you attached it ?
Larry GiantonioLarry Giantonio
Hi I did but not sure why you could see it. I am attaching again. Really appreciate you guidance on this!
Francesco GargiuloFrancesco Gargiulo
Definitely not seeing it. Anyway try with this, paste it to MyContactList.cmp
<aura:component controller="MyContactListController">
    <aura:handler name="init" action="{!c.myAction}" value="{!this}" />
        <aura:attribute name="contacts" type="Contact[]" />
            <ol>
            <aura:iteration items="{!v.contacts}" var="contact">
            <li class="minli"> <h3>{!contact.Name}</h3> </li>
            </aura:iteration>
            </ol>
</aura:component>
Simon Johnstone 6Simon Johnstone 6
I am stuck on this same step in the trail "Quick Start: Lightning Components", in the final step "Render and Preview the Contact List "
The error I get is "Challenge Not yet complete... here's what's wrong: 
The 'MyContactListApp' app does not contain the 'MyContactList' component"

Although the trail does not ask you to build a Lightning App called "MyContactListApp", I have built one thanks to the suggestion above.

I have now 
1. Lightnig App called MyContactListApp
File MyContactListApp.app 
<aura:application >
	<c:MyContactList />
</aura:application>
2. Lightning Component MyContactList
File MyContactList.cmp 
<aura:component controller="MyContactListController" 
                implements="flexipage:availableForRecordHome,force:hasRecordId" 
                access="global" >

    <aura:attribute name="recordId" type="Id" />
	<aura:attribute name="Account" type="Account" />
	<aura:attribute name="Contacts" type="Contact" />
	<aura:attribute name="Columns" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.myAction}" />

	<force:recordData aura:id="accountRecord"
	                  recordId="{!v.recordId}"
	                  targetFields="{!v.Account}"
	                  layoutType="FULL"
	                  />

	<lightning:card iconName="standard:contact" 
                    title="{! 'Contact List for ' + v.Account.Name}">
		<lightning:datatable data="{! v.Contacts }" 
                             columns="{! v.Columns }" 
                             hideCheckboxColumn="true"/> 

    </lightning:card>

    
</aura:component>

3. Lightning Controller MyContactListController
File MyContactListController.js 
({
	myAction : function(component, event, helper) {
        
		var action = component.get("c.getContacts");
	    action.setParams({
	        recordId: component.get("v.recordId")
    	});
    	action.setCallback(this, function(data) {
        	component.set("v.Contacts", data.getReturnValue());
    	});
    	$A.enqueueAction(action);
	}
})

4. Apex class MyContactListController
File MyContactListController.apxc 
public class MyContactListController {
@AuraEnabled
public static List<Contact> getContacts(Id recordId) {
   return [SELECT Id, 
                  FirstName, 
                  LastName, 
                  Email, 
                  Phone 
           FROM   Contact 
           WHERE  AccountId = :recordId
          ];
}
}

So... the error is telling me I need an App called MyContactListApp.  Done.  It says the App needs to have a component MyContactList.  Done.

Can you tell me what's wrong?
Juan JardimJuan Jardim
I have the same problem descrived by @Simon Johnstone 6. I cannot finish this trailhead
David Egan 9David Egan 9
instructions should be updated to paste below MyActions and above var action:


({
    myAction : function(component, event, helper) {
        
    }
})

component.set("v.Columns", [
    {label:"First Name", fieldName:"FirstName", type:"text"},
    {label:"Last Name", fieldName:"LastName", type:"text"},
    {label:"Phone", fieldName:"Phone", type:"phone"}
])


var action = component.get("c.getContacts");
action.setParams({
    recordId: component.get("v.recordId")
});
action.setCallback(this, function(data) {
    component.set("v.Contacts", data.getReturnValue());
});
$A.enqueueAction(action);
 
Segvan JohnsonSegvan Johnson
past your code right after 

({
    myAction : function(component, event, helper) { 
component.set("v.Columns", [
    {label:"First Name", fieldName:"FirstName", type:"text"},
    {label:"Last Name", fieldName:"LastName", type:"text"},
    {label:"Phone", fieldName:"Phone", type:"phone"}
]);
hers is a full code as well
  
({
	myAction : function(component, event, helper) {
  
component.set("v.Columns", [
    {label:"First Name", fieldName:"FirstName", type:"text"},
    {label:"Last Name", fieldName:"LastName", type:"text"},
    {label:"Phone", fieldName:"Phone", type:"phone"}
]);

		var action = component.get("c.getContacts");
action.setParams({
    recordId: component.get("v.recordId")
});
action.setCallback(this, function(data) {
    component.set("v.Contacts", data.getReturnValue());
});
$A.enqueueAction(action);

	}
})

 
PIERRE MORELPIERRE MOREL
Hi @Segvan Johnson,
I pasted your full code above, & it worked well: challenge achieved.
Thank you!
The best,
Pierre