Skip to content

Add view button in admin grid to open a view page in slide window in Magento 2

I want to create View Slider in Admin
enter image description here

For that I’m following This my files are

view/admin/ui_component/marketplace_stores.xml

<actionsColumn name="action" class="AppthaMarketplaceUiComponentListingColumnViewStoreAction">
         <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">marketplaceadmin/grid/view</item>
               <item name="urlEntityParamName" xsi:type="string">store_id</item>
            </item>
         </argument>
      </actionsColumn>

Ui/Component/Listing/Column/ViewStoreAction.php

<?php
namespace AppthaMarketplaceUiComponentListingColumn;

use MagentoFrameworkUrlInterface;
use MagentoFrameworkViewElementUiComponentContextInterface;
use MagentoFrameworkViewElementUiComponentFactory;
use MagentoUiComponentListingColumnsColumn;

class ViewStoreAction extends Column
{
    const MARKETPLACE_URL_PATH_VIEW = 'marketplaceadmin/grid/index';
   public $urlBuilder;

   public $layout;

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

   public function getViewUrl()
   {
       return $this->urlBuilder->getUrl(
           $this->getData('config/viewUrlPath')
       );
   }
  
   public function prepareDataSource(array $dataSource)
   {
    //    echo"Inside";exit;
       if (isset($dataSource['data']['items'])) {
           foreach ($dataSource['data']['items'] as & $item) {
               if (isset($item['store_id'])) {
                   $item[$this->getData('name')] = $this->layout->createBlock(
                       MagentoBackendBlockWidgetButton::class,
                       '',
                       [
                           'data' => [
                               'label' => __('View'),
                               'type' => 'button',
                               'disabled' => false,
                               'class' => 'aureatelabs-grid-view',
                               'onclick' => 'aureatelabsView.open(''. $this->getViewUrl().'', ''.$item['store_id'].'')',
                            // 'onclick' => $this->urlBuilder->getUrl(self::MARKETPLACE_URL_PATH_VIEW, ['id' => $item['store_id']]),
                           ]
                       ]
                   )->toHtml();
               }
           }
       }

       return $dataSource;
   }
}

view/adminhtml/layout/marketplaceadmin_grid_index.xml

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
      <referenceContainer name="js">
         <block class="AppthaMarketplaceBlockAdminhtmlSelector" template="Apptha_Marketplace::view/js.phtml" name="marketplace.view.model.js" />
      </referenceContainer>
   </body>
</page>

view/adminhtml/templates/view/js.phtml

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

//<![CDATA[
       Window.keepMultiModalWindow = true;
       var aureatelabsView = {
           overlayShowEffectOptions : null,
           overlayHideEffectOptions : null,
           modal: null,
           open : function(viewUrl, elementId) {
               if (viewUrl && elementId) {
                   jQuery.ajax({
                       url: viewUrl,
                       data: {
                           id: elementId
                       },
                       showLoader: true,
                       dataType: 'html',
                       success: function(data, textStatus, transport) {
                           this.openDialogWindow(data, elementId);
                       }.bind(this)
                   });
               }
           },
           openDialogWindow : function(data, elementId) {
               var self = this;
               if (this.modal) {
                   this.modal.html(jQuery(data).html());
               } else {
                   this.modal = jQuery(data).modal({
                       title: '<?= /* @escapeNotVerified */ __('Grid View'); ?>',
                       modalClass: 'magento',
                       type: 'slide',
                       firedElementId: elementId,
                       buttons: [{
                           text: jQuery.mage.__('Close'),
                           class: 'action- scalable back',
                           click: function () {
                               self.closeDialogWindow(this);
                           }
                       }],
                       close: function () {
                           self.closeDialogWindow(this);
                       }
                   });
               }
               this.modal.modal('openModal');
           },
           closeDialogWindow : function(dialogWindow) {

               jQuery('body').trigger('processStop');
               dialogWindow.closeModal();
               Windows.overlayShowEffectOptions = this.overlayShowEffectOptions;
               Windows.overlayHideEffectOptions = this.overlayHideEffectOptions;
           }
       };

       window.aureatelabsView = aureatelabsView;
//]]>
   });
</script>

BlockAdminhtmlSelector.php

<?php
namespace AppthaMarketplaceBlockAdminhtml;

class Selector extends MagentoBackendBlockTemplate
{
}

Controller/Adminhtml/Grid/Index.php

<?php
namespace AppthaMarketplaceControllerAdminhtmlGrid;

class Index extends MagentoBackendAppAction
{
   
    protected $resultPageFactory;

   
    public function __construct(
        MagentoBackendAppActionContext $context,
        MagentoFrameworkRegistry $coreRegistry,
        MagentoFrameworkViewResultPageFactory $resultPageFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context, $coreRegistry);
    }

   
    public function execute()
    {

        $resultPage = $this->resultPageFactory->create();
        $this->initPage($resultPage)->getConfig()->getTitle()->prepend(__('View Map'));
        return $resultPage;
    }
    protected function initPage($resultPage)
    {
         $resultPage->setActiveMenu('Apptha_Marketplace::registration')
             ->addBreadcrumb(__('Apptha'), __('Apptha'))
             ->addBreadcrumb(__('View Map'), __('View Map'));

         return $resultPage;
    }

 
    // protected function _isAllowed()
    // {
    //     return $this->_authorization->isAllowed('Apptha_Marketplace::registration');
    // }
}

Controller/Adminhtml/Grid/View.php

<?php
namespace AppthaMarketplaceControllerAdminhtmlGrid;

use MagentoBackendAppActionContext;
use MagentoBackendAppAction;

class View extends Action
{
   protected $resultRawFactory;
   protected $layoutFactory;

   public function __construct(
       Context $context,
       MagentoFrameworkControllerResultRawFactory $resultRawFactory,
       MagentoFrameworkViewLayoutFactory $layoutFactory
   ) {
       $this->resultRawFactory = $resultRawFactory;
       $this->layoutFactory = $layoutFactory;
       parent::__construct($context);
   }

   public function execute()
   {
          $content = $this->layoutFactory->create()
           ->createBlock(
               AppthaMarketplaceBlockAdminhtmlView::class
           );

       /** @var MagentoFrameworkControllerResultRaw $resultRaw */
       $resultRaw = $this->resultRawFactory->create();
       return $resultRaw->setContents($content->toHtml());
   }
}

Block/Adminhtml/View.php

<?php
namespace AppthaMarketplaceBlockAdminhtml;

use MagentoBackendBlockTemplate;

class View extends Template
{
   public $_template = 'Apptha_Marketplace::view.phtml';

     public function __construct(
       MagentoBackendBlockTemplateContext $context
   ) {
       parent::__construct($context);
   }
}

adminhtml/templates/view.phtml

<h1>I’m your view page</h1>

but when I create this button n Click on this then it gives me an error

enter image description here
What is the issue n how can I sort this Thanks