1

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="Apptha\Marketplace\Ui\Component\Listing\Column\ViewStoreAction">
         <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 Apptha\Marketplace\Ui\Component\Listing\Column;

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

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,
       \Magento\Framework\View\LayoutInterface $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(
                       \Magento\Backend\Block\Widget\Button::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="Apptha\Marketplace\Block\Adminhtml\Selector" 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>

Block\Adminhtml\Selector.php

<?php
namespace Apptha\Marketplace\Block\Adminhtml;

class Selector extends \Magento\Backend\Block\Template
{
}

Controller/Adminhtml/Grid/Index.php

<?php
namespace Apptha\Marketplace\Controller\Adminhtml\Grid;

class Index extends \Magento\Backend\App\Action
{
   
    protected $resultPageFactory;

   
    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\Registry $coreRegistry,
        \Magento\Framework\View\Result\PageFactory $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 Apptha\Marketplace\Controller\Adminhtml\Grid;

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

class View extends Action
{
   protected $resultRawFactory;
   protected $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);
   }

   public function execute()
   {
          $content = $this->layoutFactory->create()
           ->createBlock(
               \Apptha\Marketplace\Block\Adminhtml\View::class
           );

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

Block/Adminhtml/View.php

<?php
namespace Apptha\Marketplace\Block\Adminhtml;

use Magento\Backend\Block\Template;

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

     public function __construct(
       \Magento\Backend\Block\Template\Context $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

3
  • I think its js error says in your console that aureatelabsView is not defined and other js error as well which is in the console.
    – Mohit Rane
    Oct 6 '20 at 11:52
  • @MohitRane exactly but aureatelabsView function is the function which I declared in js.phtml but it is not getting in resources any idea?
    – Asad Khan
    Oct 6 '20 at 12:48
  • I am following the same blog and encountered the same mistake. I felt that js.phtml file is not getting initialised, that's what browser couldn't recognise Any fixes for this ?
    – Mohan
    Dec 7 '20 at 12:12
0

Ui/Component/Listing/Column/ViewStoreAction.php

Try to add this way $item[$name] = html_entity_decode(... in ViewStoreAction.php file

/**
     * 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(
                                    'testmodule/action/edit',
                                    ['actions_id' => $item['actions_id']]
                                ).'">'. __('View Details').'</a>');
                }
            }
        }

        return $dataSource;
    }

It worked for me so it might help you as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.