You need to sign in to do that
Don't have an account?
H 007
Progress bar is not working in LWC component
Hi, right now I am working with fieldset in salesforce, I just developed a LWC component for show filedset set with progress bar, but now I am trying to add inline editing functionally but progress bar is not working can anyone plese help me.
import { LightningElement, api, wire, track} from 'lwc'; // import { refreshApex } from '@salesforce/apex'; import {ShowToastEvent} from 'lightning/platformShowToastEvent'; import getFieldSetMetadata from '@salesforce/apex/FieldsetController.getFieldSetMetadata'; export default class Fieldset extends LightningElement { @api showTitle; @api strTitle; @api iconName; @api showProgress; @api columnsLarge; @api fieldSetName; @api isEditable; @api alwaysEditing; @api saveMessageTitle; @api saveMessage; @api recordId; @api recordTypeId; @track sObjectName; @track recordFields = []; @track metadataError; @track isLoading = true; @track isEditing = false; @track hasChanged = false; @track isSaving = false; @track layoutSizeLarge; @track fieldCount; @track count; @track hasRen=false; @track hasLoad=false; @api progress; showEditField=false; arrayOfFields=[]; acc; handleChange() { this.count=0; var c=0; // const formValue=this.template.querySelectorAll('lightning-record-form') // console.log('form values = '+JSON.stringify(formValue)) // const demoInput = this.template.querySelector('lightning-input[data-anyName=anyValue]').value; // console.log('demoInput '+ demoInput); const inputFields = this.template.querySelectorAll( 'lightning-input-field' ); const outputFields = this.template.querySelectorAll( 'lightning-output-field' ); console.log('input fields -> '+JSON.stringify(inputFields)) console.log('output fields -> '+outputFields) // console.log(JSON.stringify(inputFields.length)); // console.log(JSON.stringify(outputFields.length)); // console.log('hello'+JSON.stringify(outputFields)); // console.log('hello1'+JSON.stringify(inputFields)); if (inputFields) { inputFields.forEach(field => { console.log(field.fieldName +'-> ' +field.value); // console.log(); if(field.value!=='' && field.value!==null && field.value!=undefined && field.value!=false) { this.count=this.count+1; } }); // if (event.target.checked){this.count=count+1} } console.log('count of all input fields is'+ this.count); console.log('fieldCount'+this.fieldCount ); if (outputFields) { // console.log('hi'+JSON.parse(JSON.stringify(outputFields[0].outerText))); outputFields.forEach(field => { var fld=field.outerText.split('\n')[1]; // console.log('dc '+field.outerText.split('\n')); console.log('field name '+ JSON.stringify(field.fieldName)); console.log('field value '+fld); if(fld!==undefined && fld!=='' && fld!==null) { c=c+1; this.count=this.count+1; } }); } // console.log('coount '+this.count); // console.log('output field count'+c); this.progress=parseInt((this.count*100)/ this.fieldCount); } @wire(getFieldSetMetadata, { recordId: '$recordId', fieldSetName: '$fieldSetName' }) wiredFieldSetMetadata(value) { this.acc=value; const { data, error } = value; this.isLoading = true; if (data) { this.arrayOfFields=new Array(); // console.log(JSON.stringify(data.fieldsMetadata)); // console.log(data.fieldsMetadata.length); this.fieldCount=data.fieldsMetadata.length; // Get the FieldSet Name if we have no custom title if (!this.strTitle) this.strTitle = data.fieldSetLabel; // Get the Record Type Id this.recordTypeId = data.recordTypeId; // Get the SObject Name this.sObjectName = data.sObjectName; // If we have record fields, Remove them all if (!!this.recordFields.length) while (this.recordFields.length > 0) this.recordFields.pop(); // Get the fields metadata and populate fields data.fieldsMetadata.forEach((fd) => { // Get valid JSON const fieldProperties = JSON.parse(fd); const { fieldSetProperties, fieldDescribeProperties } = fieldProperties; // Add the field this.arrayOfFields.push(fieldDescribeProperties.name) this.recordFields.push({ name: fieldDescribeProperties.name, isRequired: fieldSetProperties.isRequired || fieldSetProperties.dbRequired, isUpdateable: !!fieldDescribeProperties.updateable, editable: this.isEditing && !!fieldDescribeProperties.updateable }); }); console.log('array of fields ',this.arrayOfFields); // Clear any errors this.metadataError = undefined; this.handleChange(); } else if (error) { this.metadataError = 'Unknown error'; if (Array.isArray(error.body)) { this.metadataError = error.body.map(e => e.message).join(', '); } else if (typeof error.body.message === 'string') { this.metadataError = error.body.message; } console.error('getMetadata error', this.metadataError); } if (this.recordFields.length || this.metadataError) this.isLoading = false; // this.handleChange(); // if(this.refreshcnt==0) // { // refreshApex(this.acc); // this.refreshcnt++; // } this.handleChange(); } // Get the card Title if we should show it get cardTitle() { return this.showTitle ? this.strTitle : null; } // Show spinner error propertys get showSpinner() { return this.isLoading || this.isSaving; } // Show the record form get showForm() { return !this.isLoading && !!this.sObjectName && !this.metadataError; } // Check if we can edit get editLabel() { return this.isEditing ? 'Cancel' : 'Edit'; } // Check if we can edit get canEdit() { return this.isEditable && !this.alwaysEditing && !!this.recordFields.length; } // Check if we can save, we need fields get canSave() { return (this.canEdit || this.alwaysEditing) && this.isEditing && this.hasChanged && !!this.recordFields.length; } // Show a UI Message showToastEvent(title, message, variant) { const event = new ShowToastEvent({ title, message, variant }); this.dispatchEvent(event); } // Set the has changed to true setHasChanged() { this.handleChange(); this.hasChanged = true; } // Handle the form Submit callback handleFormSubmit() { // Show spinner this.isSaving = true; }; // Handle the form Success callback handleFormSuccess() { // Hide spinner this.isSaving = false; // No more changes to save this.hasChanged = false; // Show success message this.showToastEvent(this.saveMessageTitle, this.saveMessage, 'success'); }; // Handle the form Error callback handleFormError() { // Hide spinner this.isSaving = false; }; }
https://www.salesforcecodecrack.com/2019/09/progress-bar-in-lwc.html
https://salesforce.stackexchange.com/questions/287743/progress-indicator-is-not-working-in-lwc
Please mark as Best Answer if above information was helpful.
Thanks,