1

I am trying to create a progress bar which allows users to use it anywhere in their org.

The idea is that I want to have two input fields named 'Target' and 'Progress'. For example say I have a field name 'Total Hours' and another field 'Worked_Hours'. I want to be able to show the progress of the working hours.

Currently I have done this.

ProgressBar.html

    <template>

    <lightning-card title={Name} icon-name="custom:custom18" size="small">
    <lightning-input type="text" onchange={handleTargetChangelabel} label="Target Field"></lightning-input>
    <lightning-input type="text" onchange={handleProgressChange} label="Progress Field"></lightning-input>
    <div class="slds-p-around--medium">          
        <div class="slds-col slds-size_9-of-12 slds-m-bottom--medium">     
            <lightning-progress-bar value={progress}></lightning-progress-bar>
        </div>
        <div class="slds-col slds-size_9-of-12 slds-text-align_center slds-m-top_large">
        </div>     
    </div>
    </lightning-card>
            
</template>

ProgressBar.js

import { LightningElement,api,wire} from 'lwc';
import { getRecord, getFieldValue} from 'lightning/uiRecordApi';

export default class ProgressBar extends LightningElement {
    
    @api recordId;
    targetField;
    progressField;
    @wire(getRecord, { recordId: '$recordId'})
    object;

    get Name(){
        return getFieldValue(this.object.data, 'Name');
    };

    get Percentage(){
        let p = getFieldValue(this.object.data, this.progressField);
        let t = getFieldValue(this.object.data, this.targetField);
        let perc = p - t;
        if(p > 100){
            return 100;
        }
        return round(perc,2);
    }

    handleTargetChange(event) {
        this.targetField = event.detail.value;
    }
    handleProgressChange(event) {
        this.progressField = event.detail.value;
    }
}

I am wondering how I can create this so I dont need to manually specify the object. For example this component should be available on the Project Object and the Task Object. In addition I wanted to make sure that the field returned is also a number field, so wondering what the best way is to achieve this.

Any help will be appreciated.

1
  • you could pass the p and t variables directly to the component via @api?
    – Damecek
    Apr 20 at 8:35

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.