2

In Magento 2, you can create "Action" links for your UI grid. Magento itself does this on the CMS Listing Grid here

#File: vendor/magento/module-cms/Ui/Component/Listing/Column/PageActions.php //... $item[$name]['edit'] = [ 'href' => $this->urlBuilder->getUrl($this->editUrl, ['page_id' => $item['page_id']]), 'label' => __('Edit') ]; //...

Is there a way to have these action links open in a new window? (the same way an <a href="..." target="_blank">Link Test</a> would work. I've tried added both a target and window to the array that creates the link, but that doesn't appear to work.

If I look at the source of a rendered link

<a class="action-menu-item" data-bind=" attr: { href: $action().href }, click: $col.getActionHandler($action()), text: $action().label" data-repeat-index="0" href="http://google.com">View Log</a>

I see a bunch of modern abstract javascript who's ultimate source is difficult to track down.

The specific question I'd like answered is "how to make action links open in a new window using the provided UI abstractions" (I know I could add my own javascript to the page that handles it, but that seems like a hack solution for something that's so simple in plain old HTML)

A larger question that I'll accepts an answer for is

  1. Where are the action links rendered
  2. Where the javascript source for the $col.getActionHandler... code below
Improve this question
1
  • Hello Alan .. Can you please explain how can I add target="_blank" in UI component column showing in the grid. Thanks Commented Mar 3, 2016 at 12:37

4 Answers 4

Reset to default
4

In Magento 2.1.* target _blank is not working

Following file is responsible to render action in admin UI component Grid 

vendor/magento/module-ui/view/base/web/templates/grid/cells/actions.html

Change:

attr="href: $action().href" to attr="target: $col.getTarget($action()), href: $action().href"

For action dropdown change:

 attr="href: $action().href, 'data-action': 'item-' + $action().index" to attr="target: $col.getTarget($action()), href: $action().href, 'data-action': 'item-' + $action().index"

Or replace below code in vendor/magento/module-ui/view/base/web/templates/grid/cells/actions.html:

<a class="action-menu-item" if="$col.isSingle($row()._rowIndex)" repeat="foreach: $col.getVisibleActions($row()._rowIndex), item: '$action'" click="$col.getActionHandler($action())" text="$action().label" attr="href: $action().href"/> <div class="action-select-wrap" if="$col.isMultiple($row()._rowIndex)" collapsible> <button class="action-select" translate="'Select'" toggleCollapsible/> <ul class="action-menu" css="_active: $collapsible.opened"> <li repeat="foreach: $col.getVisibleActions($row()._rowIndex), item: '$action'"> <a class="action-menu-item" click="$col.getActionHandler($action())" text="$action().label" attr="href: $action().href, 'data-action': 'item-' + $action().index"/> </li> </ul> </div>

Replace with below code

<a class="action-menu-item" if="$col.isSingle($row()._rowIndex)" repeat="foreach: $col.getVisibleActions($row()._rowIndex), item: '$action'" click="$col.getActionHandler($action())" text="$action().label" attr="target: $col.getTarget($action()), href: $action().href"/> <div class="action-select-wrap" if="$col.isMultiple($row()._rowIndex)" collapsible> <button class="action-select" translate="'Select'" toggleCollapsible/> <ul class="action-menu" css="_active: $collapsible.opened"> <li repeat="foreach: $col.getVisibleActions($row()._rowIndex), item: '$action'"> <a class="action-menu-item" click="$col.getActionHandler($action())" text="$action().label" attr="target: $col.getTarget($action()), href: $action().href, 'data-action': 'item-' + $action().index"/> </li> </ul> </div>

Add below function to vendor/magento/module-ui/view/base/web/js/grid/columns/actions.js which is already there in Magento 2.2

/** * Returns target of action if it's been set. * * @param {Object} action - Action object. * @returns {String} */ getTarget: function (action) { if (action.target) { return action.target; } return '_self'; },

Now Use : #File: Vendor/Module/Ui/Component/Listing/Column/PageActions.php

//... $item[$name]['edit'] = [ 'href' => $this->urlBuilder->getUrl($this->editUrl, ['page_id' => $item['page_id']]), 'target' => '_blank', 'label' => __('Edit') ];

Now, Target _blank will work for Magento 2.1.* versions

Improve this answer
3

alan UI in mag2 uses knockoutjs for rendering the actions inside the grid. we have vendor/magento/module-ui/view/base/web/js/grid/columns/actions.js file responsible for this column with datatype action and its uses as template(bodyTmpl: 'ui/grid/cells/actions',), inside UI module, you will find vendor/magento/module-ui/view/base/web/templates/grid/cells/actions.html the template responsible for rendering :

<!-- /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ --> <!-- ko if: $col.isSingle($row()._rowIndex) --> <a class="action-menu-item" data-bind=" repeat: { foreach: $col.getVisibleActions($row()._rowIndex), item: '$action' }" data-repeat-bind=" attr: { href: $action().href }, click: $col.getActionHandler($action()), text: $action().label" ></a> <!-- /ko --> <!-- ko if: $col.isMultiple($row()._rowIndex) --> <div class="action-select-wrap" data-bind="collapsible"> <button class="action-select" data-bind="toggleCollapsible"> <span data-bind="i18n: 'Select'"></span> </button> <ul class="action-menu" data-bind=" css: {'_active': $collapsible.opened}"> <li data-bind=" repeat: { foreach: $col.getVisibleActions($row()._rowIndex), item: '$action' }"> <a class="action-menu-item" data-bind=" attr: { href: $action().href }, click: $col.getActionHandler($action()), text: $action().label"></a> </li> </ul> </div> <!-- /ko -->

yes, it fills the data of tag with js ... here 2 cases for more than action it gives you select, and for one action simple a tag. as result, I can't see how we can add extensible target blank just by using a custom module -_-

Improve this answer
1

I ended up with adding 'target' => '_blank' below:

 #File: Vendor/Module/Ui/Component/Listing/Column/PageActions.php //... $item[$name]['edit'] = [ 'href' => $this->urlBuilder->getUrl($this->editUrl, ['page_id' => $item['page_id']]), 'target' => '_blank', 'label' => __('Edit') ]; //...
Improve this answer
1
  • Do you happen to know what sort of javascript that renders? Commented Nov 8, 2018 at 19:27
0

Add 'target' => '_blank' tag. Please refer below.

Vendor/Module/Ui/Component/Listing/Column/PageActions.php

$item[$name]['edit'] = [ 'href' => $this->urlBuilder->getUrl($this->editUrl, ['page_id' => $item['page_id']]), 'target' => '_blank', 'label' => __('Edit') ];
Improve this answer
2
  • This file doesn't exist in M2.3.0 Do you know where it would be in 2.3.x? Commented Jul 15, 2020 at 20:21
  • In fact, I don't see this file in ANY of the versions of M2...What version were you using? Commented Jul 15, 2020 at 20:27

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.