How To Create Admin Grid In Shopware 6 Using Plugin Module

Last Updated on January 21, 2022

Each module in the Administration core code is outlined in a directory called a module. The module directory contains a list of modules, each with its own directory labeled after the module.

For, creating an admin grid in shopware 6 firstly you have to create a basic plugin which was created in our blog please refer to that blog “How to create a basic plugin in shopware 6”

1. Firstly we have to create an “index.js” file at this location given below:

“Emizentechplugin/src/Resources/app/administration/src/module/emizen-module/index.js”

const { Module } = Shopware;
import './page/emizen-module-list'; // Component registered for module which will used for showing data  

import enGB from './snippet/en-GB';
import deDE from './snippet/de-DE';

Module.register('emizen-module', {
    type: 'plugin',
    title: 'emizen-module.general.mainMenuItemList',
    description: 'emizen-module .general.descriptionTextModule',
    snippets: {
        'en-GB': enGB,
        'de-De': deDE
    },

    routes: {
        'list': {
            component: 'emizen-module-list',
            path: 'list',
            meta: {
                parentPath: 'sw.settings.index'
            }
        }
    },

    settingsItem: [
        {
            name: 'emizen-module',
            label: 'emizen-module.general.mainMenuItemList',
            to: 'emizen.module.list',
            group: 'plugins',
            icon: 'default-object-marketing'
        }
    ]
});

2. Now we will add the component which is used for handling and showing the list data  at this location

“Emizentechplugin/src/Resources/app/administration/src/module/emizen-module/page/emizen-module-list” two files will be  added at this location

-> index.js 
->  emizen-module-list.html.twig

3. In “Emizentechplugin/src/Resources/app/administration/src/module/emizen-module/page/emizen-module-list/index.js” we will add the following code:

const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;

import template from './emizen-module-list.html.twig'; // template which will show data 

Component.register('emizen-module-list', {
    template,

    inject: [
    'repositoryFactory',
    ],

    mixins: [
    Mixin.getByName('notification')
    ],

    metaInfo() {
        return {
            title: this.$createTitle()
        };
    },

    data() {
        return {
            total: 0,
            emizenModuleCollection: null,
            repository: null,
            isLoading:false,
            processSuccess:false
        };
    },

    created() {
        this.getEmizentechModule();
    },

    computed: {
        columns() {
            return [{
                property: 'productNumber',  // column property
                dataIndex: 'productNumber',
                label: this.$t('emizen-module.list.titleColumn'), // column label (snippets used for labels)
                allowResize: true,
                sortable: false,
            },
            {
                property: 'description',
                dataIndex: 'description',
                label: this.$t('emizen-module.list.descColumn'),
                allowResize: true,
                sortable: false,
            },
            ];
        }
    },

    methods: {
        getEmizentechModule: function () {
            const criteria = new Criteria();
            this.repository = this.repositoryFactory.create('product'); // product repository data
            this.repository.search(criteria, Shopware.Context.api).then((result) =>{
                this.emizenModuleCollection = result;
                this.total = result.total;
            })
        }
    }
});

4. Now in “Emizentechplugin/src/Resources/app/administration/src/module/emizen-module/page/emizen-module-list/emizen-module-list.html.twig”

{% block emizen_module_list %}
    <sw-page>
        {% block emizen_module_smart_bar_header %}
            <template #smart-bar-header>
                {% block emizen_module_list_smart_bar_header_title %}
                    <h2>
                        {% block emizen_module_list_smart_bar_header_title_text %}
                            {{ $tc('sw-settings.index.title') }}
                            <sw-icon name="small-arrow-medium-right" small></sw-icon>
                            {{ $t('emizen-module.general.mainMenuItemList') }}
                        {% endblock %}
                        {% block emizen_module_list_smart_bar_header_amount %}
                            <span v-if="total" class="sw-page__smart-bar-amount">
                                ({{total}})
                            </span>
                        {% endblock %}
                    </h2>
                {% endblock %}
            </template>
        {% endblock %}

        <template slot="content">
            <sw-entity-listing
                :items="emizenModuleCollection"
                :repository="repository"
                :showSelection="false"
                :columns="columns">
                <template slot="column-productNumber" slot-scope="{ item }">
                   {{item.productNumber}}
                </template>
                <template slot="column-description" slot-scope="{ item }">
                   {{item.description}}
                </template>
            </sw-entity-listing>
        </template>
    </sw-page>
{% endblock %}

5. Now we will add snippets “Emizentechplugin/src/Resources/app/administration/src/module/emizen-module/snippet/de-DE.json”

{
    "emizen-module":{
        "general": {
            "mainMenuItemList": "Emizentech-Modul",
            "descriptionTextModule": "Emizentech-Modul"
        },

        "list": {
            "titleColumn": "Titel",
            "descColumn": "Beschreibung",
            "titleSaveSuccess": "Erfolg",
            "messageSaveSuccess": "Einzelheiten erfolgreich aktualisiert"
        }
    }
}


“Emizentechplugin/src/Resources/app/administration/src/module/emizen-module/snippet/en-GB.json” 

{
    "emizen-module":{
        "general": {
            "mainMenuItemList": "Emizentech Module",
            "descriptionTextModule": "Emizentech module`" 
        },

        "list": {
            "titleColumn": "Title",
            "descColumn": "Description",
            "titleSaveSuccess": "Success",
            "messageSaveSuccess": "Details updated successfully"
        }
    }
}

6. Now at last we will add our module in main.js using the following code

“Emizentechplugin/src/Resources/app/administration/src/main.js”

import ‘./module/emizen-module’;

Now run the admin build command to see the changes we have made in the admin backend.

“bin/build-administration.sh”.

For seeing changes in admin go to Settings->Extensions.

Thank you.

If you have any other issue in Shopware 6 that you are struggling with for your eCommerce store then get in touch with Emizentech. We are a reliable & experienced Shopware development company that helps businesses thrive in the e-commerce industry.