Custom UI - Best Practices

Development
#1

Hello - In one of our schemas we have defined a field as array with 10 nested fields. As users are finding it difficult to work with this array field especially when there are more than 50 items in the array , we are working on creating a custom UI. We are planning to add below functionality in the custom UI.

  • Render the array items in a table or panel
  • Move Item Up / Down
  • Delete Item
  • Merge an Item above or below
  • Add new Item

According to documentation, we have to call valueChanged() by passing the modified array to notify Squidex of the change.

As the custom UI consists of multiple operation

  1. When should we exactly call the valueChanged() method ?
  2. Is it advisable to call after each and every operation ?
  3. Should we have a separate Save button and call valueChanged() on click of the button ? This may result in user clicking on Save again on Squidex UI.
  4. Since we have registered to onValueChanged() to render the initial UI, calling valueChanged() inturn triggers the onValueChanged() event.

Can you please clarify on the above ?

Thank you,
Sudharsan N.

[SOLVE] Custom Editor For Array Field Fires onValueChanged Events Wrongly
#2
  1. It is best to call it with every change, but you could delay the call a little bit.
  2. See 1.
  3. No
  4. No, it should actually filter that out, but if you can check that, it would be good.
#3

Hello,

Thank you for the response.

Can you explain little more on the 4th point ? I’m not sure what you meant by “it should actually filter that out, but if you can check that” . How can this be achieved ?

On a different note, can we have render a custom UI when the user clicks on a row within a content ?

#4

The iframe editor is implemented by this component. It old sends an value-update-event to the frame (which then triggers the event handler) when the value has actually been changed:

So valueChanged should not trigger onValueChanged:

#5

Thank you. Can you clarify on the below ?

Can we render a custom UI when the user clicks on a row within a content ? Basically we should be able to register to the onclick event of row.

#6

No, sorry…what do you want to achieve?

#7

We have a schema with 10 string fields and an array field with 10 nested fields. So, we would like to render a custom UI on click of content row rather than targeting a particular field. Hence the question on whether we can have custom UI rendered on a content row click.

#8

So you want to show a modal or something like that? How do you then want the UI to go to the content detail page when you want to show a modal?

The reason I am asking: Because custom UI is implemented with iframes (the only technical option), modals are not easy. The content of an iframe cannot overlap the iframe, so the modal needs to be started from the parent window.

#9

Not a modal. We would like to render a new page by using the full screen option.

#10

So you want to bypass the normal editor?

#11

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

#12

It is not possible…

#13

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.

#14

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

#15

Sure. Will provide one.

#16

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.

image
image1852Ă—537 22.8 KB

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.

#17

What kind of schema do I need?

#18

The default one. Multiple contents.

#19

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

#20

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.