Magento 2 – How to Open Modal Popup with Dynamic Values

dynamicmagento2modal-popup

When I click on item "edit link" modal popup is open but when i edit other product it will show previous product data.

Can anyone help to get dynamic popup with dynamic data in per different products?

Please refer screenshots below:

Best Answer

You need to customize edit.phtml file to achieve it. To customize the item renderer file, you can copy edit.phtml file from

vendor/magento/module-checkout/view/frontend/templates/cart/item/renderer/actions/edit.phtml

to your custom theme.

add dynamic id to edit link by using below code:

<?php $_item = $block->getItem(); ?>

<?php if ($block->isProductVisibleInSiteVisibility()): ?>
    <a id="your_id_<?php echo $_item->getItemId(); ?>" class="action action-edit"
       href="<?= /* @escapeNotVerified */ $block->getConfigureUrl() ?>"
       title="<?= $block->escapeHtml(__('Edit item parameters')) ?>">
        <span>
            <?= /* @escapeNotVerified */ __('Edit') ?>
        </span>
   </a>
<?php endif ?>

<script type="text/javascript">
require(['jquery'],
    function ($) {
        var quote_item_id = "<?php echo $_item->getItemId(); ?>";
        $(document).on('click', '#your_id_' + quote_item_id, function (e) {
            //code to open your modal popup
        }
    });
</script>

Now trigger popup modal on click of this id.

I hope it will help you out, let me know in case any doubt.

Related Solutions

Magento – Magento 2 – Dynamic rows based on related products modal grid on custom form with tabs

Looks like dynamicRows dataScope & dataProvider is wrong. I faced same problem. After changing dataScope & dataProvider grid is populated.

<dynamicRows name="orders">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="dataScope" xsi:type="string">data.orders_tab.links</item>
        <item name="dataProvider" xsi:type="string">data.orders_tab.my_module_sales_order_listing</item>
    </item>
</argument>
<container name="record"/>

Before:

<item name="dataScope" xsi:type="string">data.links</item>

After:

<item name="dataScope" xsi:type="string">data.orders_tab.links</item>

orders_tab is name of tab where are dynamicRows & insertListing placed.

Magento 2 – Add Grid/PHTML File to Slide Out Panel in Custom Grid Action

Finally, I've figured out by myself, I want popup preview on grid's actions Column, so you can start by adding below code

Test/PreviewPopup/view/adminhtml/layout/previewpopup_actionslog_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <uiComponent name="actions_log_listing"/>
        </referenceContainer>
        <referenceContainer name="js">
            <block class="Test\PreviewPopup\Block\Adminhtml\ActionsLog\Preview" template="Test_PreviewPopup::activity/js.phtml" name="activity.view.model.js"/>
        </referenceContainer>
    </body>
</page>

Test/PreviewPopup/Controller/Adminhtml/ActionsLog/Index.php

<?php

namespace Test\PreviewPopup\Controller\Adminhtml\ActionsLog;

use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
use Magento\Backend\App\Action;
use Magento\Backend\Model\UrlInterface;

class Index extends Action
{
    /**
     * @var string
     */
    const ADMIN_RESOURCE = 'Test_PreviewPopup::actions_log';

    /**
     * @var PageFactory
     */
    public $resultPageFactory;

    /**
     * @var \Magento\Backend\Model\UrlInterface
     */
    protected $backendUrl;

    /**
     * Index constructor.
     * @param Context $context
     * @param PageFactory $resultPageFactory
     */
    public function __construct(
        Context $context,
        PageFactory $resultPageFactory,
        UrlInterface $backendUrl
    ) {
        $this->resultPageFactory = $resultPageFactory;
        $this->backendUrl = $backendUrl;
        parent::__construct($context);
    }

    /**
     * Index action
     * @return \Magento\Backend\Model\View\Result\Page
     */
    public function execute()
    {
        /** @var \Magento\Backend\Model\View\Result\Page $resultPage */
        $resultPage = $this->resultPageFactory->create();
        $resultPage->setActiveMenu('Test_PreviewPopup::actions_log');
        $resultPage->addBreadcrumb(__('Test'), __('Actions Log'));
        $resultPage->getConfig()->getTitle()->prepend(__('Actions Log'));

        return $resultPage;
    }

    /**
     * access rights checking
     *
     * @return bool
     */
    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed('Test_PreviewPopup::actions_log');
    }
}

Test/PreviewPopup/view/adminhtml/ui_component/actions_log_listing.xml

<actionsColumn name="actions" class="Test\PreviewPopup\Ui\Component\Listing\Columns\LogActions">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
            <item name="viewUrlPath" xsi:type="string">previewpopup/actionslog/preview</item>
            <item name="resizeEnabled" xsi:type="boolean">false</item>
            <item name="resizeDefaultWidth" xsi:type="string">107</item>
            <item name="indexField" xsi:type="string">actions_id</item>
            <item name="urlEntityParamName" xsi:type="string">actions_id</item>
        </item>
    </argument>
</actionsColumn>

Test/PreviewPopup/Ui/Component/Listing/Columns/LogActions.php

<?php

namespace Test\PreviewPopup\Ui\Component\Listing\Columns;

use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\UrlInterface;

class LogActions extends \Magento\Ui\Component\Listing\Columns\Column
{
    protected $urlBuilder;

    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        UrlInterface $urlBuilder,
        \Magento\Framework\View\LayoutInterface $layout,
        array $components = [],
        array $data = []
    ) {
        $this->urlBuilder = $urlBuilder;
        $this->layout = $layout;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    /**
     * Get item url
     * @return string
     */
    public function getViewUrl()
    {
        return $this->urlBuilder->getUrl(
            $this->getData('config/viewUrlPath')
        );
    }

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as &$item) {
                if (isset($item['actions_id'])) {
                    $name = $this->getData('name');

                    $item[$name] = html_entity_decode('<a href="#" class="action-activity-log-view" 
                        onclick="adminActivityLogView.open(\''
                                . $this->getViewUrl() . '\', \'' .
                                $item['actions_id']. '\', \'' .
                                $item['restore'] . '\')'
                                .'")>'. __('Preview Changes').'</a>
                                <br/>
                                <a href="'.$this->urlBuilder->getUrl(
                                    'previewpopup/actionslog/edit',
                                    ['actions_id' => $item['actions_id']]
                                ).'">'. __('View Details').'</a>');
                    //View Details is not needed i've just added according to my requirement
                }
            }
        }

        return $dataSource;
    }
}

Test/PreviewPopup/view/adminhtml/templates/activity/js.phtml

<script>
    require([
        "jquery",
        "Magento_Ui/js/modal/modal",
        'mage/backend/notification',
        "prototype"
    ], function(jQuery, modal, notification) {

//<![CDATA[
        Window.keepMultiModalWindow = true;
        var adminActivityLogView = {
            overlayShowEffectOptions : null,
            overlayHideEffectOptions : null,
            modal: null,
            activityId: 0,
            open : function(editorUrl, elementId, revertable) {
                if (editorUrl && elementId) {
                    jQuery.ajax({
                        url: editorUrl,
                        data: {
                            id: elementId
                        },
                        showLoader: true,
                        dataType: 'html',
                        success: function(data, textStatus, transport) {
                            this.openDialogWindow(data, elementId, revertable);
                        }.bind(this)
                    });
                }
            },
            openDialogWindow : function(data, elementId, revertable) {
                var self = this;
                this.activityId = elementId;
                if (this.modal) {
                    this.modal.html(jQuery(data).html());
                } else {
                    this.modal = jQuery(data).modal({
                        title: '<?= /* @escapeNotVerified */ __('Actions Log'); ?>',
                        modalClass: 'magento',
                        type: 'slide',
                        firedElementId: elementId,
                        buttons: [{
                            text: jQuery.mage.__('Back'),
                            class: 'action- scalable back',
                            click: function () {
                                self.closeDialogWindow(this);
                            }
                        }],
                        close: function () {
                            self.closeDialogWindow(this);
                        }
                    });
                }
                jQuery(".action-revert-activity").hide();
                if(revertable == 1) {
                    jQuery(".action-revert-activity").show();
                }
                this.modal.modal('openModal');
                this.autoResize();
            },
            closeDialogWindow : function(dialogWindow) {

                jQuery('body').trigger('processStop');
                dialogWindow.closeModal();
                Windows.overlayShowEffectOptions = this.overlayShowEffectOptions;
                Windows.overlayHideEffectOptions = this.overlayHideEffectOptions;
            },
            error: function (message) {
                jQuery('body').notification('clear')
                    .notification('add', {
                        error: true,
                        message: jQuery.mage.__(message),
                        insertMethod: function (message) {
                            var $wrapper = jQuery('<div/>').html(message);
                            jQuery('.page-main-actions').after($wrapper);
                        }
                    });
            },
            autoResize: function () {
                jQuery.each(jQuery('textarea.value-container'), function() {
                    var offset = this.offsetHeight - this.clientHeight;
                    var resizeTextarea = function(el) {
                        console.log('You clicked me!!');
                        jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
                    };
                    jQuery(this).unbind().on('click', function() { resizeTextarea(this); }).trigger('click');
                });
            }
        };

        window.adminActivityLogView = adminActivityLogView;
//]]>

    });
</script>

Test/Previewpopup/Controller/Adminhtml/ActionsLog/Preview.php;

<?php

namespace Test\Previewpopup\Controller\Adminhtml\ActionsLog;

use Magento\Backend\App\Action\Context;
use Magento\Backend\App\Action;

class Preview extends Action
{
    /**
     * @var \Magento\Framework\Controller\Result\RawFactory
     */
    public $resultRawFactory;

    /**
     * @var \Magento\Framework\View\LayoutFactory
     */
    public $layoutFactory;

    /**
     * Log constructor.
     * @param Context $context
     * @param \Magento\Framework\Controller\Result\RawFactory $resultRawFactory
     * @param \Magento\Framework\View\LayoutFactory $layoutFactory
     */
    public function __construct(
        Context $context,
        \Magento\Framework\Controller\Result\RawFactory $resultRawFactory,
        \Magento\Framework\View\LayoutFactory $layoutFactory
    ) {
        $this->resultRawFactory = $resultRawFactory;
        $this->layoutFactory = $layoutFactory;

        parent::__construct($context);
    }

    /**
     * view action
     * @return $this
     */
    public function execute()
    {
        $content = $this->layoutFactory->create()
            ->createBlock(
                \Test\PreviewPopup\Block\Adminhtml\ActionsLog\Preview::class
            );

        /** @var \Magento\Framework\Controller\Result\Raw $resultRaw */
        $resultRaw = $this->resultRawFactory->create();
        return $resultRaw->setContents($content->toHtml());
    }
}

Test/PreviewPopup/Block/Adminhtml/ActionsLog/Preview.php

    <?php

namespace Test\PreviewPopup\Block\Adminhtml\ActionsLog;

use Magento\Backend\Block\Template;

class Preview extends Template
{
    /**
     * Path to template file in theme.
     * @var string
     */
    public $_template = 'Test_PreviewPopup::tab/modification.phtml';

    /**
     * Preview constructor.
     * @param Template\Context $context
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Backend\Model\Auth\Session $authSession,
        \Test\PreviewPopup\Model\ActionsLogFactory $actionlogFactory,
        \Test\PreviewPopup\Model\ResourceModel\ActionsLogChanges\CollectionFactory $actionsLogChangesFactory,
        array $data = []
    ) {
        $this->authSession = $authSession;
        $this->actionlogFactory = $actionlogFactory;
        $this->actionsLogChangesFactory = $actionsLogChangesFactory;
        parent::__construct($context, $data);
    }

    public function getModificationDetails()
    {
        $id = $this->getActionsId();
        $actionsLogChangescollections = $this->actionsLogChangesFactory
                                            ->create()
                                            ->addFieldToFilter(
                                                'actions_id',
                                                array('eq' => $id)
                                            )
                                            ->load();
        return $actionsLogChangescollections;
    }

    public function getActionsId()
    {
        return $this->getRequest()->getParam('id');
    }

    public function getUserEmail()
    {
        return $this->authSession->getUser()->getEmail();
    }

    /**
     * Check permission for passed action
     *
     * @param string $resourceId
     * @return bool
     */
    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed("Test_PreviewPopup::actions_log");
    }
}

Test/PreviewPopup/view/adminhtml/templates/tab/modification.phtml

<?php

$collection = $block->getModificationDetails();
// I wanted to show custom collection Data in grid so i've added this code you can make changes according to your requirements.
if($collection->getSize() > 0)
{
?>
<div class="grid">
    <div class="admin__table-wrapper">
        <table cellspacing="0" class="data-grid">
            <thead>
                <tr class="headings">
                    <th class="data-grid-th">Name</th>
                    <th class="data-grid-th">Old Value</th>
                    <th class="data-grid-th">New Value</th>
                </tr>
            </thead>
            <tbody>
                <tr class="data-grid-controls-row data-row ">
                    <td align="center" colspan="3" class="data-grid-checkbox-cell ammodel">Magento\User\Model\User\Interceptor</td>
                </tr>
                <?php foreach ($collection as $collections) {
                    ?>
                <tr class="data-grid-controls-row data-row _odd-row">
                    <td><?= $collections->getName(); ?></td>
                    <td class="onlyDeletions">
                        <pre>
                            <ins><?= $collections->getNewValue(); ?></ins>
                            <del><?= $collections->getOldValue(); ?></del>
                        </pre>
                    </td>
                    <td class="onlyInsertions">
                        <pre>
                            <ins><?= $collections->getNewValue(); ?></ins>
                            <del><?= $collections->getOldValue(); ?></del>
                        </pre>
                    </td>
                </tr>
               <?php } ?>
            </tbody>
        </table>
    </div>
</div>
<?php } else { ?>
<div class="grid">
    <div class="admin__table-wrapper">
        <table cellspacing="0" class="data-grid">
            <thead>
                <tr class="headings">
                    <th class="data-grid-th">Name</th>
                    <th class="data-grid-th">Old Value</th>
                    <th class="data-grid-th">New Value</th>
                </tr>
            </thead>
            <tbody>
                <tr class="data-grid-controls-row data-row _odd-row">
                    <td align="center" colspan="3" class="dashboard-advanced-reports-content">We couldn't find any records.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<?php } ?>

Hope it Helps.

Best Answer

Related Solutions

Magento – Magento 2 – Dynamic rows based on related products modal grid on custom form with tabs

Magento 2 – Add Grid/PHTML File to Slide Out Panel in Custom Grid Action

Related Topic