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.



    <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 class="slds-col slds-size_9-of-12 slds-text-align_center slds-m-top_large">


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

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

    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.

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


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.