You need to sign in to do that
Don't have an account?
Saroj 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.
but data is not displaying from object simple HTML text is displaying as follows:
please give me some suggestion.
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.
<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.
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:
Thanks,
Amit
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
You forget to put the (required="true") attribute to your attribute!
I passed the challenge. You don't need to declare a controller.
Hope that helps.
<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>
My code completed the challenge. Try it: Hope that helps.
Did you get the output for the code you writte?
It is showing page loading and nothing is displayed.
Thanks
Remove: required="true" from <aura:attribute ....................> it will display the values.
<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>
<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>
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
The code above worked, if that helps.
<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>
I created this one and it help to complete trailhead challenge for"Create a Packing List Item Component".
<aura:component access="global" >
<aura:attribute type="Camping_Item__c" name="item" required="true"/>
Name:<lightning:formattedText value="{!v.item.Name}" style="text"/>
Price:<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
Quantity:<lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/>
Packed:<lightning:input type="toggle" label="Packed" name="togglevalue" checked="{!v.item.Packed__c}" />
</aura:component>
<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>
Harikrishan Sidhu
Full Steps:
10/10 100% WORKING
<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>
<lightning:input type="toggle"
label="Packed?"
name="packed"
checked="{!v.item.Packed__c}"/>
</p>
</aura:component>
I am a beginner here, learning aura. Here below is my code I wrote to pass the 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>
<lightning:input type="toggle"
label="Packed?"
name="Packed"
checked="{!v.item.Packed__c}" />
</p>
</aura:component>
<aura:component>
<aura:attribute name="item" type="Camping_Item__c" required="true"
default="{'Name': 'Bottle',
'Price__c':2000,
'Quantity__c':7,
'Packed__c':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}" format-style="decimal"/>
</p>
<p>
<lightning:input type="toggle"
label="Packed"
name="Packed"
checked="{!v.item.Packed__c}" />
</p>
</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(18,0)" required="true"/></p>
<p> Packed: {!v.item.Packed__c} </p>
<lightning:input type="toggle"
label="Packed"
name="Packed"
checked="{!v.item.Packed__c }" />
</aura:component>
<aura:attribute name="item" type="Camping_Item__c" required="true" default="string" />
<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="Item"/>
</p>
<p>
<lightning:input type="toggle"
label="Packed?"
name="Packed"
checked="{!v.item.Packed__c}" />
</p>
</aura:component>