• Rebekah Lilly
  • NEWBIE
  • 20 Points
  • Member since 2020

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 3
    Questions
  • 4
    Replies
I am struggling to get a spinner to display during a table refresh and an imperative call. When the component is initially displayed, it loads data into a table and the spinner works perfectly:

 connectedCallback() {
        this.showLoading = true;
 }

@wire(fetchShipments, {inputId: '$inputId', inputFromDate: null, inputToDate: null})
wiredFetchShipments({ error, data }) {
        if (data) {
            this.shipments = data;
            this.allshipments = data;            
        } else if (error) {
            this.error = error;
            this.shipments = undefined;
            this.allshipments = undefined;
       }
        this.showLoading = false;
        this.isLoaded = true;
    }

However, if users want to filter the data, I have various search fields and a "Refresh List" button. The Refresh List works perfectly to reload the table, but does not display the spinner. I played around with it and added an await and a delay... is this the only way to get a spinner to show for something like this? If the user changes the dates to be outside of the defaults that were originall fetched from the server, then I must make another call to load new records... the spinner does not display there either. I am trying to work with async and await, but struggling to get it to work. There has to be a better way:

showLoadingDelay() {
        return new Promise(resolve => {
            setTimeout(function() {
                resolve(false)
            }, 4000)
        })
    }

 async handleRefresh( event ) {
        if (( dates selected are outside of the current default date range fetched from server) {
            const newdata = await this.handleDateUpdate(); // fetch new records from server
            this.showLoading = true;  // show spinner 
        } else {
            this.showLoading = true; // show spinner
        }
        this.shipments = this.allshipments;
        let recs = [];
        for (let rec of this.shipments) {
             let pushrec = true;
             //filter records based on user specified criteria
            if ( pushrec === true ) {
                 recs.push( rec );
            }
        }
        this.showLoading = await this.showLoadingDelay(); // trying to make it show spinner
        this.shipments = recs;
    }

async resetDates( event ) {
        fetchShipments({inputId: this.accountId, inputFromDate: null, inputToDate: null})
            .then(result => {
                this.shipments = result;
                this.allshipments = result;
            })
            .catch(error => {
                this.shipments = undefined;
                this.allshipments = undefined;
            })
    }

All the refreshes of the data work perfectly. From watching it in the debugger, it is retreiving the correct records when it should but I cannot get the darn spinner to show during the refresh because it happens so fast. That is why I was attempting the delay method. It retreives new records from the server fairly quickly too... so again I was trying the delay to get the spinner to show.

Any suggestions?
I have a fairly simply program that I am using to retreive some records via Apex and then allow the user to filter them in the JS controller. I also have an Export List button that is currently allowing them to download the list they have filtered as a CSV file. The problem is that leading zeroes do not show up in Excel. This is not an LWC or Salesforce issue, but an issue with how Excel handles the data. I would like to create a real XLSX file. Is there a way to do this natively? Or will I need to use a third-party library? What would be the recommended library to use? xlsx.js?

Thanks,
Rebekah

handleExport() {
        let rowEnd = '\n';
        let csvString = '';
        this.exportHeader.forEach(element => {
            csvString += element + ',';
        });
        csvString += rowEnd;
        this.orders.forEach(record => {
            csvString += Customer__c + ',';
            csvString += '"' + record.ShipToLocationID__c + '",';
            csvString += '"' + record.PONumber__c + '",';
            if (record.POLineNumber__c == undefined) {
                csvString += ' ,';
            } else {
                csvString += record.POLineNumber__c + ',';
            }
            if (record.CustomerItemNumber__c == undefined) {
                csvString += ' ,';
            } else {
               csvString += '"' + record.CustomerItemNumber__c + '",';
            }
            csvString += '"' + record.ItemNumber__c + '",';
            csvString += '"' + record.CONumber__c + '",';
            csvString += '"' + record.ERP_ProductItem__r.ItemDescription__c + '",';
            csvString += record.PromisedDeliveryDate__c + ',';
            csvString += record.COLineNumber__c + ',';
            csvString += record.ItemOrderedQuantity__c + ',';
            csvString += record.OpenQuantity__c + ',';
            csvString += record.UnitPrice__c + ',';
            csvString += record.ExtendedPrice__c + ',';
            csvString += rowEnd;
        });
       
        var element = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvString);
        let downloadElement = document.createElement('a');
        downloadElement.href = element;
        downloadElement.target = '_self';
        downloadElement.download = 'Sales Order Lines.csv';
        document.body.appendChild(downloadElement);
        downloadElement.click();
    }
I have a very simple lightning:recordEditForm:
<lightning:recordEditForm aura:id="recordEditForm" 
                                       objectApiName="CustomObject__c"
                                       onsubmit="{!c.handleCreate}"
                                       onsuccess="{!c.goToNewRecord}" >
    
             <lightning:inputField fieldName="Name__c" />
             <lightning:inputField fieldName="Description__c" />
             <lightning:inputField fieldName="Type__c" />    
             <lightning:inputField fieldName="Related__c" />
             <lightning:inputField fieldName="Required__c" />
             <lightning:inputField fieldName="Necessary__c" /> 
             <lightning:inputField fieldName="Source__c" />
             <lightning:input aura:id="ProjDueDate" name="ProjDueDate" label="Project Due Date" type="date" dateStyle="short" />
             <lightning:inputField fieldName="Product_Group__c" />
             <lightning:inputField fieldName="Category__c" />
             <lightning:inputField fieldName="PLM_Member__c" />
             <lightning:inputField fieldName="Sourcing_Member__c" />
             <lightning:inputField fieldName="MFG_Member__c" />
             <lightning:inputField fieldName="Quality_Member__c" />
             <lightning:inputField fieldName="Engineering_Member__c" />
             <lightning:inputField fieldName="Sales_Member__c" />
             <lightning:inputField fieldName="Application_Member__c" />
                 
             <lightning:button class="slds-m-top_small" type="submit" label="Create Project" />
             <lightning:button class="slds-m-top_small" variant="neutral" label="Cancel" onclick="{!c.handleCancel}" />   
        
             </lightning:recordEditForm>
        
As you can see, I am using a lightning:input field for the date because the default way lightning:inputField handled my date field was "April 5, 2022" instead of "4/5/2022" and it needed to look consistent with the record page. 

After deploying this into a full sandbox for testing, we are noticing a delay in the display. The lightning:input field is displayed first and for a couple of brief seconds its the only field you see, then the remaining of the lightning:inputField fields show up. 

Is there a way to keep this delay or handle it more efficiently so that all fields are rendered together? 

Or is there a way to control the way the lightning:inputField date is handled to be "mm/dd/yyyy" like the standard record page?

Thanks in advance!
I am struggling to get a spinner to display during a table refresh and an imperative call. When the component is initially displayed, it loads data into a table and the spinner works perfectly:

 connectedCallback() {
        this.showLoading = true;
 }

@wire(fetchShipments, {inputId: '$inputId', inputFromDate: null, inputToDate: null})
wiredFetchShipments({ error, data }) {
        if (data) {
            this.shipments = data;
            this.allshipments = data;            
        } else if (error) {
            this.error = error;
            this.shipments = undefined;
            this.allshipments = undefined;
       }
        this.showLoading = false;
        this.isLoaded = true;
    }

However, if users want to filter the data, I have various search fields and a "Refresh List" button. The Refresh List works perfectly to reload the table, but does not display the spinner. I played around with it and added an await and a delay... is this the only way to get a spinner to show for something like this? If the user changes the dates to be outside of the defaults that were originall fetched from the server, then I must make another call to load new records... the spinner does not display there either. I am trying to work with async and await, but struggling to get it to work. There has to be a better way:

showLoadingDelay() {
        return new Promise(resolve => {
            setTimeout(function() {
                resolve(false)
            }, 4000)
        })
    }

 async handleRefresh( event ) {
        if (( dates selected are outside of the current default date range fetched from server) {
            const newdata = await this.handleDateUpdate(); // fetch new records from server
            this.showLoading = true;  // show spinner 
        } else {
            this.showLoading = true; // show spinner
        }
        this.shipments = this.allshipments;
        let recs = [];
        for (let rec of this.shipments) {
             let pushrec = true;
             //filter records based on user specified criteria
            if ( pushrec === true ) {
                 recs.push( rec );
            }
        }
        this.showLoading = await this.showLoadingDelay(); // trying to make it show spinner
        this.shipments = recs;
    }

async resetDates( event ) {
        fetchShipments({inputId: this.accountId, inputFromDate: null, inputToDate: null})
            .then(result => {
                this.shipments = result;
                this.allshipments = result;
            })
            .catch(error => {
                this.shipments = undefined;
                this.allshipments = undefined;
            })
    }

All the refreshes of the data work perfectly. From watching it in the debugger, it is retreiving the correct records when it should but I cannot get the darn spinner to show during the refresh because it happens so fast. That is why I was attempting the delay method. It retreives new records from the server fairly quickly too... so again I was trying the delay to get the spinner to show.

Any suggestions?
I have a fairly simply program that I am using to retreive some records via Apex and then allow the user to filter them in the JS controller. I also have an Export List button that is currently allowing them to download the list they have filtered as a CSV file. The problem is that leading zeroes do not show up in Excel. This is not an LWC or Salesforce issue, but an issue with how Excel handles the data. I would like to create a real XLSX file. Is there a way to do this natively? Or will I need to use a third-party library? What would be the recommended library to use? xlsx.js?

Thanks,
Rebekah

handleExport() {
        let rowEnd = '\n';
        let csvString = '';
        this.exportHeader.forEach(element => {
            csvString += element + ',';
        });
        csvString += rowEnd;
        this.orders.forEach(record => {
            csvString += Customer__c + ',';
            csvString += '"' + record.ShipToLocationID__c + '",';
            csvString += '"' + record.PONumber__c + '",';
            if (record.POLineNumber__c == undefined) {
                csvString += ' ,';
            } else {
                csvString += record.POLineNumber__c + ',';
            }
            if (record.CustomerItemNumber__c == undefined) {
                csvString += ' ,';
            } else {
               csvString += '"' + record.CustomerItemNumber__c + '",';
            }
            csvString += '"' + record.ItemNumber__c + '",';
            csvString += '"' + record.CONumber__c + '",';
            csvString += '"' + record.ERP_ProductItem__r.ItemDescription__c + '",';
            csvString += record.PromisedDeliveryDate__c + ',';
            csvString += record.COLineNumber__c + ',';
            csvString += record.ItemOrderedQuantity__c + ',';
            csvString += record.OpenQuantity__c + ',';
            csvString += record.UnitPrice__c + ',';
            csvString += record.ExtendedPrice__c + ',';
            csvString += rowEnd;
        });
       
        var element = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvString);
        let downloadElement = document.createElement('a');
        downloadElement.href = element;
        downloadElement.target = '_self';
        downloadElement.download = 'Sales Order Lines.csv';
        document.body.appendChild(downloadElement);
        downloadElement.click();
    }
I have a very simple lightning:recordEditForm:
<lightning:recordEditForm aura:id="recordEditForm" 
                                       objectApiName="CustomObject__c"
                                       onsubmit="{!c.handleCreate}"
                                       onsuccess="{!c.goToNewRecord}" >
    
             <lightning:inputField fieldName="Name__c" />
             <lightning:inputField fieldName="Description__c" />
             <lightning:inputField fieldName="Type__c" />    
             <lightning:inputField fieldName="Related__c" />
             <lightning:inputField fieldName="Required__c" />
             <lightning:inputField fieldName="Necessary__c" /> 
             <lightning:inputField fieldName="Source__c" />
             <lightning:input aura:id="ProjDueDate" name="ProjDueDate" label="Project Due Date" type="date" dateStyle="short" />
             <lightning:inputField fieldName="Product_Group__c" />
             <lightning:inputField fieldName="Category__c" />
             <lightning:inputField fieldName="PLM_Member__c" />
             <lightning:inputField fieldName="Sourcing_Member__c" />
             <lightning:inputField fieldName="MFG_Member__c" />
             <lightning:inputField fieldName="Quality_Member__c" />
             <lightning:inputField fieldName="Engineering_Member__c" />
             <lightning:inputField fieldName="Sales_Member__c" />
             <lightning:inputField fieldName="Application_Member__c" />
                 
             <lightning:button class="slds-m-top_small" type="submit" label="Create Project" />
             <lightning:button class="slds-m-top_small" variant="neutral" label="Cancel" onclick="{!c.handleCancel}" />   
        
             </lightning:recordEditForm>
        
As you can see, I am using a lightning:input field for the date because the default way lightning:inputField handled my date field was "April 5, 2022" instead of "4/5/2022" and it needed to look consistent with the record page. 

After deploying this into a full sandbox for testing, we are noticing a delay in the display. The lightning:input field is displayed first and for a couple of brief seconds its the only field you see, then the remaining of the lightning:inputField fields show up. 

Is there a way to keep this delay or handle it more efficiently so that all fields are rendered together? 

Or is there a way to control the way the lightning:inputField date is handled to be "mm/dd/yyyy" like the standard record page?

Thanks in advance!