Сustom javascript action

Hello!

I create custom mass action, but JavaScipt not work.

I create:
1) Mass action

<?php namespace Acme\DataGridBundle\MassAction; use Oro\Bundle\DataGridBundle\Extension\MassAction\Actions\Ajax\AjaxMassAction; class Test123MassAction extends AjaxMassAction { }

1 2 3 4 5 6 7

<?php namespace Acme\DataGridBundle\MassAction; use Oro\Bundle\DataGridBundle\Extension\MassAction\Actions\Ajax\AjaxMassAction; class Test123MassAction extends AjaxMassAction { }

2) Register mass action

acme_data_grid.mass_action.test123: class: Acme\DataGridBundle\MassAction\Test123MassAction scope: prototype tags: - { name: oro_datagrid.extension.mass_action.type, type: test123 }

1 2 3 4 5 6 7

acme_data_grid.mass_action.test123:     class: Acme\DataGridBundle\MassAction\Test123MassAction     scope: prototype     tags:         - { name: oro_datagrid.extension.mass_action.type, type: test123 }

3) Use it in datagrid.
4) Create file Resources/config/requirejs.yml

config: paths: 'oro/datagrid/action/test123-action': 'bundles/acmedatagrid/js/datagrid/action/test123-action.js'

1 2 3 4

config:     paths:         'oro/datagrid/action/test123-action': 'bundles/acmedatagrid/js/datagrid/action/test123-action.js'

5) Create file Resources/config/oro/assetic.yml

bundles: - AcmeDataGridBundle

1 2 3

bundles:     - AcmeDataGridBundle

6) Create file Resources/public/js/datagrid/action/test123-action.js

/*global define*/ define([ './model-action' ], function (ModelAction) { 'use strict'; var Test123Action; /** * TEST123 * * @export oro/datagrid/action/test123-action * @class oro.datagrid.action.Test123Action * @extends oro.datagrid.action.ModelAction */ Test123Action = ModelAction.extend({ defaultMessages: { confirm_title: 'Execution TEST123', confirm_content: 'Are you sure you want to do TEST123?', confirm_ok: 'Yes, do it', confirm_cancel: 'Cancel', success: 'Action performed.', error: 'Action is not performed.', empty_selection: 'Please, select item to perform action.' } }); return Test123Action; });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

/*global define*/ define([     './model-action' ], function (ModelAction) {     'use strict';       var Test123Action;       /**      * TEST123      *      * @export  oro/datagrid/action/test123-action      * @class   oro.datagrid.action.Test123Action      * @extends oro.datagrid.action.ModelAction      */     Test123Action = ModelAction.extend({      defaultMessages: {      confirm_title: 'Execution TEST123',      confirm_content: 'Are you sure you want to do TEST123?',      confirm_ok: 'Yes, do it',      confirm_cancel: 'Cancel',      success: 'Action performed.',      error: 'Action is not performed.',      empty_selection: 'Please, select item to perform action.'         }     });       return Test123Action; });

7) Clear cache.
8) Performs commands:
php app/console assets:install
php app/console assetic:dump
php app/console oro:requirejs:build

Action work good as Ajax Action, but extend of JavaScript action not work. Why?

Topic

[Alexandr SmagaParticipant]

Hello @stalxed!

Not sure that I got your issue well. Code looks OK for me, did you add your test123 thru grid config to some grid ? Could you please give mroe details what doesnot work ?

I see that “delete mass action” inherited from MassAction class(see)

[stalxedParticipant]

Thank for answer!

I found a bug, need set frontend_type:

<?php namespace Acme\DataGridBundle\MassAction; use Oro\Bundle\DataGridBundle\Extension\MassAction\Actions\Ajax\AjaxMassAction; class Test123MassAction extends AjaxMassAction { public function setOptions(ActionConfiguration $options) { if (empty($options['frontend_type'])) { $options['frontend_type'] = 'test123'; } return parent::setOptions($options); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?php namespace Acme\DataGridBundle\MassAction; use Oro\Bundle\DataGridBundle\Extension\MassAction\Actions\Ajax\AjaxMassAction; class Test123MassAction extends AjaxMassAction {     public function setOptions(ActionConfiguration $options)     {         if (empty($options['frontend_type'])) {             $options['frontend_type'] = 'test123';         }           return parent::setOptions($options);     } }

Now work fine!

[Alexandr SmagaParticipant]

Hello !

Thank you for your reply, hope this topic will be useful to someone from community. It will be nice to have this in bundle doc!

[stalxedParticipant]

I wrote several types of mass action for data grid.
I want to say thank you so much!!!

Very powerful system in the extension! A number of complex actions made ​​simple and elegant!

[golriz.nouraniParticipant]

I am try to write a mass action of widget type as below

mass action

PHP

<?php namespace AceTest\Bundle\DataGridBundle\Extension\MassAction\Actions; use Oro\Bundle\DataGridBundle\Extension\Action\ActionConfiguration; use Oro\Bundle\DataGridBundle\Extension\MassAction\Actions\Ajax\AjaxMassAction; use Oro\Bundle\DataGridBundle\Extension\MassAction\Actions\Widget\WidgetMassAction; class ChangeMassAction extends WidgetMassAction { /** @var array */ protected $requiredOptions=['handler', 'entity_name', 'data_identifier']; /** * {@inheritDoc} */ public function setOptions(ActionConfiguration $options) { if (empty($options['handler'])) { $options['handler'] = 'acetest_datagrid.extension.mass_action.handler.change'; } if (empty($options['frontend_type'])) { $options['frontend_type'] = 'change'; } return parent::setOptions($options); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<?php   namespace AceTest\Bundle\DataGridBundle\Extension\MassAction\Actions;   use Oro\Bundle\DataGridBundle\Extension\Action\ActionConfiguration; use Oro\Bundle\DataGridBundle\Extension\MassAction\Actions\Ajax\AjaxMassAction; use Oro\Bundle\DataGridBundle\Extension\MassAction\Actions\Widget\WidgetMassAction;   class ChangeMassAction extends WidgetMassAction {     /** @var array */     protected $requiredOptions=['handler', 'entity_name', 'data_identifier'];       /**      * {@inheritDoc}      */     public function setOptions(ActionConfiguration $options)     {         if (empty($options['handler'])) {             $options['handler'] = 'acetest_datagrid.extension.mass_action.handler.change';         }           if (empty($options['frontend_type'])) {             $options['frontend_type'] = 'change';         }           return parent::setOptions($options);     } }

— mass-action.yml

YAML

parameters: acetest_datagrid.extension.mass_action.handler.change.class: AceTest\Bundle\DataGridBundle\Extension\MassAction\ChangeMassActionHandler acetest_datagrid.extension.mass_action.type.change.class: AceTest\Bundle\DataGridBundle\Extension\MassAction\Actions\ChangeMassAction services: acetest_datagrid.extension.mass_action.handler.change: class: %acetest_datagrid.extension.mass_action.handler.change.class% arguments: - @doctrine.orm.entity_manager - @translator - @oro_security.security_facade acetest_datagrid.extension.mass_action.type.change: class: %acetest_datagrid.extension.mass_action.type.change.class% scope: prototype tags: - { name: oro_datagrid.extension.mass_action.type, type: change }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

parameters:     acetest_datagrid.extension.mass_action.handler.change.class:  AceTest\Bundle\DataGridBundle\Extension\MassAction\ChangeMassActionHandler     acetest_datagrid.extension.mass_action.type.change.class:     AceTest\Bundle\DataGridBundle\Extension\MassAction\Actions\ChangeMassAction services:     acetest_datagrid.extension.mass_action.handler.change:         class: %acetest_datagrid.extension.mass_action.handler.change.class%         arguments:             - @doctrine.orm.entity_manager             - @translator             - @oro_security.security_facade     acetest_datagrid.extension.mass_action.type.change:         class: %acetest_datagrid.extension.mass_action.type.change.class%         scope: prototype         tags:             - { name:  oro_datagrid.extension.mass_action.type, type: change }

Resources/config/requirejs.yml

YAML

config: paths: 'oro/datagrid/action/change-action': 'bundles/acetestdatagrid/js/datagrid/action/change-action.js'

1 2 3

config:     paths:         'oro/datagrid/action/change-action': 'bundles/acetestdatagrid/js/datagrid/action/change-action.js'

Resources/config/oro/assetic.yml

YAML

bundles: - AceTestDataGridBundle

1 2	bundles:     - AceTestDataGridBundle

— Resources/public/js/datagrid/action/change-action.js

JavaScript

define([ 'underscore', 'oroui/js/messenger', 'orotranslation/js/translator', 'oroui/js/delete-confirmation', 'oro/datagrid/action/dialog-action' ], function(_, messenger, __, DeleteConfirmation, DialogAction) { 'use strict'; var ChangeAction; /** * Delete action with confirm dialog, triggers REST DELETE request * * @export acetest/datagrid/action/change-action * @class oro.datagrid.action.ChangeAction * @extends oro.datagrid.action.DialogAction */ ChangeAction = DialogAction.extend({ useDirectLauncherLink: false, widgetOptions: null, widgetComponent: null, widgetDefaultOptions: { type: 'dialog', multiple: false, 'reload-grid-name': '', options: { dialogOptions: { title: __('Update item'), allowMaximize: false, allowMinimize: false, modal: true, resizable: false, maximizedHeightDecreaseBy: 'minimize-bar', width: 550 } } }, defaultMessages: { saved: __('Item updated successfully') }, /** * Initialize view * * @param {Object} options * @throws {TypeError} If model is undefined */ initialize: function(options) { DialogAction.__super__.initialize.apply(this, arguments); // make own widgetOptions property from prototype this.widgetOptions = $.extend(true, {}, this.widgetDefaultOptions, this.widgetOptions, { options: { url: this.getLink() } }); }, /** * @inheritDoc */ dispose: function() { if (!this.disposed) { return; } if (this.widgetComponent) { this.widgetComponent.dispose(); } delete this.widgetComponent; DialogAction.__super__.dispose.call(this); }, /** * @inheritDoc */ run: function() { if (!this.widgetComponent) { this.widgetComponent = new WidgetComponent(this.widgetOptions); } this.widgetComponent.openWidget(); } }); return ChangeAction; });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88

define([     'underscore',     'oroui/js/messenger',     'orotranslation/js/translator',     'oroui/js/delete-confirmation',     'oro/datagrid/action/dialog-action' ], function(_, messenger, __, DeleteConfirmation, DialogAction) {     'use strict';       var ChangeAction;       /**      * Delete action with confirm dialog, triggers REST DELETE request      *      * @export  acetest/datagrid/action/change-action      * @class   oro.datagrid.action.ChangeAction      * @extends oro.datagrid.action.DialogAction      */     ChangeAction = DialogAction.extend({           useDirectLauncherLink: false,         widgetOptions: null,         widgetComponent: null,         widgetDefaultOptions: {             type: 'dialog',             multiple: false,             'reload-grid-name': '',             options: {                 dialogOptions: {                     title: __('Update item'),                     allowMaximize: false,                     allowMinimize: false,                     modal: true,                     resizable: false,                     maximizedHeightDecreaseBy: 'minimize-bar',                     width: 550                 }             }         },         defaultMessages: {             saved: __('Item updated successfully')         },           /**          * Initialize view          *          * @param {Object} options          * @throws {TypeError} If model is undefined          */         initialize: function(options) {             DialogAction.__super__.initialize.apply(this, arguments);               // make own widgetOptions property from prototype             this.widgetOptions = $.extend(true, {}, this.widgetDefaultOptions, this.widgetOptions, {                 options: {                     url: this.getLink()                 }             });         },           /**          * @inheritDoc          */         dispose: function() {             if (!this.disposed) {                 return;             }             if (this.widgetComponent) {                 this.widgetComponent.dispose();             }             delete this.widgetComponent;             DialogAction.__super__.dispose.call(this);         },           /**          * @inheritDoc          */         run: function() {             if (!this.widgetComponent) {                 this.widgetComponent = new WidgetComponent(this.widgetOptions);             }             this.widgetComponent.openWidget();         }     });         return ChangeAction; });

add below mass-action to datagrid.yml of OroCrmContactBundle

YAML

mass_actions: delete: type: delete entity_name: %orocrm_contact.entity.class% data_identifier: c.id acl_resource: orocrm_contact_delete label: oro.grid.action.delete icon: trash change: type: change entity_name: %orocrm_contact.entity.class% data_identifier: c.id acl_resource: orocrm_contact_update label: oro.grid.action.update icon: trash route: orocrm_contact_update link: update_link

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

mass_actions:             delete:                 type: delete                 entity_name: %orocrm_contact.entity.class%                 data_identifier: c.id                 acl_resource: orocrm_contact_delete                 label: oro.grid.action.delete                 icon: trash             change:                 type: change                 entity_name: %orocrm_contact.entity.class%                 data_identifier: c.id                 acl_resource: orocrm_contact_update                 label: oro.grid.action.update                 icon: trash                 route: orocrm_contact_update                 link:          update_link

but when I want to load contact grid I have below JavaScript error on browser
Uncaught TypeError: “model” is required

could you help me?
thanks a lot

[Yevhen ShyshkinParticipant]

Hello.

Each action is associated with the appropriate grid row model (that contains row data). Please, check where it is not passed and pass it there (see other grid actions for example).

[zhex900Participant]

Hi,

I have the same issue. Uncaught TypeError: “model” is required. Do did you solve it? Which grid action should I look at?

Jake He

[dnahrebeckiModerator]

@zhex900, duplicate of https://oroinc.com/orocrm/forums/topic/custom-mass-action-uncaught-typeerror-model-is-required

[dnahrebeckiModerator]

marked as resolved

[Sufiyan MalekParticipant]

Hi,

Need to create mass action for “send to customer quote”. How should I do this ? Need to open multiple dialog of send to customer quote modal when select multiple from grid. and it has all different content in quote mail and different receivers like in quote section.

[Hryhorii HrebiniukParticipant]

Hi,

You need to develop your own SendCustomerQuoteMassAction, extended it from based mass-action. Take a look how base mass-action works and how it gathers selected items. Keep in mind that selection may contain items that are not presented on current grid’s page. See https://github.com/oroinc/platform/blob/0c2a47b/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/action/mass-action.js#L84-L90

Also it is good practice to limit the number of selection, see how it is done for merge action
https://github.com/oroinc/platform/blob/a7e1107/src/Oro/Bundle/EntityMergeBundle/Resources/public/js/datagrid/action/merge-mass-action.js#L42-L69

If all selected items are presented on the grid’s page, you can take those quotes from the grid’s collection and find there action_configuration.b2b_quote_backoffice_approvals_send_to_customer_transition.dialogUrl. That URL is used for loading dialog widget with email form.

But, since selected items may not be from current page, it is better to determine all ids of selection first. Then check ACL, if it is possible to submit all those quotes. And after that, generate URLs for dialog widgets on sever-side and send them within response of SendCustomerQuoteMassAction request.

[Sufiyan MalekParticipant]

Hello,
I am new to OROCRM. Thanks for the quick response Hryhorii.

I created mass action and got selected Id’s from getActionParameters. But I did not understood b2b_quote_backoffice_approvals_send_to_customer_transition process.
How to get all selected quote modal popups from grid quote Id’s and load dialog widget with email form ?

Any help appreciate.

Thanks

[Andrey YatsenkoModerator]

You can build the link by using the routing component.
route name is oro_workflow_widget_transition_form it applies workflowItemId and transitionName as arguments.

workflowItem can be found with Oro\Bundle\WorkflowBundle\Model\WorkflowManager::getWorkflowItem($entity, $workflowName);

[Sufiyan MalekParticipant]

Hello,
I just not only want route. But I need to build MassAction for SendCustomerQuoteMassAction functionality which open multiple dialogue popups of emailQuote after selection of multiple rows from grid and send it one by one from opened window.

thanks a lot

[Andrey YatsenkoModerator]

The route is for opening a popup.

[Author]

Replies