0

I have create a custom admin grid but i do not khow how to add the import button inside my code Here is my code with ui component:

<listingToolbar name="listing_top">
        <settings>
            <sticky>true</sticky>
        </settings>
        <bookmark name="bookmarks"/>
        <exportButton name="export_button"/>
        <columnsControls name="columns_controls"/>
        <filters name="listing_filters" />
        <paging name="listing_paging"/>
        <massaction name="listing_massaction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
                </item>
            </argument>
            <action name="delete">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">delete</item>
                        <item name="label" xsi:type="string" translate="true">Delete</item>
                        <item name="url" xsi:type="url" path="*/*/delete"/>
                        <item name="confirm" xsi:type="array">
                            <item name="title" xsi:type="string" translate="true">Delete Row</item>
                            <item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected items?</item>
                        </item>
                    </item>
                </argument>
            </action>
        </massaction>
    </listingToolbar>

How to add import button, i really appreaciate it. PLease help me

0

3 Answers 3

-1

Add reference Block in your listing.xml

<referenceContainer name="content">
   <block class="vendor\module\Block\Adminhtml\Import\Edit" name="import-form"/>
   <uiComponent name="your_listing"/>
</referenceContainer>

Create File Edit.php on this path vendor\module\Block\Adminhtml\Import\

<?php

namespace Vendor\Module\Block\Adminhtml\Import;

class Edit extends \Magento\Backend\Block\Widget\Form\Container
{

    protected $_coreRegistry = null;

    public function __construct(
        \Magento\Backend\Block\Widget\Context $context,
        \Magento\Framework\Registry $registry,
        \Magento\Framework\App\Response\RedirectInterface $redirect,
        array $data = []
    ) {
        $this->_coreRegistry = $registry;
        $this->redirect = $redirect;
        parent::__construct($context, $data);
    }

    protected function _construct()
    {
        $this->_blockGroup = 'Vendor_Module';
        $this->_controller = 'adminhtml_import';
    }

    public function getHeaderText()
    {
        return __('Import Csv');
    }

    public function getBackUrl()
    {
        return $this->getUrl('cms/page/index');
    }

    public function _prepareLayout()
    {
        $this->_formScripts[] = "
            function toggleEditor() {
                if (tinyMCE.getInstanceById('page_content') == null) {
                    tinyMCE.execCommand('mceAddControl', false, 'page_content');
                } else {
                    tinyMCE.execCommand('mceRemoveControl', false, 'page_content');
                }
            };
        ";
        return parent::_prepareLayout();
    }
}

Create Field using create file Form.php in Vendor/Module/Block/Adminhtml/Import/Edit path

<?php

namespace Vendor\Module\Block\Adminhtml\Import\Edit;

use Magento\Backend\Block\Widget\Form\Generic;

class Form extends Generic
{

    protected $_formFactory;

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Data\FormFactory $formFactory,
        \Magento\Framework\Registry $registry,
        array $data = []
    ) {
        $this->_formFactory = $formFactory;
        parent::__construct($context, $registry, $formFactory, $data);
    }

    protected function _prepareForm()
    {

        $form = $this->_formFactory->create(
            [
                'data' => [
                    'id' => 'edit_form',
                    'enctype' => 'multipart/form-data',
                    'action' => $this->getUrl('import/import/index'),
                    'method' => 'post',
                ],
            ]
        );


        $uploadFileFieldset = $form->addFieldset(
            'upload_file_fieldset',
            [
                'legend' => __('File to Import'),
                'class' => 'fieldset-wide',
            ]
        );

        $uploadFileFieldset->addField(
            'import_file',
            'file',
            [
                'name' => 'import_file',
                'label' => __('Select Csv File to Import'),
                'title' => __('Select Csv File to Import'),
                'required' => true,
                'class' => 'input-file',
            ]
        );

        $uploadFileFieldset->addField(
            'upload_button',
            'button',
            [
                'name' => 'upload_button',
                'label' => __('click'),
                'title' => __('click'),
                'class' => 'upload_button',
                'data_attribute' => '',
                'value' => 'Upload',
                'onclick' => 'varienImport.validateImport();'
            ]
        );


        $form->setUseContainer(true);
        $this->setForm($form);

        return parent::_prepareForm();
    }
     public function _prepareLayout()
    {
        $this->_formScripts[] = "
            function toggleEditor() {
                if (tinyMCE.getInstanceById('page_content') == null) {
                    tinyMCE.execCommand('mceAddControl', false, 'page_content');
                } else {
                    tinyMCE.execCommand('mceRemoveControl', false, 'page_content');
                }
            };
        ";
        return parent::_prepareLayout();
    }
}

It is seen like this :

enter image description here

6
  • hey, so "import data" button need to change the url to block or controller ?
    – KAITO_3SS
    Commented Jul 21, 2022 at 7:01
  • on controller you can read your file and save data. Commented Jul 21, 2022 at 7:03
  • Also in this custom upload file you can create file validation using controller . Commented Jul 21, 2022 at 7:03
  • Could you show me all your files, you can push on git and send me the link, i need a visual in order to imagine this situation.
    – KAITO_3SS
    Commented Jul 21, 2022 at 7:07
  • sure i send you link . Commented Jul 21, 2022 at 7:09
0

Add new import button in your ui component file like this.

 <item name="buttons" xsi:type="array">
            <item name="import" xsi:type="array">
                <item name="name" xsi:type="string">import</item>
                <item name="label" xsi:type="string">Import Data</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">route/controller/import</item>
            </item>
        </item>

In your listing grid file's buttons section & create controller Import.php , read csv in your controller & save data in your model.

2
  • Could you show me the controller file, i am curious
    – KAITO_3SS
    Commented Jul 21, 2022 at 5:42
  • did you save data in database before in magento. Commented Jul 21, 2022 at 5:53
0

your controller be like :

 public function execute()
    {
        $columns = [your_field_as_header_here];

        foreach($model as $data){

                    $filePath = 'http://domain/magentoname/pub/media/import.csv';
                    $fp = fopen($filePath, 'a');
                    fgetcsv( $fp, $columns,",");
        ... 
        $content[] = $data->getId();
        and your other field in array
        and save in your model
        $model->setData($content);
        $model->save()
        ...
        }
    }
2
  • But this is like when you import CSV from your folder inside magento root, i wonder is there any way when user click the "Import Data" button, it will browser their computer so they can select the file they want to import
    – KAITO_3SS
    Commented Jul 21, 2022 at 6:25
  • sure just a min ,i change code Commented Jul 21, 2022 at 6:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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