Thread Details
  • State Not Answered
  • Replies 7 replies
  • Subscribers 354 subscribers
  • Views 1848 views
  • Users 0 members are here
Forum Actions
Related

Overriding the Preview Button in the List view of a module

Homin Lee

In the list view of the Leads module, I want to override the action of the preview button next to each record so that clicking on it opens up the preview pane as well as putting the selected row into edit mode.

Platform: Sugar ondemand version 11.1

I am able to override the preview button as below but how do I trigger the 'Edit' action, as if I had clicked on the 'Edit' from the dropdown list next to the preview button?

// custom/modules/Leads/clients/base/views/recordlist.js
*/
({
  extendsFrom: 'RecordlistView',

  initialize: function(options) {
  this._super("initialize", [options]);

  this.context.on('list:preview:fire', this.preview_clicked, this);

},

preview_clicked: function(model) {

  console.log('Preview button clicked');

  //??? trigger/call the editrow action ???

},

Parents
  • 0

    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 Slight smile

    Good luck.

    Thanks,

    JH.

  • 0 in reply to John Hawkins

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

  • 0 in reply to 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.

Reply
  • 0 in reply to 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.

Children
No Data