Custom UI - Best Practices

Sudharsan · January 4, 2023, 5:51pm

Yes. If not possible then we will have custom UI just for the array field.

Sebastian · January 5, 2023, 2:15pm

It is not possible…

Sudharsan · January 11, 2023, 7:22pm

Hello Sebastian,

After modifying the array items I call the valueChanged method by passing the modified array as argument (With my custom editor still open and in full screen mode). I see in the logs onValueChanged event firing again and again. Below is how I’ve registered to listen for events from Squidex in
ngOnInit(). Reference to editor-sdk.js is added in index.html.

this.squidexField = new SquidexFormField();
this.squidexField.onValueChanged(this.onValueChanged.bind(this));
this.squidexField.onFullscreen(this.onFullscreen.bind(this));
this.squidexField.onInit(this.onInit.bind(this));

Please let me know what I’m missing.

Sebastian · January 11, 2023, 8:19pm

Please provide a reproducible example and I can have a look.

Sudharsan · January 11, 2023, 9:54pm

Sure. Will provide one.

Sudharsan · January 12, 2023, 3:18am

I created a schema with an array field. The array consists of two fields, Name and Detail. The custom UI renders this array field within a panel and allows to move items up/down. The Detail field is loaded within a TinyMCE and we have added support to select a portion of text and click on split icon. On split icon click, we determine the position of the item in the initial array and add a new item next to it with user selected content.

During move items up/down, I do call valueChanged to notify Squidex of change in item position and it works fine without any additional events being fired.
When I use the split icon and add items to array, I notice events being fired. When the number of items in the array is more than 100, we can see the firing of events causing the entire UI to be slow and hanging.

I have created a bare minimum application to reproduce the issue. I’ll message you the drive link.

I’m missing something fundamental. Hope you can point it out.

Sebastian · January 12, 2023, 10:30am

What kind of schema do I need?

Sudharsan · January 12, 2023, 1:07pm

The default one. Multiple contents.

Sebastian · January 12, 2023, 1:38pm

If you have 100 rows, you have 100 mce editors. Not sure if this is the best idea.

Sudharsan · January 12, 2023, 1:58pm

You’re right. I share the same concern. Do you think that’s causing the issue ?
As of now even for 3 rows I see the valueChanged getting invoked.

Sebastian · January 12, 2023, 3:29pm

No, not the only issue. I also found an issue on my side. But even if I solve mine, it would be a problem.

Sudharsan · January 12, 2023, 3:42pm

What was the issue ?

Sebastian · January 12, 2023, 3:46pm

I have a special type of FormArrays:

github.com

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 ?