Example Component with Spinner

_README.md

Component that makes a change and then auto-closes

To create a component that would perform an update and then auto close.

(Please note that this is from this installable demo here: https://github.com/SalesforceCloudServices/ltng-support-button-update )

Within this example, we load info from this record and set the value and then close the modal automatically.

• Preferrably without the end user seeing the modal, but this depends on the speed that javascript is processed on the client. Please see Octane information within this help document

After the values are set, we simply need to call two events:

• refreshView
• closeQuickAction

For example

    //-- refresh the standard detail
    $A.get('e.force:refreshView').fire();
    
    //-- close the dialog
    $A.get("e.force:closeQuickAction").fire();

ltng_CloseTicket.cmp

<!--
/** 
 * Example component that replaces a JavaScript button.
 * @component: ltng_CloseTicket
 **/
-->
<aura:component
    implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionWithoutHeader"
    access="global"
>
    <!-- attributes -->
	<aura:attribute name="recordId" type="String"/>
    <aura:attribute name="ticketRecord" type="ltng_ButtonUpdateBase__c" />
    <!-- handlers -->
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <!-- data
      - see https://developer.salesforce.com/docs/component-library/bundle/force:recordData/documentation
      - for more information
    -->
    <force:recordData aura:id="forceRecord"
        recordId="{!v.recordId}"
        layoutType="FULL"
        targetFields="{!v.ticketRecord}"
        fields="Id,Name,Status__c"
        mode="EDIT"
        recordUpdated="{!c.recordUpdated}"
    />
    <!-- body -->
    <!-- show a spinner for any brief time the component is shown
      - as this will depend on the speed that javascript is processed on the client
      - see 'octane' under this document for more
      https://help.salesforce.com/articleView?id=000250291&language=en_US&type=1
      
      see here for more on the css spinner from the lightning design system
      https://www.lightningdesignsystem.com/components/spinners/#site-main-content
    -->
    <div class="slds-spinner--brand slds-spinner slds-spinner--small" role="alert">
        <span class="slds-assistive-text">Loading...</span>
        <div class="slds-spinner__dot-a"></div>
        <div class="slds-spinner__dot-b"></div>
    </div>
</aura:component>

ltng_CloseTicketController.js

({
	/**
	 * Handles when the component initializes
	 **/
    init : function(component, event, helper) {
	},
    
    /**
     * Handles when the Lightning Data Service record changes
     **/
    recordUpdated: function(component, event, helper){
        var changeType = event.getParams().changeType;
        
        if( changeType === "ERROR" ){
            helper.displayError('RecordUpdate Error', component, event, helper);
            console.error("error occurred");
            debugger;
        } else if( changeType === "LOADED" ){
            console.info( "recordLoaded" );
            helper.handleRecordLoaded(component, event, helper);
        } else if( changeType === "REMOVED" ){
            helper.displayError('RecordUpdate Removed', component, event, helper);
            debugger;
        } else if( changeType === "CHANGED" ){
            //-- called when updated internally
            //console.info( "record was changed" );
        } else {
            helper.displayError('Unexpected RecordUpdate:' + changeType, component, event, helper);
            debugger;
        }
    }
})

ltng_CloseTicketHelper.js

({
	/**
	 * Called when the component has been loaded
	 **/
    handleRecordLoaded : function(component, event, helper) {
        var currentStatus = component.get('v.ticketRecord.Status__c');
        var updatedStatus = helper.updateStatus( currentStatus );
        
        //-- perform the update
        component.set('v.ticketRecord.Status__c', updatedStatus);
        
        //-- more can be found here:
        //-- https://trailhead.salesforce.com/modules/lightning_data_service/units/lightning_data_service_manipulate_records
        
        component.find("forceRecord").saveRecord(function(saveResult){
            if( saveResult.state === 'SUCCESS' || saveResult.state === 'DRAFT' ){
                helper.handleSaveCompleted(component, event, helper);
            } else if( saveResult.state === 'INCOMPLETE' ){
                console.error('User is offline, device doesnt support drafts');
                helper.displayError('Incomplete', component, event, helper);
            } else if( saveResult.state === 'ERROR' ){
                console.error('Problem saving contact, error: ' + JSON.stringify(saveResult.error));
                helper.displayError('Error', component, event, helper);
            } else {
                console.error('Unknown problem, state:' + saveResult.state + ', error:' + JSON.stringify(saveResult.error));
                helper.displayError('Unknown Error', component, event, helper);
            }
        });
	},
    
    /**
     * Displays an error
     * @param errorTitle (String)
     * @param errorMsg (String)
     **/
    displayError: function(errorCode, component, event, helper){
        var errorTitle = 'Error';
        var errorMsg = 'An error occurred on Close Ticket: ' + errorCode + '. Please contact your System Administrator';
        
        //-- send a toast message
        var resultsToast = $A.get('e.force:showToast');
        resultsToast.setParams({
            'title': errorTitle,
            'message': errorMsg
        });
        resultsToast.fire();
    },
    
    /**
     * Handles when the save has completed
     **/
    handleSaveCompleted : function(component, event, helper) {
        //-- send a toast message
        var resultsToast = $A.get('e.force:showToast');
        resultsToast.setParams({
            'title': 'Saved',
            'message': 'The record was saved'
        });
        resultsToast.fire();
        
        //-- refresh the standard detail
        $A.get('e.force:refreshView').fire();
        
        //-- close the dialog
        $A.get("e.force:closeQuickAction").fire();
    },
        
    /**
     * updates the status based on the old status.
     * <p>This is only needed for demo,
     * normally you would just set it to CLOSED</p>
     * @param oldStatus (String)
     * @return (String)
     **/
     updateStatus: function( oldStatus ){
        var NEW_STATUS = 'New';
        var CLOSED_STATUS = 'Closed';
        
        var updatedStatus = CLOSED_STATUS;
        if( oldStatus === CLOSED_STATUS ){
            updatedStatus = NEW_STATUS;
        }
        
        return( updatedStatus );
     }
})