• David Geismar
  • NEWBIE
  • 0 Points
  • Member since 2018

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 2
    Questions
  • 1
    Replies
Here's the problematic trail https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_basics/lex_dev_lc_basics_forms?trail_id=force_com_dev_intermediate

I keep on getting this error :

I dont get it as I do have a lightning input for the packed attribute. Here's my 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'}"/>
        <div aria-labelledby="newitemform">
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
                <legend id="newitemform" class="slds-text-heading--small 
                  slds-p-vertical--medium">
                  Add Item
                </legend>
              <form class="slds-form--stacked">          
                    <lightning:input aura:id="itemform" label="item Name"
                                     name="itemname"
                                     value="{!v.newItem.Name}"
                                     required="true"/> 
                      <lightning:input type="number" aura:id="itemform" label="item Quantity"
                                     name="itemquantity"
                                     value="{!v.newItem.Quantity__c}"
                                      min="1"
                                     step="1"
                                     required="true"/> 
                    <lightning:input type="number" aura:id="itemform" label="item Price "
                                      min="0.1"
                                     formatter="currency"
                                     step="0.01"
                                     name="itemprice"
                                     value="{!v.newItem.Price__c}"
                                     required="true"/>
                  <lightning:input 	type="checkbox" aura:id="itemform" label="Packed"
                                     name="itempacked"
                                     value="{!v.newItem.Packed__c}"
                                   	/>
                   <lightning:button label="Create Item" 
                              class="slds-m-top--medium"
                              variant="brand"
                              onclick="{!c.clickCreateItem}"/>
          </form>
         </fieldset>
       </div>
    <lightning:card title="Items">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.items}" var="item">
                <c:campingListItem item="{!item}"/>
            </aura:iteration>
        </p>
    </lightning:card>

</aura:component>

Also Everything is running correctly in my PREVIEW, except one thing that I cant figure out. In the challenge, it is specified that :
"e 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"
I am having trouble with the "resets the newItem value provider with a blank sObjectType of Camping_Item__c". Here's my CampingListController.js code :
({
    clickCreateItem : function(component, event, helper) {
        console.log('in function');
        var validItem = component.find('itemform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        // If we pass error checking, do some real work
        if(validItem){
            // Create the new expense
            var items = component.get("v.items");
            var newItem = component.get("v.newItem");
            console.log(newItem);
            items.push(newItem);
            console.log(items);
            component.set("v.items", items);
            component.set("v.newItem", "{ 'sobjectType': 'Camping_Item__c','Quantity__c': 0,'Price__c': 0,'Packed__c': 'false'}")
        }
    }
})

As you can see the last line of clickCreateItem resets newItem to a blank object : 
component.set("v.newItem", "{ 'sobjectType': 'Camping_Item__c','Quantity__c': 0,'Price__c': 0,'Packed__c': 'false'}")
So when I test the UI in the preview, I fill the form and I submit, it does create a new Item and resets the form but it is then impossible to enter new values in any fields of the form. Do you have any idea as to why it behaves this way and how rightfully reset the newItem value ?

Here's the rest of my files :

campingListItem.cmp :
<aura:component >

	<aura:attribute name="item" type="Camping_Item__c"/>
    	<p>{! v.item.Name}</p>
        <p><lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/></p>
        <p><lightning:formattedNumber value="{!v.item.Quantity__c}"/></p>
        <p><lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="packed"                         
                         checked="{!v.item.Packed__c}" /></p>
    <div>
        <lightning:button label="Packed!"
            onclick="{!c.packItem }"/>
    </div>

</aura:component>

campingListItemController.js :
({
    packItem: function(component, event, helper) {
        var btnClicked = event.getSource();   
        var btnMessage = btnClicked.set("v.disabled", "true");
        component.set("v.item.Packed__c", "true");     // update our message
    }
})

and campingHeader.cmp 
 
<aura:component >
        <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="action:goal" alternativeText="My Items"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Items</h1>
                <h2 class="slds-text-heading--medium">My Items</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / PAGE HEADER -->
    <!-- NEW EXPENSE FORM -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
        <!-- [[ expense form goes here ]] -->
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW EXPENSE FORM -->
	<c:campingList/>
</aura:component>

Any help would be much appreciated !

 

I am just starting with salesforce VisualForce and Apex. I am building an "invoice app" in which I need to have a page that both creates the Invoice and the "Invoice Lines" child objects. In terms of UI, I want my page to have fields (client, date, reference) for the parent object (Invoice)  and to be able to add and delete dynamically new fields for the child records (Invoice lines) with a little + button for exemple.
I am very unsure as to what are the steps to build this kind of behavior. 

I created a custom invoice and a custom invoice_line objects. I also started building my visualforce page that is linked to the standardController Invoice__c. It seems like I need to have an InvoiceControllerExtension to gain access to invoice_line models and be able to add fields for my invoice_line child objects.

FInally in terms of UI (visualforce page) how would you go by for creating this kind of dynamic behavior. I think I need to add Jquery as static resource to achieve this ? I am a bit lost and it would be nice to find an exemple on how to achieve this behavior

Here's the problematic trail https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_basics/lex_dev_lc_basics_forms?trail_id=force_com_dev_intermediate

I keep on getting this error :

I dont get it as I do have a lightning input for the packed attribute. Here's my 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'}"/>
        <div aria-labelledby="newitemform">
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
                <legend id="newitemform" class="slds-text-heading--small 
                  slds-p-vertical--medium">
                  Add Item
                </legend>
              <form class="slds-form--stacked">          
                    <lightning:input aura:id="itemform" label="item Name"
                                     name="itemname"
                                     value="{!v.newItem.Name}"
                                     required="true"/> 
                      <lightning:input type="number" aura:id="itemform" label="item Quantity"
                                     name="itemquantity"
                                     value="{!v.newItem.Quantity__c}"
                                      min="1"
                                     step="1"
                                     required="true"/> 
                    <lightning:input type="number" aura:id="itemform" label="item Price "
                                      min="0.1"
                                     formatter="currency"
                                     step="0.01"
                                     name="itemprice"
                                     value="{!v.newItem.Price__c}"
                                     required="true"/>
                  <lightning:input 	type="checkbox" aura:id="itemform" label="Packed"
                                     name="itempacked"
                                     value="{!v.newItem.Packed__c}"
                                   	/>
                   <lightning:button label="Create Item" 
                              class="slds-m-top--medium"
                              variant="brand"
                              onclick="{!c.clickCreateItem}"/>
          </form>
         </fieldset>
       </div>
    <lightning:card title="Items">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.items}" var="item">
                <c:campingListItem item="{!item}"/>
            </aura:iteration>
        </p>
    </lightning:card>

</aura:component>

Also Everything is running correctly in my PREVIEW, except one thing that I cant figure out. In the challenge, it is specified that :
"e 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"
I am having trouble with the "resets the newItem value provider with a blank sObjectType of Camping_Item__c". Here's my CampingListController.js code :
({
    clickCreateItem : function(component, event, helper) {
        console.log('in function');
        var validItem = component.find('itemform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        // If we pass error checking, do some real work
        if(validItem){
            // Create the new expense
            var items = component.get("v.items");
            var newItem = component.get("v.newItem");
            console.log(newItem);
            items.push(newItem);
            console.log(items);
            component.set("v.items", items);
            component.set("v.newItem", "{ 'sobjectType': 'Camping_Item__c','Quantity__c': 0,'Price__c': 0,'Packed__c': 'false'}")
        }
    }
})

As you can see the last line of clickCreateItem resets newItem to a blank object : 
component.set("v.newItem", "{ 'sobjectType': 'Camping_Item__c','Quantity__c': 0,'Price__c': 0,'Packed__c': 'false'}")
So when I test the UI in the preview, I fill the form and I submit, it does create a new Item and resets the form but it is then impossible to enter new values in any fields of the form. Do you have any idea as to why it behaves this way and how rightfully reset the newItem value ?

Here's the rest of my files :

campingListItem.cmp :
<aura:component >

	<aura:attribute name="item" type="Camping_Item__c"/>
    	<p>{! v.item.Name}</p>
        <p><lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/></p>
        <p><lightning:formattedNumber value="{!v.item.Quantity__c}"/></p>
        <p><lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="packed"                         
                         checked="{!v.item.Packed__c}" /></p>
    <div>
        <lightning:button label="Packed!"
            onclick="{!c.packItem }"/>
    </div>

</aura:component>

campingListItemController.js :
({
    packItem: function(component, event, helper) {
        var btnClicked = event.getSource();   
        var btnMessage = btnClicked.set("v.disabled", "true");
        component.set("v.item.Packed__c", "true");     // update our message
    }
})

and campingHeader.cmp 
 
<aura:component >
        <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="action:goal" alternativeText="My Items"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Items</h1>
                <h2 class="slds-text-heading--medium">My Items</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / PAGE HEADER -->
    <!-- NEW EXPENSE FORM -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
        <!-- [[ expense form goes here ]] -->
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW EXPENSE FORM -->
	<c:campingList/>
</aura:component>

Any help would be much appreciated !