Magento – Magento 2: target=”_blank” in UI Listing Action Links

javascriptmagento2PHPuicomponent

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

Where are the action links rendered
Where the javascript source for the $col.getActionHandler... code below

Best Answer

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

Related Solutions

Magento 2 – How to Extend massactions.js

Looks like answered on github. copy/past here

You can try 'mixins' feature, all you need is to create requireJS module with extended method like this:

default_mixin.js:

define(function () {
    'use strict';

    var mixin = {

        methodToExtend: function () {
            //...
        }
    };

    return function (target) { // target == Result that Magento_Ui/.../default returns.
        return target.extend(mixin); // new result that all other modules receive 
    };
});

requirejs-config.js:

config: {
    mixins: {
        'My_Module/js/payment/default': {  // Target module
            'My_Module/js/payment/default_mixin': true  // Extender module
        }
    }
}

Magento – Magento 2: UI Listing Component for a CRUD Model

I think you need the listing component with at least the basic arguments

js_config -> define which datasource to use

buttons

spinner (on which component)

<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">form_name.data_source_name</item>
        <item name="deps" xsi:type="string">form_name.data_source_name</item>
    </item>
    <item name="spinner" xsi:type="string">columns_component_name</item>
    <item name="buttons" xsi:type="array">
        <item name="add" xsi:type="array">
            <item name="name" xsi:type="string">add</item>
            <item name="label" xsi:type="string" translate="true">Add New Item</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/new</item>
        </item>
    </item>
</argument>

The you need to define the data source in your listing and create the needed types.

<dataSource name="data_source_name">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">EntityItemGridDataProvider</argument>
        <argument name="name" xsi:type="string">data_source_name</argument>
        <argument name="primaryFieldName" xsi:type="string">id_field_of_model</argument>
        <argument name="requestFieldName" xsi:type="string">id_for_request</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
            </item>
        </argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
        </item>
    </argument>
</dataSource>

di.xml:

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="data_source_name" xsi:type="string">EntityItemGridCollection</item>
        </argument>
    </arguments>
</type>
<virtualType name="EntityItemGridCollection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
    <arguments>
        <argument name="mainTable" xsi:type="string">table_name</argument>
        <argument name="resourceModel" xsi:type="string">Vendor\Module\Model\ResourceModel\Entity</argument>
    </arguments>
</virtualType>
<virtualType name="EntityItemGridDataProvider"
             type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
    <arguments>
        <argument name="collection" xsi:type="object" shared="false">Vendor\Module\Model\ResourceModel\Entity\Collection</argument>
    </arguments>
</virtualType>

And last but not least you have to define the columns.

Still I did not figure out all of it but that seems pretty minimum.

It also seems like the ui_components have already been changed again in the develop branch. First when I tried an example of the develop branch it did not work with 2.0.2. So I think - more to come

===== UPDATE =====

just learned that the DataProvider does nothing with the collection provided in the VirtualType. So you only need the VirtualType for the DataProvider if you want to change its behaviour.

Otherwise you can insert the Frameworks DataProvider directly in the ui-components datasource component and remove the virtual type:

<dataSource name="data_source_name">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
        <argument name="name" xsi:type="string">data_source_name</argument>
        <argument name="primaryFieldName" xsi:type="string">id_field_of_model</argument>
        <argument name="requestFieldName" xsi:type="string">id_for_request</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
            </item>
        </argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
        </item>
    </argument>
</dataSource>

di.xml:

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="data_source_name" xsi:type="string">EntityItemGridCollection</item>
        </argument>
    </arguments>
</type>
<virtualType name="EntityItemGridCollection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
    <arguments>
        <argument name="mainTable" xsi:type="string">table_name</argument>
        <argument name="resourceModel" xsi:type="string">Vendor\Module\Model\ResourceModel\Entity</argument>
    </arguments>
</virtualType>

Best Answer

Related Solutions

Magento 2 – How to Extend massactions.js

Magento – Magento 2: UI Listing Component for a CRUD Model

Related Topic