• Manish Anand 22
  • NEWBIE
  • 25 Points
  • Member since 2016

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 9
    Questions
  • 12
    Replies
Does time dependent actions consider hours and minutes for executing action?
Example- If my process builder or workflow is set to run as- 

4 Days After X , 
where X is any date field. let's say X = 15/12/2020 7:47 AM ,
when will my action be scheudled to run = 19/12/2020 7:47 AM OR
19/12/2020 0:00 AM

 
Few agents in my org are facing very intermittent issue- They get connection error and 'Time since login gets reset' automatically and because of this chats are not assigned to these agents. 
Has anyone experienced similar issue?
When customer initiates a chat, it's routed to an agent based on the button and particular skills assigned , it creates a chat transcript as well as a case record. Case record is linked to the account.

Now what we want is, when a customer requests chat , if those customer/account's owner is part of a list of agents/user, then assign /route those chats to those users. Rest other chat still need to be routed based on the skill.
How can we assign live agent chat conditionally (based on account owner) to an agent? 
I have a workflow rule on Opportunity which sends an email alert. Email template currently being used is text email template. Opportunity->Proposal->Proposal Line item. We have a field BillingCycle on PLIs and we want billing cycles of all the PLIs for an opportunity to be included in the email notification sent out when this workflow rule is fired.
How we can achieve it?
Create a hyperlink/link/button on an object 'Proposal' to link it to a custom object 'Credit'. Both the objects are child to Account. How this can be achieved ? 
Hi,
I am having issue in passing latitude and longitude as an event parameters. Below is my onBoatClick controller.
({
	onBoatClick : function(component, event, helper) {
        var BoatSelectEvent = component.getEvent("BoatSelect");
        var boatSelected = component.get("v.boat");
        BoatSelectEvent.setParam(
            "boatId",boatSelected.Id);
        BoatSelectEvent.fire();
        var BoatSelectedEvt = $A.get("e.c:BoatSelected");
        var Boat = component.get("v.boat");
        BoatSelectedEvt.setParams({
            "boat" : Boat
        }) ;
        console.log('Firing event' +Boat);
        BoatSelectedEvt.fire();
        
        var boat=component.get('v.boat');
        console.log('Boat Selected Id in boattile' + boat.Id);
        var lat = boat.Geolocation_Latitude__s;
        var long = boat.Geolocation_Longitude__s;
        var label = boat.Name;
        console.log('boat name in BoatTile'+ label);
        console.log('Latitude in BoatTile' + lat);
        console.log('Longitude in BoatTile' + long);
        var PlotMapMarkerEvent = $A.get("e.c:PlotMapMarker");
         PlotMapMarkerEvent.setParams({
            "lat"   : lat,
            "long"  : long,
            "label" : label,
             "SObjectId" : boat.Id });
         PlotMapMarkerEvent.fire();
        
		
	} ,

console.log display label and boat Id. However values for lat and lon is undefined. Not sure, what I am missing here.

Any help is appreciated. 

Thanks much.
Hi,
I passed this challenge. However, when I load the it, (through lightning page or an app) it gives an error- Action failed: c:BoatSearchResults$controller$doSearch [component is not defined]
In the code as well, there seems to be no reason to get this error. Below is my code.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" 
                access="global" controller="BoatSearchResults">
    <aura:handler name="init"  value="{!this}" action="{!c.doSearch}" /> 
	<aura:attribute name="boats" type="Boat__c[]" />

    <lightning:layout multipleRows="true" horizontalAlign="center">

    	    <aura:iteration items="{!v.boats}" var="boatVar">
                <lightning:layoutItem flexibility="grow"  class="slds-m-right_small" >   
                	<c:BoatTile boat="{!boatVar}"/>
                </lightning:layoutItem>
            </aura:iteration>
    		
               
            <aura:if isTrue="{!lessthan(v.boats.length,1)}">
                <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">   
                    <ui:outputText value="No boats found" />
                </lightning:layoutItem>
            </aura:if>

    </lightning:layout>
</aura:component>
 
({
	doSearch: function(component, event, helper) {
        console.log('In do Search');
		helper.onSearch(component,event,helper);
	}
});
 
({
	onSearch : function(Component, event, helper) {
        console.log('In Helper');
		var action=component.get('c.getBoats');
        action.setCallback(this,function(response) {
            if(response.getState === 'SUCCESS')
            {
                var boatslist = response.getReturnValue();
                component.set("v.boats",boatslist);
            }
        });
        $A.enqueueAction(action);
	}
})
Below is the screenshot of the error message:
User-added image

Any hints, why it wouldn't load the app?

Thanks,
Manish
I am stuck in challenge 2. Functionality is working as expected. But I get error as - Challenge Not yet complete... here's what's wrong: 
The BoatSearch component should instantiate the BoatSearchForm and BoatSearchResults components.

Below is my BoatSearch component.
 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <lightning:card title="Find a Boat"  class="slds-m-top_10px">
        <c.BoatSearchForm/>
    </lightning:card>
    <lightning:card title="Matching Boats">
        <c.BoatSearchResults/>
    </lightning:card>
</aura:component>
Any lead is appreciated.
Thanks,
Manish
Hi All,

I am trying to complete this challenge, but getting below error-
This page has an error. You might just need to refresh it.
Action failed: lightning:formattedNumber$controller$init [Value Currency out of range for numberformat options property style]
Failing descriptor: {lightning:formattedNumber$controller$init}

 I referred the doc- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_formattedNumber.htm
Everything seems to be fine. Below is my code.

CampingList.cmp :-
<aura:component >
    <aura:attribute name="items" type="Camping_Item__c[]" />
    <aura:attribute name="newItem" type="Camping_Item__c" default="{'sObjectType' :'Camping_Item__c',
                                                                   'Quantity__c' : 0 ,
                                                                    'Price__c' : 0,
                                                                    'Packed__c' : false 
                                                                    }" />
   
    <form class="slds-form--stacked">   
    
     <lightning:input aura:id="campingform" label="Name"
                      name="campingname"
                      value="{!v.newItem.Name}"
                      required="true"
                      />
      <lightning:input aura:id="campingform" label="Quantity"
                       name="campingquantity"
                       min="1"
                       step="1"
                       value="{!v.newItem.Quantity__c}"
                       messageWhenRangeUnderflow="Enter atleast 1 quantity."
                       />
      <lightning:input aura:id="campingform" label="Price"
                       name="campingprice"
                       formatter="currency"
                       value="{!v.newItem.Price__c}"
                       messageWhenValueMissing="Did you forget me?"
                       />
         <lightning:input type="checkbox" aura:id="campingform" label="Packed?" 
                                         name="campingpacked"
                                         checked="{!v.newItem.Packed__c}"/>
        
      <lightning:button label="Create Camping" 
                        class="slds-m-top--medium"
                        variant="brand"
                        onclick="{!c.clickCreateItem}"/>
    </form>
     <lightning:card title="Campings">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.items}" var="itm">
                <c:campingListItem item="{!itm}"/>
            </aura:iteration>
        </p>
    </lightning:card>	
</aura:component>
CampingListController.js
{
	clickCreateItem : function(component, event, helper) {
        var validCamping = component.find('campingform').reduce(function (validSoFar,inputCmp){
        inputCmp.showHelpMessageIfInvalid();
        return validSoFar && inputCmp.get('v.validity').valid;
    }, true );
	if(validCamping)
    {
       var newCamping1 = component.get("v.newItem");
       console.log("Create Camping :" + JSON.stringify(newCamping1));
      // createCamping(component,newcamping);
       var theCampings = component.get("v.items");
       var newCamping = JSON.parse(JSON.stringify(newCamping1));
       console.log("Expenses before 'create': " + JSON.stringify(theCampings));
       theCampings.push(newCamping);
       component.set("v.items", theCampings);
       console.log("Expenses after 'create': " + JSON.stringify(theCampings));
       component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Quantity__c': 0.0,
                    'Price__c': 0,
                    'Packed__c': false });
    }
	}
   
  
})
CampingListItem.cmp
<aura:component >
	<aura:attribute name="item" type="Camping_Item__c" default="{'sobjectType':'Camping_Item__c',
                                                                'Packed__c':false}" 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="Decimal" />
    </P>
    <P>
        <lightning:input type="toggle" 
                         label="Packed?"
                         name="packed"
                         checked="{!v.item.Packed__c}" />
    </P>
    <p>
        <lightning:button label="Packed!" onclick="{!c.packItem}" />
    </p>
</aura:component>

Thanks,
Manish.​



 
Few agents in my org are facing very intermittent issue- They get connection error and 'Time since login gets reset' automatically and because of this chats are not assigned to these agents. 
Has anyone experienced similar issue?
When customer initiates a chat, it's routed to an agent based on the button and particular skills assigned , it creates a chat transcript as well as a case record. Case record is linked to the account.

Now what we want is, when a customer requests chat , if those customer/account's owner is part of a list of agents/user, then assign /route those chats to those users. Rest other chat still need to be routed based on the skill.
How can we assign live agent chat conditionally (based on account owner) to an agent? 
Hi,
I am having issue in passing latitude and longitude as an event parameters. Below is my onBoatClick controller.
({
	onBoatClick : function(component, event, helper) {
        var BoatSelectEvent = component.getEvent("BoatSelect");
        var boatSelected = component.get("v.boat");
        BoatSelectEvent.setParam(
            "boatId",boatSelected.Id);
        BoatSelectEvent.fire();
        var BoatSelectedEvt = $A.get("e.c:BoatSelected");
        var Boat = component.get("v.boat");
        BoatSelectedEvt.setParams({
            "boat" : Boat
        }) ;
        console.log('Firing event' +Boat);
        BoatSelectedEvt.fire();
        
        var boat=component.get('v.boat');
        console.log('Boat Selected Id in boattile' + boat.Id);
        var lat = boat.Geolocation_Latitude__s;
        var long = boat.Geolocation_Longitude__s;
        var label = boat.Name;
        console.log('boat name in BoatTile'+ label);
        console.log('Latitude in BoatTile' + lat);
        console.log('Longitude in BoatTile' + long);
        var PlotMapMarkerEvent = $A.get("e.c:PlotMapMarker");
         PlotMapMarkerEvent.setParams({
            "lat"   : lat,
            "long"  : long,
            "label" : label,
             "SObjectId" : boat.Id });
         PlotMapMarkerEvent.fire();
        
		
	} ,

console.log display label and boat Id. However values for lat and lon is undefined. Not sure, what I am missing here.

Any help is appreciated. 

Thanks much.
Hi,
I passed this challenge. However, when I load the it, (through lightning page or an app) it gives an error- Action failed: c:BoatSearchResults$controller$doSearch [component is not defined]
In the code as well, there seems to be no reason to get this error. Below is my code.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" 
                access="global" controller="BoatSearchResults">
    <aura:handler name="init"  value="{!this}" action="{!c.doSearch}" /> 
	<aura:attribute name="boats" type="Boat__c[]" />

    <lightning:layout multipleRows="true" horizontalAlign="center">

    	    <aura:iteration items="{!v.boats}" var="boatVar">
                <lightning:layoutItem flexibility="grow"  class="slds-m-right_small" >   
                	<c:BoatTile boat="{!boatVar}"/>
                </lightning:layoutItem>
            </aura:iteration>
    		
               
            <aura:if isTrue="{!lessthan(v.boats.length,1)}">
                <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">   
                    <ui:outputText value="No boats found" />
                </lightning:layoutItem>
            </aura:if>

    </lightning:layout>
</aura:component>
 
({
	doSearch: function(component, event, helper) {
        console.log('In do Search');
		helper.onSearch(component,event,helper);
	}
});
 
({
	onSearch : function(Component, event, helper) {
        console.log('In Helper');
		var action=component.get('c.getBoats');
        action.setCallback(this,function(response) {
            if(response.getState === 'SUCCESS')
            {
                var boatslist = response.getReturnValue();
                component.set("v.boats",boatslist);
            }
        });
        $A.enqueueAction(action);
	}
})
Below is the screenshot of the error message:
User-added image

Any hints, why it wouldn't load the app?

Thanks,
Manish
I am stuck in challenge 2. Functionality is working as expected. But I get error as - Challenge Not yet complete... here's what's wrong: 
The BoatSearch component should instantiate the BoatSearchForm and BoatSearchResults components.

Below is my BoatSearch component.
 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <lightning:card title="Find a Boat"  class="slds-m-top_10px">
        <c.BoatSearchForm/>
    </lightning:card>
    <lightning:card title="Matching Boats">
        <c.BoatSearchResults/>
    </lightning:card>
</aura:component>
Any lead is appreciated.
Thanks,
Manish
Hi All,

I am trying to complete this challenge, but getting below error-
This page has an error. You might just need to refresh it.
Action failed: lightning:formattedNumber$controller$init [Value Currency out of range for numberformat options property style]
Failing descriptor: {lightning:formattedNumber$controller$init}

 I referred the doc- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_formattedNumber.htm
Everything seems to be fine. Below is my code.

CampingList.cmp :-
<aura:component >
    <aura:attribute name="items" type="Camping_Item__c[]" />
    <aura:attribute name="newItem" type="Camping_Item__c" default="{'sObjectType' :'Camping_Item__c',
                                                                   'Quantity__c' : 0 ,
                                                                    'Price__c' : 0,
                                                                    'Packed__c' : false 
                                                                    }" />
   
    <form class="slds-form--stacked">   
    
     <lightning:input aura:id="campingform" label="Name"
                      name="campingname"
                      value="{!v.newItem.Name}"
                      required="true"
                      />
      <lightning:input aura:id="campingform" label="Quantity"
                       name="campingquantity"
                       min="1"
                       step="1"
                       value="{!v.newItem.Quantity__c}"
                       messageWhenRangeUnderflow="Enter atleast 1 quantity."
                       />
      <lightning:input aura:id="campingform" label="Price"
                       name="campingprice"
                       formatter="currency"
                       value="{!v.newItem.Price__c}"
                       messageWhenValueMissing="Did you forget me?"
                       />
         <lightning:input type="checkbox" aura:id="campingform" label="Packed?" 
                                         name="campingpacked"
                                         checked="{!v.newItem.Packed__c}"/>
        
      <lightning:button label="Create Camping" 
                        class="slds-m-top--medium"
                        variant="brand"
                        onclick="{!c.clickCreateItem}"/>
    </form>
     <lightning:card title="Campings">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.items}" var="itm">
                <c:campingListItem item="{!itm}"/>
            </aura:iteration>
        </p>
    </lightning:card>	
</aura:component>
CampingListController.js
{
	clickCreateItem : function(component, event, helper) {
        var validCamping = component.find('campingform').reduce(function (validSoFar,inputCmp){
        inputCmp.showHelpMessageIfInvalid();
        return validSoFar && inputCmp.get('v.validity').valid;
    }, true );
	if(validCamping)
    {
       var newCamping1 = component.get("v.newItem");
       console.log("Create Camping :" + JSON.stringify(newCamping1));
      // createCamping(component,newcamping);
       var theCampings = component.get("v.items");
       var newCamping = JSON.parse(JSON.stringify(newCamping1));
       console.log("Expenses before 'create': " + JSON.stringify(theCampings));
       theCampings.push(newCamping);
       component.set("v.items", theCampings);
       console.log("Expenses after 'create': " + JSON.stringify(theCampings));
       component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Quantity__c': 0.0,
                    'Price__c': 0,
                    'Packed__c': false });
    }
	}
   
  
})
CampingListItem.cmp
<aura:component >
	<aura:attribute name="item" type="Camping_Item__c" default="{'sobjectType':'Camping_Item__c',
                                                                'Packed__c':false}" 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="Decimal" />
    </P>
    <P>
        <lightning:input type="toggle" 
                         label="Packed?"
                         name="packed"
                         checked="{!v.item.Packed__c}" />
    </P>
    <p>
        <lightning:button label="Packed!" onclick="{!c.packItem}" />
    </p>
</aura:component>

Thanks,
Manish.​



 
can anyone help me solving the Second step for Lightning Component Framework Specialist super badge.. I struck in that badge.
Hi, 
I have created the following components for this step:

BoatSearchForm.cmp
<aura:component controller="BoatSearchForm" implements="force:appHostable,flexipage:availableForAllPageTypes"  access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="searchOptions" type='String[]' default='All'/>
    <aura:attribute name='searchOptionToIdMap' type='Map' default="{All:''}" />
    <aura:attribute name='showNewButton' type='Boolean' default='false'/>

    <lightning:layout horizontalAlign="center"   >

       <lightning:layoutItem class="slds-grid_vertical-align-center" > 

           <lightning:select aura:id='typeSelect' name='selectItem' onchange=''>
             <aura:iteration items='{!v.searchOptions}' var='option'>
                 <option value='{!option}' text='{!option}'></option>
             </aura:iteration>
         </lightning:select>
       </lightning:layoutItem>

       <lightning:layoutItem class="slds-grid_vertical-align-center" > 
         <lightning:button label="Search" variant="brand"  />
         <aura:if isTrue='{!v.showNewButton}'>
            <lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>
        </aura:if>
       </lightning:layoutItem>

    </lightning:layout>

</aura:component>

BoatSearchController.js
({
     doInit: function(component) 
    {
       console.log('inside do init '); 
        debugger;
       var action=component.get('c.getSearchOptions');
        action.setcallback(this,function(response)
         {
             debugger;
             var state = response.getState();
             if (state === "SUCCESS")
             {
                 debugger;
                 console.log('inside success state');
                 component.set('v.searchOptionToIdMap',response.getReturnValue());
                 var custs = [];
                 var conts = response.getReturnValue();
                 for(var key in conts)
                 {
                    console.log('populated list');
                     custs.push({value:conts[key], key:key});
                 }
                 component.set("v.searchOptions", custs);
             }
             
         }); 
    }, 
     createBoat: function (component) 
     {
            console.log('inside controller');
            var createRecordEvent = $A.get('e.force:createRecord');
            if (createRecordEvent) 
            {
                    var typeName = component.find('typeSelect').get('v.value');
                    var typeMap = component.get('v.searchOptionToIdMap');
                    var typeId = null;
                    if (typeName && typeMap && typeMap[typeName]) 
                    {
                            typeId = typeMap[typeName];
                    }
                    createRecordEvent.setParams({
                        'entityApiName': 'Boat__c',
                        'defaultFieldValues': {
                            'BoatType__c': typeId
                        }
                    });
                    createRecordEvent.fire();
            }
       }
})
BoatSearchHelper.js
({
    renderNewButton: function (component) {
    var createRecordEvent = $A.get('e.force:createRecord');
    if (createRecordEvent) {
        component.set('v.showNewButton', true);
    }
}})

Apex Controller:
public with sharing class BoatSearchForm
{
        @AuraEnabled
        public static Map<String, String> getSearchOptions() 
        {
                List<BoatType__c> boatTypes = [SELECT Id, Name FROM BoatType__c LIMIT 400];
                Map<String, String> returnMap = new Map<String, String>();
                if(!boatTypes.isEmpty())
                {
                        for(BoatType__c bt: boatTypes)
                        {
                            returnMap.put(bt.Name, bt.Id);
                        }
                }
                return returnMap;
        }
}
FriendswithBoat.app
<aura:application extends="force:slds">
    <lightning:layout >
                 
                 <lightning:card title="Find a Boat" class="slds-m-top_10px" >
                          <c:BoatSearchForm />
                 </lightning:card>

    </lightning:layout>
</aura:application>

Whenever I try to load my app I get this error:
User-added image

Something is wrong with my component. I am not able to identify it. Can anyone help me with this?
Hi,

I'm currently struggling with Lightning Component Framework Specialist Challenge 10.

I'm successfully using an event to pass values into the Map's client side controller, and Leaflet seems to be doing something, but:

1. The marker is displayed on a grey area, not a map.
2. When I click a second boat, instead of updating the map, an error pops up informing me "Uncaught Action failed: c:Map$controller$onPlotMapMarker [Map container is already initialized.]"

This is my onPlotMapMaker method:
 
onPlotMapMarker: function(component, event, helper) {
    	var id = event.getParam('sObjectId');
    	var lat = event.getParam('lat');
    	var long = event.getParam('long');
    	var label = event.getParam('label');

    	var mapContainer = component.find('map').getElement(); 
	    var map = L.map(mapContainer).setView([lat, long], 13);

		L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(map);
		
		L.marker([lat, long]).addTo(map)
		    .bindPopup(label)
		    .openPopup();
    }

What's wrong with it?


 
Hi,

I'm currently working on the Lightning Component Framework Specialist Superbadge.

When I click "New", at least as I've interpretted the requirements, the "Friends with Boats" pages is behaving as expected, but Trailhead complains:
Challenge Not yet complete... here's what's wrong: 
The BoatSearchForm component's "New" button should launch the default boat record create page using logic in its controller.

Have I misunderstood a requirement?

Here is my markup:
 
<aura:component controller="BoatSearchFormAuraCtrl" >
	<aura:attribute access="private" name="boatList" type="BoatType__c[]" default="[]" />
	<aura:attribute access="private" name="showNewButton" type="Boolean" default="false" />
	<aura:attribute access="private" name="selectedBoat" type="BoatType__c" />
	
	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	
	<h2 class="slds-page-header__title">Find a Boat</h2>
	<form>
		<lightning:layout horizontalAlign="center">
		    <lightning:select name="select" value="{!v.selectedBoat}">
		        <option value="">All Types</option>
		        <aura:iteration items="{!v.boatList}" var="boat">
		            <option value="{!boat.Name}" text="{!boat.Name}"></option>
		        </aura:iteration> 
		    </lightning:select>
		    <lightning:button name="Search" label="Search" variant="brand" />
		    <aura:if isTrue="{!v.showNewButton}">
		    	<lightning:button name="New" label="New" variant="neutral" onclick="{!c.createBoat}"/>
		    </aura:if>
		</lightning:layout>
	</form>	
</aura:component>
And here is my controller:
({
	doInit : function(component, event, helper) {
		component.set('v.showNewButton', $A.get('e.force:createRecord'));
		helper.setBoatTypeList(component);
	},
	
	createBoat : function(component) {
		var createRecordEvent = $A.get('e.force:createRecord');
		createRecordEvent.setParams({
			'entityApiName' : 'BoatType__c',
			'defaultFieldValues': {
				'Name': component.get('v.selectedBoat')
			},
		});
		createRecordEvent.fire();
	}
})





 
Has anyone completed this trail? I am stomped on challenge number 3, regarding created the process for fulfillment. Any pointers or guidance would be appreciated.
 
Problem Statement:

Create a form to enter new items and display the list of items entered. To make our camping list look more appealing, change the campingHeader component to use the SLDS. Similar to the unit, style the Camping List H1 inside the slds-page-header. Modify the campingList component to contain an input form and an iteration of campingListItem components for displaying the items entered.
  • The component requires an attribute named items with the type of an array of camping item custom objects.
  • The component requires an attribute named newItem of type Camping_Item__c with default quantity and price values of 0.
  • The component displays the Name, Quantity, Price, and Packed form fields with the appropriate input component types and values from the newItem attribute.
  • The JavaScript controller checks to ensure that the Name, Quantity and Price values submitted are not null.
  • If the form is valid, the JavaScript controller pushes the newItem onto the array of existing items, triggers the notification that the items value provider has changed, and resets the newItem value provider with a blank sObjectType of Camping_Item__c.

My Code:

CampingList.cmp

 
<aura:component >
	<ol>
        <li>Bug Spray</li>
        <li>Bear Repellant</li>
        <li>Goat Food</li>
    </ol>
 <aura:attribute name="items" type="Camping_Item__c[]"/>
 <aura:attribute name="newItem" type="Camping_Item__c"
     default="{'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Price__c': 0,
                    'Quantity__c': 0,
                    'Packed__c': false }"/>    
    <div style = "slds">
    <div class="slds-col slds-col--padded slds-p-top--large">
		<div aria-labelledby="newform">
			<fieldset class="slds-box slds-theme--default slds-container--small">
				<legend id="newform" class="slds-text-heading--small slds-p-vertical--medium">New Form</legend>
				<form class="slds-form--stacked">
					<div class="slds-form-element slds-is-required">
						<div class="slds-form-element__control">
							<ui:inputText aura:id="formname" label="Name" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Name}" required="true"/>
						</div>
					</div>
					<div class="slds-form-element slds-is-required">
						<div class="slds-form-element__control">
							<ui:inputCurrency aura:id="formprice" label="Price" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Price__c}" placeholder="0"/>
						</div>
					</div>
					<div class="slds-form-element">
						<div class="slds-form-element__control">
							<ui:inputNumber aura:id="formquantity" label="Quantity" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Quantity__c}" required="true" placeholder="0"/>
						</div>
					</div>
					<div class="slds-form-element">
						<ui:inputCheckbox aura:id="formpacked" label="Packed?" class="slds-checkbox" labelClass="slds-form-element__label" value="{!v.newItem.Packed__c}"/>
					</div>
					<div class="slds-form-element">
						<ui:button label="Create Form" class="slds-button slds-button--brand" press="{!c.clickCreateFormData}"/>
					</div>
				</form>
			</fieldset>
		</div>
    </div>

    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Camping</h3>
        </header>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.items}" var="items">
                    <c:campingListItem item="{!items}"/>
                </aura:iteration>
            </div>
        </section>
    </div>    
	</div>
</aura:component>
CampingListController.js:
 
({
    clickCreateFormData: function(component, event, helper) {

        var validitem = true;
        
        var nameField = component.find("formname");
        var expname = nameField.get("v.value");
		if ($A.util.isEmpty(expname)){
            validitem = false;
            nameField.set("v.errors", [{message:"Expense name can't be blank."}]);
        }
        else {
            nameField.set("v.errors",null);
        }
        
        var priceField = component.find("formprice");
        var expprice = nameField.get("v.value");
            if ($A.util.isEmpty(expprice)){
            validitem = false;
            priceField.set("v.errors", [{message:"Expense price can't be blank."}]);
        }
        else{
            priceField.set("v.errors",null);
        }
        
        var quantityField = component.find("formquantity");
        var expquantity = nameField.get("v.value");
        if ($A.util.isEmpty(expquantity)){
            validitem = false;
            quantityField.set("v.errors", [{message:"Expense quantity can't be blank."}]);
        }
        else{
            quantityField.set("v.errors",null);
        } 
        
      /*  if(validExpense){
            var newItem = component.get("v.newItem");
            console.log("Create item: " + JSON.stringify(newItem));
            helper.createExpense(component, newItem);
        } */
         if(validitem){
            var newItem = component.get("v.newItem");
            console.log("Create item: " + JSON.stringify(newItem));
        	var theItem = component.get("v.items");
            var newItem = JSON.parse(JSON.stringify(newItem));
            theItem.push(newItem);
            component.set("v.newItem",newItem);
        }
        component.set("v.newItem",{'sobjectType': 'Camping_Item__c',
                    'Name': '',
					'Price__c': 0,                                   
                    'Quantity__c': 0,
                    'Packed__c': false });
    }
})
CampingListItem.cmp:
 
<aura:component implements="force:appHostable">
   <aura:attribute name="item" type="Camping_Item__c"/>
     <p>The Item is: 
         <ui:outputText value="{!v.item}" />
    </p> 
    <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>
    
  <!--  <p>
    	<ui:button label="Packed!" press="{!c.packItem}"/>
    </p> -->
</aura:component>

Could anyone help pass and run the challenge.

Thanks.