• Josh Rainboldt
  • NEWBIE
  • 0 Points
  • Member since 2017

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 0
    Replies
I am trying to make a Lightning Component that displays some field for viewing purposes, then when a button is clicked, it reveals a different set of fields that are editable. When the user clicks to save, it should return to the view only page with the updated information that the user changed. Here is my code: (It is currently not registering onclick events)
Component:
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="simpleRecord" type="Object"/>
    <aura:attribute name="recordError" type="String"/>
    
    <force:recordData aura:id="recordEditor"
      					recordId="{!v.recordId}"
      					layoutType="FULL"
      					mode="EDIT"
      					targetRecord="{!v.record}"
      					targetFields="{!v.simpleRecord}"
      					targetError="{!v.recordError}"
      					recordUpdated="{!c.handleRecordUpdated}"
                      	fields="Id, 
                                Customer_Health__c,
              					Churn_Risk__c,
                                CXCSAT__c,
                                CX_C_SAT__c,
                                NextStep,
              					HLCSAT__c,
                                HeadLightCSat__c,
                                HeadLight_Usage__c,
              					Sponsor_Engagement__c,
              					Sponsor_Scorecards__c,
              					Success_Story__c,
                                Observation_Quality__c,
                                Observation_Quantity__c,
                                Quality_PP__c,
                                Quantity_PP__c,
    							Success_Slide__c"/> 
    <!--div read only view, include the action button toggle 'slds-hide'-->
    <lightning:button label="Update Health" onclick="{! c.showFields }" class="slds-button slds-float_right"/>
    <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Opportunity">
        
    <div id="healthView">
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-2">
                <lightning:outputField fieldName="Customer_Health__c"/>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <lightning:outputField fieldName="HeadLight_Usage__c"/>
            </div>
            <div class="slds-col slds-size_1-of-2">
            	<lightning:outputField fieldName="HeadLightCSat__c"/>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <lightning:outputField fieldName="CX_C_SAT__c"/>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <lightning:outputField fieldName="Sponsor_Engagement__c"/>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <lightning:outputField fieldName="Churn_Risk__c"/>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <lightning:outputField fieldName="Success_Story__c"/>
            </div>
            <div class="slds-col slds-size_1-of-2">
                <lightning:outputField fieldName="Success_Slide__c"/>
            </div>
            	<lightning:outputField fieldName="NextStep"/>
        </div>
    </div>
    </lightning:recordViewForm>
	<!--div edit view include save, cancel button 'slds-hide'-->
<lightning:layout >
<div id="updateHealthFields" class="slds-hide">
    <lightning:button label="Save Health" onclick="{! c.updateFields }" class="slds-button slds-float_right"/>
	<div class="slds-form_compound">
		<div class="slds-form-element__group">
			<div class="slds-form-element slds-size_1-of-2">
				<lightning:input aura:id="updateHealth"
								 label="Observation Quality"
								 type="number"
								 name="obsquality"
         						 value="{!v.simpleRecord.Observation_Quality__c}"/>
      		</div>
			<div class="slds-form-element slds-size_1-of-2">
				<lightning:input aura:id="updateHealth"
								 label="Observation Quality Points Possible"
								 type="number"
								 name="obsqualitypp"
         						 value="{!v.simpleRecord.Quality_PP__c}"/>
      		</div>
        </div>
		<div class="slds-form-element__group">
			<div class="slds-form-element slds-size_1-of-2">
				<lightning:input aura:id="updateHealth"
								 label="Observation Quantity"
								 type="number"
								 name="obsquantity"
         						 value="{!v.simpleRecord.Observation_Quantity__c}"/>
      		</div>
			<div class="slds-form-element slds-size_1-of-2">
				<lightning:input aura:id="updateHealth"
								 label="Observation Quantity Points Possible"
								 type="number"
								 name="obsquantitypp"
         						 value="{!v.simpleRecord.Quantity_PP__c}"/>
      		</div>
        </div>
		<div class="slds-form-element__group">
			<div class="slds-form-element slds-size_1-of-2">            
				<lightning:input aura:id="updateHealth"
                                 label="HeadLight C-Sat"
                                 type="number"
                             	 name="headlightcsat"
                            	 value="{!v.simpleRecord.HLCSAT__c}"/>
            </div>
            <div class="slds-form-element slds-size_1-of-2"> 
    			<lightning:input label="Customer Experience C-Sat"
                     			 aura:id="updateHealth"
                     			 type="number"
                     			 name="cxcsat"
                     			 value="{!v.simpleRecord.CXCSAT__c}"/>
            </div>
            <div class="slds-form-element slds-size_1-of-2"> 
				<lightning:input label="Sponsor Engagement"
                                 aura:id="updateHealth"
                                 name="sponsorengagement"
                                 value="{!v.simpleRecord.Sponsor_Engagement__c}"/>
            </div>
            <div class="slds-form-element slds-size_1-of-2"> 
                <lightning:input label="Churn Risk"
                     			 aura:id="updateHealth"
                     			 name="churnrisk"
                     			 value="{!v.simpleRecord.Churn_Risk__c}"/>
            </div>
        </div>
		<div class="slds-form-element__group">
			<div class="slds-form-element slds-size_1-of-2">
                <lightning:input type="checkbox" 
                     			 aura:id="updateHealth"
                    			 label="Success Story"
                    			 name="successstory"
                    			 value="{!v.simpleRecord.Success_Story__c}"/>
            </div>
            <div class="slds-form-element slds-size_1-of-2">
            	<lightning:input type="url"
                     			 aura:id="updateHealth"
                    			 label="Success Slide URL"
                    			 value="{!v.simpleRecord.Success_Slide__c}"/>
            </div>
        </div>
        <div class="slds-form-element" width="100%">
    		<lightning:input type="text"
                     		 aura:id="updateHealth"
                    		 label="Next Steps"
                    		 value="{!v.simpleRecord.NextStep}"/> 
        </div>
    </div>
</div>
</lightning:layout>
    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            <ui:message title="Error" severity="error" closable="true">
                {!v.recordError}
            </ui:message>
        </div>
    </aura:if>
</aura:component>

Controller:
({
    handleSaveRecord: function(component, event, helper) {
        component.find("recordEditor").saveRecord($A.getCallback(function(saveResult) {
                                                                 if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                                                                     console.log("Save completed Successfully.");
                                                                 }	else if (saveResult.state === "INCOMPLETE"){
                                                                     console.log("User is offline, device doesn't support drafts.");
                                                                 }	else if (saveResult.state === "ERROR") {
                                                                     console.log('Problem saving record, error: ' + JSON.strigify(saveResult.error));
                                                                 }	else {
                                                                     console.log('Unkown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
                                                                 }
        }));
    
    },
    showFields: function(component, event, helper) {
            $A.util.removeClass("updateHealthFields", "slds-hide");
        	$A.util.addClass("healthView", "slds-hide");
    },
    updateFields: function(component, event, helper) {
      		$A.util.removeClass("healthView", "slds-hide");
        	$A.util.addClass("updateHealthFields", "slds-hide");  
    },
    handleRecordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "LOADED") {
           // record is loaded (render other component which needs record data value)
            console.log("Record is loaded successfully.");
        } else if(eventParams.changeType === "CHANGED") {
            // record is changed
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted
        } else if(eventParams.changeType === "ERROR") {
            debugger;
            // there’s an error while loading, saving, or deleting the record
            console.log(eventParams);
        }
    },
})

Currently it doesnt seem like the button is processing the onclick method.