Custom UI - Best Practices

Sudharsan · January 12, 2023, 3:42pm

What was the issue ?

Sebastian · January 12, 2023, 3:46pm

I have a special type of FormArrays:

Squidex/squidex/blob/master/frontend/src/app/framework/angular/forms/templated-form-array.ts#L20


import { UndefinableFormArray } from './extended-form-array';

export interface FormArrayTemplate {
    createControl(value: any, initialValue?: any): AbstractControl;

    removeControl?(index: number, control: AbstractControl) : void;

    clearControls?(): void;
}

export class TemplatedFormArray extends UndefinableFormArray {
    constructor(public readonly template: FormArrayTemplate,
        validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null,
    ) {
        super([], validatorOrOpts, asyncValidator);
    }

    public setValue(value?: any[], options?: { onlySelf?: boolean; emitEvent?: boolean }) {
        this.prepare(value);

        super.setValue(value, options);

This takes a template (a factory how to construct the items) and when you setValue it calls the template to create the item forms:

github.com

Squidex/squidex/blob/master/frontend/src/app/framework/angular/forms/templated-form-array.ts#L69


}

public clear(options?: { emitEvent?: boolean }) {
    if (this.template.clearControls && this.controls.length > 0) {
        this.template.clearControls();
    }

    super.clear(options);
}

private prepare(value?: any[]) {
    if (Types.isArray(value) && value.length > 0) {
        let index = this.controls.length;

        while (this.controls.length < value.length) {
            this.add(value[index], { emitEvent: false });

            index++;
        }

        while (this.controls.length > value.length) {

I have forgotten not to set ‘emitEvent: false’ when adding items here, causing unnecessary updates about intermediate values.

So if the initial value was [] and you have sent [{}, {}, {}] to Squidex, the iframe control was receiving the following values:

[{}]                  // Previous: [{}, {}, {}]
[{}, {}]              // Previous: [{}]
[{}, {}, {}]          // Previous: [{}, {}]

And of course each of them was different to the previous value.

Sudharsan · January 12, 2023, 3:49pm

Makes sense. I did receive incremental item length for array in the valueChanged event.

Sebastian · January 12, 2023, 3:57pm

Could you create a bug report for the issue?

Sudharsan · January 12, 2023, 3:59pm

Okay. I will create one.

Sudharsan · January 12, 2023, 5:20pm

Done Custom Editor For Array Field Fires onValueChanged Events Wrongly

Sudharsan · January 13, 2023, 1:00pm

@Sebastian - Is there a workaround for this issue ?

Sebastian · January 13, 2023, 2:14pm

No, sorry…but you can install the latest dev version.

Sudharsan · January 13, 2023, 2:37pm

Is it fixed already ?

Sebastian · January 13, 2023, 2:38pm

Yes, you can install latest dev version.

Sudharsan · January 13, 2023, 2:38pm

Great !! Can you let me know the docker image tag ?

Sebastian · January 13, 2023, 2:56pm

Sure…it is dev-7438

Sudharsan · January 23, 2023, 8:41pm

Hello - Will the fix be available as part of 7.4.0 release ?

Sebastian · January 23, 2023, 8:52pm

Yes, I will prepare it tomorrow, I think. But it is not a promise.

Sudharsan · January 31, 2023, 4:59pm

Hello - Any progress on 7.4 release ?

slalFe · February 1, 2023, 3:13pm

Sudharsan · February 8, 2023, 5:50pm

@Sebastian - I see that the valueChanged event is getting fired in the latest 7.4 release. In my array there are 425 items and when I change their position using custom UI, I see valueChanged getting fired a minimum of three times.

Can you please double check ? I’m checking on my side to make sure that I’m indeed using 7.4 release .

Sebastian · February 8, 2023, 5:51pm

Can you provide me your sample / custom editor again?

Sudharsan · February 8, 2023, 6:14pm

I will message you the drive link to the app.

Sudharsan · February 8, 2023, 6:34pm

@Sebastian - I’ve messaged you the link to the sample app. The schema and use case I’m trying are same as that we discussed earlier and is part of this ticket.