I am working on creating a custom component where accordions can be dragged and dropped to change their order using jQuery Sortable and Squiz JS API to update the metadata values.
For example, we have five metadata fields for five accordions. If the user wants the third accordion to be number one. They can drag and drop the third accordion above the first accordion using JQuery sort instead of updating the metadata values manually. Once the positions are updated, Squiz JS API is used to switch the metadata values of 3 with 1 and 1 with 3 accordion values using the Set metadata method.
It’s working well. However, once the metadata values are updated via JS API, asset locks are released in the background, and the user is unaware that the asset is locked. i.e., asset lock is released in the background but the save button is still visible in the front-end. Once I refresh the page, the save button disappears and the edit button is available to acquire the lock.
I wonder whether a way is there to trigger the JS API on the asset save event. At the moment Set Metadata event is triggered when the accordion is dragged and dropped.
Any help would be appreciated.
Thanks, in advance.
Matrix Version: 6.29.0
I created a custom component which has five accordions with heading and body content. User can fill contents in and also drag and drop accordions in any order they want. jQuery Sortable is used for this feature. once the order is changed, jQuery sortable change method is used to update the metadata values using JS API feature in Squiz.