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
Jennifer Blankenship 12Jennifer Blankenship 12 

Trailhead Lightning Component Question

this is why i don't code..... I don't understand it

User-added image

I'm working on Create a Lightning Compnent..... any help would be appreciated. 

Thanks!
Best Answer chosen by Jennifer Blankenship 12
Alain CabonAlain Cabon
Hello,

Go at the end of your code and write: </

the autocompletion should add something like:

</aura:component>

All Answers

Alain CabonAlain Cabon
Hello,

Go at the end of your code and write: </

the autocompletion should add something like:

</aura:component>
This was selected as the best answer
Jennifer Blankenship 12Jennifer Blankenship 12
Hi All - sorry for the delay. Thanksgiving weekend here in the US. I'm back at it and yes this did help. Now I have another coding issue with this trailhead module I'm working on the 'Retrieve a Contact List" Quick Start Lightning Components and ended up with this (see picture). I know I am not a dev and don't want to be but just need to get thru this. Any help would be appreciated. Thanks
Jennifer Blankenship 12Jennifer Blankenship 12
Ok the picture didn't attach. Here you goUser-added image
Alain CabonAlain Cabon
Hello,

Are you here?

https://trailhead.salesforce.com/en/projects/quickstart-lightning-components/steps/quickstart-lightning-components4
  1. In the Developer Console, click the MyContactList.cmp tab.
  2. In the button panel on the right, click Controller.
  3. In the body of the myAction JavaScript function, add the following code, beginning on a new line:
({
    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);
   }   
})

By the way, you just don't need the </aura:component> tags here in the controller (neither the figure 8).

These projects and modules around the Lightning components are the most difficult to understand at the beginning but with some explanations, it is not so complicated you are starting so it is normal that you don't find that easy.

Alain
Jennifer Blankenship 12Jennifer Blankenship 12
Yes - thank you. That seemed to help. But I am still missing 

Challenge Not yet complete... here's what's wrong: 
The component does not include a 'aura:handler'

If I understand right, the aura:handler should be in the MyContactList.cmp. I put it at the bottom. 

<lightning:card iconName="standard:contact" title="{! 'Contact List for ' + v.Account.Name}">
    <!-- Contact list goes here -->
</lightning:card>
</aura:component>
<aura:handler name="init" value="{!this}" action="{!c.myAction}" />

Jennifer
 
Alain CabonAlain Cabon

5. Click the MyContactList.cmp tab and add the following markup below the last aura:attribute tag

<aura:handler name="init" value="{!this}" action="{!c.myAction}" />
  
<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}">
    <!-- Contact list goes here -->
</lightning:card>

</aura:component>

https://trailhead.salesforce.com/en/projects/quickstart-lightning-components/steps/quickstart-lightning-components3

You will get it soon, Jennifer.
Alain CabonAlain Cabon
Nothing of that is trivial and obvious. It is the coding conventions of the Lightning components and you will build your first Lex component soon by yourself getting this badge.

Let me know if you have other problems.
Jennifer Blankenship 12Jennifer Blankenship 12
Alain - this is what I get Failed to save MyContactList.cmp: 0Ad41000000jjVT:19,2: ParseError at [row,col]:[20,2] Message: The markup in the document following the root element must be well-formed.: Source And this is my code:
Alain CabonAlain Cabon
Could you try to copy/paste your code (CTRL + A  and CTRL + C) (instead of a snapshot) by clicking the button < > ( Add a code sample) here

If you are more confortable with the copy/paste of code, that could help for your next badges
Alain CabonAlain Cabon
Select all : CTRL + A
Copy : CTRL + C
Paste : CTRL + V (into the window < > ( Add a code sample) here)
Jennifer Blankenship 12Jennifer Blankenship 12
I think it really doesn't like me. I found a button with the with a page symbol in the force.com space just on the trailhead. Jennifer
Alain CabonAlain Cabon
Post a snapshot if you prefer, Jennifer.
Alain
Jennifer Blankenship 12Jennifer Blankenship 12
<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" />

<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}">
    <!-- Contact list goes here -->
</lightning:card>
    
</aura:component>

<aura:handler name="init" value="{!this}" action="{!c.myAction}" />
 
Jennifer Blankenship 12Jennifer Blankenship 12
I understand the nesting and having a start and end tag. But the rest, you lost me.   I added the short way and it doesn't seem to like it. So i am not sure what i am not doing correctly.  I cleared that whole last line out and re-copied it over and while it seems to be correct, still get an error message.

<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" />

<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}">
    <!-- Contact list goes here -->
</lightning:card>
    
</aura:component>

<aura:handler name="init" value="{!this}" action="{!c.myAction}" />

This is the error i get

Failed to save MyContactList.cmp: 0Ad41000000jjVT:19,2: ParseError at [row,col]:[20,2] Message: The markup in the document following the root element must be well-formed.: Source

Jennifer
 
Alain CabonAlain Cabon
<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}">
    <!-- Contact list goes here -->
</lightning:card>
    
</aura:component>

That is just the position of the aura:handler below the last attribute.
  1. Each kind of tag between < and > has a start tag and a end tag and they are all nested.
  2. <aura:component> : the start tag for the end tag.</aura:component >  
  3. There is a shorter way to write that with: <aura:handler .. /> (auto-closed tag) that is equivalent to <aura:handler .. >  </aura:handler> 
Alain
Alain CabonAlain Cabon
Jennifer, just move the line at the end of your code:  <aura:handler name="init" value="{!this}" action="{!c.myAction}" />

just below: <aura:attribute name="Columns" type="List" />

</aura:component> is always the last Aura tag of a component because the first Aura tag is <aura:component>

Alain
Jennifer Blankenship 12Jennifer Blankenship 12
Alian,


Ok great - why didn't the instructions say that. It finally saved but I still get an error on verification of the module

hallenge Not yet complete... here's what's wrong: 
The 'MyContactList' component was not found.


I went into my dev and found this
User-added image
Alain CabonAlain Cabon
Jennifer, that is just coding conventions that it is just like that and at the beginning, you are learning them little by little right now.

Where are you now?  (step 3, 4 or 5?)

4. Retrieve a Contact List
5. Render and Preview the Contact List

https://trailhead.salesforce.com/fr/projects/quickstart-lightning-components/steps/quickstart-lightning-components4

Alain
Jennifer Blankenship 12Jennifer Blankenship 12
I'm stuck at Retrieve a Contact List. Everything saved okay without errors but I found that error in the dev org. Jennifer
Alain CabonAlain Cabon
Ok you also need an apex class: MyContactListController​ (step 2)

https://trailhead.salesforce.com/en/projects/quickstart-lightning-components/steps/quickstart-lightning-components2

Did you create this class? Alain
Jennifer Blankenship 12Jennifer Blankenship 12
I'll check. I know created a class but not sure it was this one.
Alain CabonAlain Cabon
You also absolutely need the first line (@AuraEnabled) If you missed it, that will never work.

@AuraEnabled
public static List<Contact> getContacts(Id recordId) {
   return [Select Id, FirstName, LastName, Email, Phone From Contact Where AccountId = :recordId];
} 

Alain
Jennifer Blankenship 12Jennifer Blankenship 12
Hi Alain, thank you for all the help on Saturday. I got back in and looked at my code for MyContactListController.apxc and while is was all there, it had some extraneous stuff in there. I got rid of all of that and the step got verified. Now on to the last step. Thanks Again. Jennifer
Alain CabonAlain Cabon
Hi Jennifer,

Very good. I hope you will get this badge for the Lightning developer soon (the most complicated challenges).

Alain
Segvan JohnsonSegvan Johnson
You want make sure you adding the code in the right line, Here is full code 
<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" />
<force:recordData aura:id="accountRecord"
                  recordId="{!v.recordId}"
                  targetFields="{!v.Account}"
                  layoutType="FULL"
                  />
     <aura:handler name="init" value="{!this}" action="{!c.myAction}" />

<lightning:card iconName="standard:contact" title="{! 'Contact List for ' + v.Account.Name}">
    <!-- Contact list goes here -->
</lightning:card>

</aura:component>