How is a row's «Actions» dropdown implemented on the backend CMS pages grid?

dmitry_fedyuk · March 12, 2016, 12:12pm

The «Actions» cell’s template:

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/templates/grid/cells/actions.html#L15-L22


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

The «Actions» UI Component’s script is linked to the template above:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/grid/columns/actions.js#L15-L17


return Column.extend({
    defaults: {
        bodyTmpl: 'ui/grid/cells/actions',

The «Actions» UI Component’s definition:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml#L94-L100


<actions class="Magento\Ui\Component\Control\Action">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/actions</item>
        </item>
    </argument>
</actions>

Adding the «Actions» column to the backend CMS pages grid:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml#L138-L146


<actionsColumn class="Magento\Ui\Component\Listing\Columns\Column">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/actions</item>
            <item name="dataType" xsi:type="string">actions</item>
            <item name="label" xsi:type="string" translate="true">Action</item>
        </item>
    </argument>
</actionsColumn>

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml#L325-L333


<actionsColumn name="actions" class="Magento\Cms\Ui\Component\Listing\Column\PageActions">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="resizeEnabled" xsi:type="boolean">false</item>
            <item name="resizeDefaultWidth" xsi:type="string">107</item>
            <item name="indexField" xsi:type="string">page_id</item>
        </item>
    </argument>
</actionsColumn>

Adding the actions:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Cms/Ui/Component/Listing/Column/PageActions.php#L68-L82


$name = $this->getData('name');
if (isset($item['page_id'])) {
    $item[$name]['edit'] = [
        'href' => $this->urlBuilder->getUrl($this->editUrl, ['page_id' => $item['page_id']]),
        'label' => __('Edit')
    ];
    $item[$name]['delete'] = [
        'href' => $this->urlBuilder->getUrl(self::CMS_URL_PATH_DELETE, ['page_id' => $item['page_id']]),
        'label' => __('Delete'),
        'confirm' => [
            'title' => __('Delete ${ $.$data.title }'),
            'message' => __('Are you sure you wan\'t to delete a ${ $.$data.title } record?')
        ]
    ];
}

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Cms/Ui/Component/Listing/Column/PageActions.php#L83-L92


if (isset($item['identifier'])) {
    $item[$name]['preview'] = [
        'href' => $this->actionUrlBuilder->getUrl(
            $item['identifier'],
            isset($item['_first_store_id']) ? $item['_first_store_id'] : null,
            isset($item['store_code']) ? $item['store_code'] : null
        ),
        'label' => __('View')
    ];
}

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/grid/columns/actions.js#L161-L174


/**
 * Creates handler for the provided action if it's required.
 *
 * @param {Object} action - Action object.
 * @returns {Function|Undefined}
 */
getActionHandler: function (action) {
    var index = action.index,
        rowIndex = action.rowIndex;


    if (this.isHandlerRequired(index, rowIndex)) {
        return this.applyAction.bind(this, index, rowIndex);
    }
},

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/grid/columns/actions.js#L143-L159


/**
 * Applies specified action.
 *
 * @param {String} actionIndex - Actions' identifier.
 * @param {Number} rowIndex - Index of a row.
 * @returns {ActionsColumn} Chainable.
 */
applyAction: function (actionIndex, rowIndex) {
    var action = this.getAction(rowIndex, actionIndex),
        callback = this._getCallback(action);


    action.confirm ?
        this._confirm(action, callback) :
        callback();


    return this;
},

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/grid/columns/actions.js#L49-L63


/**
 * Returns specific action of a specified row
 * or all action objects associated with it.
 *
 * @param {Number} rowIndex - Index of a row.
 * @param {String} [actionIndex] - Action identifier.
 * @returns {Array|Object}
 */
getAction: function (rowIndex, actionIndex) {
    var rowActions = this.actions[rowIndex];


    return rowActions && actionIndex ?
        rowActions[actionIndex] :
        rowActions;
},

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/grid/columns/actions.js#L189-L197


/**
 * Creates action callback based on its' data. If action doesn't spicify
 * a callback function than the default one will be used.
 *
 * @private
 * @param {Object} action - Actions' object.
 * @returns {Function} Callback function.
 */
_getCallback: function (action) {

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/grid/columns/actions.js#L198-L213


var args = [action.index, action.recordId, action],
    callback = action.callback;


if (utils.isObject(callback)) {
    args.unshift(callback.target);


    callback = registry.async(callback.provider);
} else if (_.isArray(callback)) {
    return this._getCallbacks(action);
} else if (!_.isFunction(callback)) {
    callback = this.defaultCallback.bind(this);
}


return function () {
    callback.apply(callback, args);
};

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/grid/columns/actions.js#L243-L254


/**
 * Default action callback. Redirects to
 * the specified in actions' data url.
 *
 * @param {String} actionIndex - Actions' identifier.
 * @param {(Number|String)} recordId - Id of the record accociated
 *      with a specfied action.
 * @param {Object} action - Actions' data.
 */
defaultCallback: function (actionIndex, recordId, action) {
    window.location.href = action.href;
},

dmitry_fedyuk · March 12, 2016, 12:14pm