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
When should we exactly call the valueChanged() method ?
Is it advisable to call after each and every operation ?
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.
Since we have registered to onValueChanged() to render the initial UI, calling valueChanged() inturn triggers the onValueChanged() event.
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 ?
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:
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.
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.
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));
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.
