You need to sign in to do that
Don't have an account?
Bob 11
Urgent need to add a loading spinner to Lightning Component
I urgently need help with adding a spinner to a lightning component. right now there is a pause when the component is looking for available time slots. There is one component that call another component to find time slots. I need a spinner displayed while the called component is get those time slots. I've tried a few different things with no success.
No Tutorials please, i need actual help on the placement of the spinner in the code
The first component calling to the BookSlot component
BookingSlot Component:
Controller:
Helper Class:
No Tutorials please, i need actual help on the placement of the spinner in the code
The first component calling to the BookSlot component
<aura:iteration items="{!v.slotList}" var="slot" indexVar="i"> <aura:if isTrue="{!(i > v.rowCount) == false}"> <c:BookingSlot slot="{!slot}" workOrderId="{!v.workOrderId}" serviceAppointmentId="{!v.serviceAppointmentId}"/> </aura:if> </aura:iteration>
BookingSlot Component:
<aura:component controller="AppointmentBooking" description="Books the slot for a given Service Appointment"> <aura:attribute name="debug" type="boolean" default="false"/> <aura:attribute name="isOpen" type="boolean" default="false"/> <aura:attribute name="slot" type="Object"/> <aura:attribute name="workOrderId" type="Id"/> <aura:attribute name="serviceAppointmentId" type="Id"/> <aura:attribute name="detailsAccount" type="String"/> <aura:attribute name="detailsSA" type="String"/> <aura:if isTrue="{!v.debug}"> open={!v.isOpen}<br/> serviceAppointmentId={!v.serviceAppointmentId}<br/> slot={!v.slot} </aura:if> <span class="apptSlot" onclick="{!c.openModel}"> <center class="slotPill"> <lightning:progressBar value="{!v.slot.grade}" size="large" class="rankBar" title="{!'Rank: '+v.slot.grade}"/> <lightning:formattedDateTime value="{!v.slot.times.startDT}" weekday="long" year="numeric" month="short" day="2-digit" hour="2-digit" minute="2-digit" hour12="true" timeZone="UTC"/> - <lightning:formattedDateTime value="{!v.slot.times.endDT}" hour="2-digit" minute="2-digit" hour12="true" timeZone="UTC"/> </center> </span> <aura:if isTrue="{!v.isOpen}"> <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_small"> <div class="slds-modal__container"> <header class="slds-modal__header"> <lightning:buttonIcon iconName="utility:close" onclick="{! c.closeModal }" alternativeText="close" variant="bare-inverse" class="slds-modal__close"/> <h1 class="slds-text-heading--small">Confirmation</h1> </header> <div class="slds-modal__content slds-p-around_small" id="modal-content-id-1"> <p> <div>You have selected the following slot:</div> <br/> <div class="slds-form_horizontalX slds-formX slds-gridX slds-wrapX"> <center> <lightning:formattedDateTime value="{!v.slot.times.startDT}" weekday="long" year="numeric" month="short" day="2-digit" hour="2-digit" minute="2-digit" hour12="true" timeZone="UTC"/> - <lightning:formattedDateTime value="{!v.slot.times.endDT}" hour="2-digit" minute="2-digit" hour12="true" timeZone="UTC"/> </center> </div> <br/> <!-- test fields that we need --> <div> <lightning:input type="text" value="{!v.detailsAccount}" class="input" require="true" label="Is there anything additional we need to know to locate your home?"/> <br/> <lightning:input type="text" value="{!v.detailsSA}" class="input" require="true" label="Is there anything else you would like us to know prior to the appointment?"/> <br/> </div> <!-- end test fields that we need --> <div>Please confirm you would like the selected date and time</div> </p> </div> <footer class="slds-modal__footer"> <lightning:button name='Cancel' label='Cancel' onclick='{!c.closeModal}'/> <lightning:button variant="brand" name='Confirm' label='Confirm' onclick='{!c.handleSlotSelected}'/> </footer> </div> </section> <div class="slds-backdrop slds-backdrop_open"></div> </aura:if> <br/> </aura:component>
Controller:
({ handleSlotSelected: function (component, e, helper) { console.log('in booking slot component'); helper.undeleteWorkOrderAndServiceAppointment(component); helper.updateServiceAppointment(component); helper.scheduleServiceAppointment(component); }, openModel: function(component) { component.set("v.isOpen", true); }, closeModal: function(component) { component.set("v.isOpen", false); } });
Helper Class:
({ undeleteWorkOrderAndServiceAppointment : function (component) { var workOrderId = component.get("v.workOrderId") var serviceAppointmentId = component.get("v.serviceAppointmentId"); var action = component.get("c.undeleteWorkOrderAndServiceAppointment"); action.setParams({ 'workOrderId' : workOrderId, 'serviceAppointmentId': serviceAppointmentId }); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { component.set("v.isOpen", false); } else { let errors = response.getError(); console.log('Error response: ' + response); console.log("Error message: " + errors[0].message); } }); $A.enqueueAction(action); }, updateServiceAppointment : function (component) { var slot = component.get("v.slot"); var serviceAppointmentId = component.get("v.serviceAppointmentId"); var detailsAccount = component.get("v.detailsAccount"); var detailsServiceAppt = component.get("v.detailsSA"); var action = component.get("c.updateServiceAppointment"); action.setParams({ 'slotJSON' : JSON.stringify(slot), 'serviceAppointmentId': serviceAppointmentId, 'detailsAccount' : detailsAccount, 'detailsServiceAppt' : detailsServiceAppt }); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { component.set("v.isOpen", false); } else { let errors = response.getError(); console.log('Error response: ' + response); console.log("Error message: " + errors[0].message); } }); $A.enqueueAction(action); }, scheduleServiceAppointment : function (component) { var serviceAppointmentId = component.get("v.serviceAppointmentId"); var action = component.get("c.scheduleServiceAppointment"); action.setParams({ 'serviceAppointmentId': serviceAppointmentId }); action.setCallback(this, function(response) { var state = response.getState(); var serviceAppointmentId = component.get("v.serviceAppointmentId"); if (state === "SUCCESS") { component.set("v.isOpen", false); var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ "title": "Success", "type":"success", "message": "You have successfully scheduled your service appointment!", "messageTemplate": 'You have successfully scheduled your service appointment! Click {0} for details!', "messageTemplateData": [ { url: '/detail/' + serviceAppointmentId, label: 'here', } ], "mode":'sticky' }); toastEvent.fire(); } else { let errors = response.getError(); console.log('Error response: ' + response); console.log("Error message: " + errors[0].message); } }); $A.enqueueAction(action); } });
Please use below code:-
Helper Class:
if you need any assistanse, Please let me know!!
Kindly mark my solution as the best answer if it helps you.
Thanks
Mukesh
Thank you so much for helping me.
I updated my component with your code but no spinner appeared. The screenshots below show where the spinner should show up prior to the appontment dates being displayed.
Background on the process
A community user will log int othe community and click a Schedule appointment button. This invokes a lightning component "AppointmentBooking"
a Calendar is displayed with the available time slot to the right. Below is the code for the AppointmentBooking component. I only need this spinner because the system is so slow populating those time slots. Let me know if you need the apex class posted. Thank again!
AppointmentBooking component
Helper:
Actually the spinner works it's just in the wrong place. After i selected the appointment the spinner started working but it needs to show up while the time slots are being searched.
it looks like this
I would like it to show up here below. Any suggestions
Do i need to give anything else for this spinner? It is showing up in the wrong place