+ Start a Discussion
Saroj KushwahaSaroj Kushwaha 

Create a Packing List Item Component

Hi, I have problem in the challenge which is as follows : 
Create a Lightning Component to display a single item for your packing list.
  • Create a component called campingListItem that displays the name (ui:outputText) and the three custom fields using the appropriate output components.
  • Add an attribute named item for type Camping_Item__c that is required.
for this I made component campingListItem.cmp which has following code :
<aura:component>
    <aura:attribute name="item" type="Camping_Item__c" />    
    <p>Name:<ui:outputText value="{!v.item.Name}"/></p>    
    <p>Quantity:<ui:outputNumber value="{!v.item.Quantity__c}"/></p>    
    <p>Price:<ui:outputCurrency value="{!v.item.Price__c}"/></p>
    <p>Packed?:<ui:outputCheckbox value="{!v.item.Packed__c}"/></p>
</aura:component>

but data is not displaying from object simple HTML text is displaying as follows:
Name:
Quantity:
Price:
Packed?:  False

please give me some suggestion.

 
Amit VaidyaAmit Vaidya
Hi Saroj,

By default Lightning Component is not connected with Salesforce database. To make it connect server database, you need to write apex class to fetch Camping Item records and also needs to provide that class method with @AuraEnabled. Please try below code as per your requirement. I haven't tried running it so it might give some errors. Please resolve those as possible:
 
//Apex Class
public class FetchCampingItem {
    @AuraEnabled
    public static List<Opportunity> getCampingItem() {
        List<Camping_Item__c> ciList = new List<Camping_Item__c>();
            ciList=[SELECT 
                        Name
                    FROM 
                        Camping_Item__c
                    ];
        return ciList;
    }
}

<!--Component-->
<aura:component controller="FetchCampingItem">
	<aura:attribute name="item" type="Camping_Item__c" />
	<ui:button label="Get Camping Items" press="{!c.getCMIList}"/>
		<table >
			<thead>
				<tr>
					<th ><span>Camping Item Name</span></th>
				</tr>
			</thead>
			<tbody>
				<aura:iteration items="{!v.cmis}" var="cm">
					<tr>
						<td><ui:outputText value="{!v.item.Name}"/></td>
						<!--<p>Quantity:<ui:outputNumber value="{!v.item.Quantity__c}"/></p>    
						<p>Price:<ui:outputCurrency value="{!v.item.Price__c}"/></p>
						<p>Packed?:<ui:outputCheckbox value="{!v.item.Packed__c}"/></p>-->
					</tr>
				</aura:iteration>
			</tbody>
		</table>
</aura:component>

//Controller
({
	getCMIList: function(component, event, helper) {
		var action = component.get("c.getCampingItem");
		action.setCallback(this, function(actionResult) {
			var state = actionResult.getState();
			if (state === "SUCCESS"){
				component.set("v.item", actionResult.getReturnValue());
			}
			else if (state === "ERROR") {
				var errors = actionResult.getError();
				if (errors) {
					if (errors[0] && errors[0].message) {
						console.log("Error message: " + 
						errors[0].message);
					}
				}
				else {
					console.log("Unknown error");
				}
			}
		});
		$A.enqueueAction(action);
	}
})

Thanks,
Amit
Raj I RaoRaj I Rao
When I write the apex class, I am getting error "Return value must be of type:List.
I have tried as below:
Camping_item__c [] ciList = [select name from camping_item__c];  
OR
List<Camping_item__c> ciList = [select name from camping_item__c];

Please let me know, if any one resolve it.
Thanks,
Raj
Elio ShytiElio Shyti
Hi Raj I Rao,

You forget to put the (required="true") attribute to your attribute!
 
<aura:component>
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed:
        <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
</aura:component>

I passed the challenge. You don't need to declare a controller.

Hope that helps.
Girish RangaiahGirish Rangaiah
This piece of code works and i passed the challenge.

<aura:component>
    <aura:attribute name="item" type="Camping_Item__c" required="true" />
    
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/>
    </p>

        
    <p>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 
    
</aura:component>
Rafael Martins Mascaro 1Rafael Martins Mascaro 1
Hi,
My code completed the challenge. Try it:
<aura:component >
    <aura:attribute name="item" type="Camping_item__c" required="true"/>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>    
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed:
        <lightning:input type="toggle" label="Reimbursed?" name="reimbursed" checked="{!v.item.Packed__c}" />
    </p>
</aura:component>
Hope that helps.
 
Santosh kumar NalliSantosh kumar Nalli
hi Amit

Did you get the output for the code you writte?

It is showing page loading and nothing is displayed.
Thanks
DoondiDoondi
@Santosh Kumar Nalli,

Remove: required="true" from <aura:attribute ....................> it will display the values. 
Aarooran Kanthasamy 1Aarooran Kanthasamy 1
<aura:component >
	<aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:{!v.item.Name}</p>
    <p>Price: <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/></p>
    <p>Quantity:<lightning:formattedNumber value="{!v.item.Quantity__c}"/></p>
    <p>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 

</aura:component>

 
Jolly_BirdiJolly_Birdi
<aura:component >
     <aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:true}"/>
    <p>Quantity:<lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/></p>
    <p>Price:<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/></p>
    <p>
        <lightning:input type="string"  label="Name" value="{!v.item.Name}"></lightning:input>
    </p>
    <p>
        <lightning:input type="toggle" label="Packed?" name="Packed" checked="{!v.item.Packed__c}" />
     </p> 
</aura:component>
Robin Bansal 35Robin Bansal 35
Completed the challenge with below code. You need to provide default values if using 'required' for the <auro:attribute> so that UI loads successfully.

<aura:component>
    <aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Food',
                                             Price__c:1000,Quantity__c:1,Packed__c:true}"/>
    <p>
        Name:{!v.item.Name}
    </p>
    <p>
        Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>
        Quantity: 
        <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>
        <lightning:input type="toggle"
                         label="Packed?"
                         name="Packed"
                         checked="{!v.item.Packed__c}" />
    </p>
    
    
</aura:component>
Alan Ricardo Hernandez Hernandez 2Alan Ricardo Hernandez Hernandez 2
Complete the "Create a Packing List Item Component" challenge with the following code.
 
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"  default="{Name:'Lantern',Price__c:10,Quantity__c:2,Packed__c:true}"/>
    
    <lightning:formattedText title="Name Item" value="{!v.item.Name}"/>
    <br/>
    <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    <br/>
    <lightning:formattedNumber value="{!v.item.Quantity__c}" style="currency"/>
    <br/>
    <lightning:input type="toggle" label="Packed__c" name="input2" checked="{!v.item.Packed__c}"/>
    
</aura:component>
 
Click on the button I like if this answer was useful. Thank you.
Harikrishan SidhuHarikrishan Sidhu
Full Steps:

1. Go to the Object Manager.
From Setup, at the top of the page. click Object Manager.

2. Create the custom object.
Select Create Custom Object.

3. Define the Camping_Item object.

Field Value
Label Camping_Item
Plural Label Camping_Items
API Name Camping_Item__c
 
<aura:component>
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name: <lightning:formattedText  value="{!v.item.Name}" /></p>
    <p>Price: <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/></p>
    <p>Quantity: <lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/></p>
    <p>
        <lightning:input    type="toggle"                            
                            label="Packed?"                           
                            name="packed"                         
                            checked="{!v.item.Packed__c}" />
    </p>
</aura:component>
Erika ShimbaErika Shimba
({
    packItem  : function(component, event, helper) {
        component.set("v.item.Packed__c", true);
        component.set("v.disabled", true);
    }
})

The code above worked, if that helps.
Prashant Naik 12Prashant Naik 12
This below code has worked, and able to pass the challenge
 
<aura:component>
    <aura:attribute name="item" type="Camping_Item__c" required="true" />
    
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="currency"/>
    </p>
     <p>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 
</aura:component>

 
Bharathiraja AntonysamyBharathiraja Antonysamy
The below code worked and passed in challenge.
<aura:component >
	<aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:
        {!v.item.Name}
    </p>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/>
    </p>
    <p>Packed :
	    <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="packed"                         
                         checked="{!v.item.Packed__c}" />
    </p>
</aura:component>

 
Vinita KanungoVinita Kanungo
My challenge is completed and I used below code:

<aura:component >
     <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:
        <lightning:formattedText value="{!v.item.Name}" />
    </p>
    
     <p>
<lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
         
    
     </p>
 <p>Price__c:
    <lightning:formattedNumber value="{!v.item.Price__c}" style ="currency"/>
    </p>
    
 <p>Quantity__c:
    <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
      </p>

</aura:component>