Task Edit / Create label position for fields

[jintech]

I have some UI requirements in the task model which I am wondering are possible in the task edit modal or not

• For each field, we have a label property with two possible values i.e. before and above. Currently I have set it to above like this

task edit modal.png (9.74 KiB) Viewed 352 times

Is it possible to place the label like the one shown below? See the label position

expected_field_label.png (8.34 KiB) Viewed 352 times

• See the duration field. Is it possible to display the duration in the format shown in the second image?

[tasnim]

Hi,

Is it possible to place the label like the one shown below? See the label position

You can use the material theme it has this kind of style

msedge_HpNPYcoJG4.png (19.13 KiB) Viewed 339 times

Regarding the format of durationField you can override it like this

class MyDurationField extends DurationField {
    static get $name() {
        return 'MyDurationField';
    }

static get type() {
    return 'mydurationfield';
}

get inputValue() {
    // Do not use the _value property. If called during configuration, this
    // will import the configured value from the config object.

    // Return your expected format value
    return this.value == null ? '' : this.calcValue(false).toString(this.useAbbreviation);
}
}

MyDurationField.initClass();

You can check the code inside the DurationField.js for more customization options

Hope it helps.

Best regards,
Tasnim

[jintech]

I am currently using stolkholm styling and everything is designed according to that. Is it not possible while using stolkholm theme and using some custom css styling?

[marcio]

Hey jintech,

Yes, you can have a fully customized theme actually. Check this section in our docs regarding that https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/customization/styling#creating-a-custom-theme

We also have a demo with a custom theme available https://bryntum.com/products/schedulerpro/examples-scheduler/theme/.

[jintech]

Specifically regarding the label position mentioned earler, can we achieve the UI shown in the second screenshot with stolkholm theme. If yes. How?

[alex.l]

Hi there,

You can set label "above" or "before" the field. Please see https://bryntum.com/products/gantt/docs/api/Core/widget/TextField#config-labelPosition
If you need to move it in some other position, use CSS. To apply custom class, use https://bryntum.com/products/gantt/docs/api/Core/widget/TextField#config-labelCls

Raw CSS you could use

    margin: 0px 0 -0.8em .1em;
    z-index: 1;

[jintech]

Hi @tasmin
I was able to customize the duration field format using the following code

// Method to convert the magnitude to a formatted string
	function toFormattedString(magnitude) {
		debugger;
		const hours = Math.floor(magnitude);
		const minutes = Math.round((magnitude - hours) * 60);
		return `${hours}:${minutes.toString().padStart(2, '0')} H`;
	}

class MyDurationField extends DurationField {
		static get $name() {
		    return 'MyDurationField';
		}

	static get type() {
	    return 'mydurationfield';
	}

	get inputValue() {
	    // Do not use the _value property. If called during configuration, this
	    // will import the configured value from the config object.

	    // Return your expected format value
	    debugger;
	    return this.value == null ? '' : toFormattedString(this._magnitude); 
	    // this.calcValue(false).toString(this.useAbbreviation);
	}
}

MyDurationField.initClass();

Duration field config in task edit modal

durationField : {
									type: 'mydurationfield',
									label: "<% l('Duration', [], current_user.ui_language) %>",
									labelPosition: 'above',
									weight: 350,
									useAbbreviation: true,
									flex: '1 0 40%'
								},

The issue I am facing is

1. Whenever I change the value of duration field, I get the alert message , Invalid field value even though it does display the duration value in the correct format
2. The changed duration value is not reflected on scheduler

[alex.l]

Hi,

Please post data Model definition and data JSON you used. Also I don't see which field is used as data source.
Also please open a new thread. Here we discussed label position, so better to create a new thread to follow forum rule: one thread - one question.

Looking forward from you!