Overriding the Preview Button in the List view of a module

Did you know you can enable Edit mode in Preview in admin? It will open in preview view. There will be a pencil at the top to press to edit the record. Under Admin -> System Settings

Thanks Jeff.  I am aware of the edit mode in the preview pane.  That is the predominant way in which records are currently opened and edited.  I just wanted to streamline editing so that clicking on the preview button in the list view opened both the preview pane and the selected row into edit mode.  It's only extra 3 clicks to do these steps manually but it seems like a very simple matter to override a button to do all in one click.  I've arranged the fields in the list view and in the preview pane such that minimal scrolling, if any, is required.  The volume of records that our staff go through each day is quite large so even such a minor task can have a significant impact on our business.

I fully agree with what you are trying to achieve Homin Lee
It would definately improve the UX

Can I assume this customisation will also take into account any user permissions?
I hope you are able to implement it and share on here

I have not played with customizing the preview pane, but when I want to override some behavior I tend to try and reverse engineer how it is implemented. In this case the first thing I would do is look for the action behind the pencil icon

If you look at the preview-header

 clients/base/views/preview-header/preview-header.js

you will see that depending on the layout, they add an event 'click [data-action=edit] which, when clicked, triggers a function triggerEdit which in turn toggles the SaveAndCancel and triggers the preview:edit. 

There seems to be a lot more behind the layout selection, so just triggering the preview:edit is probably not enough, you will most likely want to also set the layout correctly when you click the preview button on the recordlist.

It will take some more digging to figure out the details, but this might be a starting point for you.

Good luck, I'll be interested in seeing what you, and others, come up with.

FrancescaS

Hi,

As per Franscesca's answer, I have not actually played with what you are trying but I might be able to offer some pointers.

It seems that instead of opening the Preview in edit mode directly you are trying to open the preview and also put the row in the dashlet into edit mode as if the row's Edit button has also been clicked. So that is what my pointers are based on.

I think you are probably on the right track with the file you are overriding as the functions do reside in the recordlist.js file as far as I know. If you look in the core version of that file at ./clients/base/views/recordlist/recordlist.js you will find the events that set up the actions in the recordlist.

I believe that the trigger for the edit function in the row is: list:editrow:fire which calls the function: editClicked so you could try simply calling that function where you have the placeholder in your snippet above. Or you can copy that function into a custom one and attach that to the click event of the preview button. The custom function could fire the preview and then continue with the editrow fire actions.

As the function has two parameters it may not be straightforward to do that though so another option might be to trigger the actual button click. The function registerShortcuts in that js file also sets up the shortcut keys to fire events on the record. Within there you can see the way these button clicks are simulated and you could try doing that on the list:editrow:fire action. Try looking at the equivalent preview fire which does this: clickButton(this.$('.selected [data-event="list:preview:fire"]:visible')); So you might try adjusting that (and using the proper method) by calling something like:

this.$('.selected [data-event="list:editrow:fire"]:visible').click();

Somewhere in there or nearby is likely to be the answer to what you want to do 

Good luck.

Thanks,

JH.

I think Homin Lee wants the Preview pane to open in Edit View when the "eye" button is clicked, not the row in the list-view.

Francesca Shiekh

You may well be right, I wasn't certain that I was actually answering the issue raised :)

However, we were provided a snippet from the recordlist.js file where the Preview action is being overridden and suggested that the requirement was "clicking on it opens up the preview pane as well as putting the selected row into edit mode ... as if I had clicked on the 'Edit' from the dropdown list next to the preview button". This is the eye button on a row in a list (either ListView or Dashlet I think) and the editrow action also resides there. Clicking that Edit button opens the row in edit mode. That was my reasoning for the answer I gave.

For completeness, I would suggest that the answer to opening the preview panel directly in edit mode is to override the functions in the file: ./clients/base/views/preview/preview.js - specifically I would start with the function: handleEdit() which simply toggles all the editable fields. This could probably be called as part of initialize() or render() to open the panel in edit mode directly. If you want to be cleverer then you can pass an option in with the button click and have it open in Edit mode only if the option is set. That way you might be able to have the panel open normally in some circumstances if required.

I am happy to be wrong but also hopefully my answer might help someone looking to extend actions in the row context somewhere.

Thanks,

JH.