function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
H 007H 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;
    };
}
VinayVinay (Salesforce Developers) 
Check below working examples for Progress Bar in Lightning Web Component.

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,