{"id":14464,"date":"2021-10-25T05:45:49","date_gmt":"2021-10-25T11:15:49","guid":{"rendered":"https:\/\/emizentech.com\/blog\/?p=14464"},"modified":"2026-03-31T12:32:46","modified_gmt":"2026-03-31T12:32:46","slug":"create-admin-grid-in-shopware-using-plugin-module","status":"publish","type":"post","link":"https:\/\/emizentech.com\/blog\/create-admin-grid-in-shopware-using-plugin-module.html","title":{"rendered":"How To Create Admin Grid In Shopware 6 Using Plugin Module"},"content":{"rendered":"\r\n

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.<\/p>\r\n\r\n\r\n\r\n

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 \u201cHow to create a basic plugin in shopware 6<\/a><\/strong>\u201d<\/p>\r\n\r\n\r\n\r\n

1. Firstly we have to create an \u201cindex.js<\/strong>\u201d file at this location given below:<\/p>\r\n\r\n\r\n\r\n

\u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/module\/emizen-module\/index.js\u201d<\/p>\r\n\r\n\r\n\r\n

const { Module } = Shopware;\r\nimport '.\/page\/emizen-module-list'; \/\/ Component registered for module which will used for showing data  \r\n\r\nimport enGB from '.\/snippet\/en-GB';\r\nimport deDE from '.\/snippet\/de-DE';\r\n\r\nModule.register('emizen-module', {\r\n    type: 'plugin',\r\n    title: 'emizen-module.general.mainMenuItemList',\r\n    description: 'emizen-module .general.descriptionTextModule',\r\n    snippets: {\r\n        'en-GB': enGB,\r\n        'de-De': deDE\r\n    },\r\n\r\n    routes: {\r\n        'list': {\r\n            component: 'emizen-module-list',\r\n            path: 'list',\r\n            meta: {\r\n                parentPath: 'sw.settings.index'\r\n            }\r\n        }\r\n    },\r\n\r\n    settingsItem: [\r\n        {\r\n            name: 'emizen-module',\r\n            label: 'emizen-module.general.mainMenuItemList',\r\n            to: 'emizen.module.list',\r\n            group: 'plugins',\r\n            icon: 'default-object-marketing'\r\n        }\r\n    ]\r\n});<\/code><\/pre>\r\n\r\n\r\n\r\n
2. Now we will add the component which is used for handling and showing the list data \u00a0at this location<\/p>\r\n\r\n\r\n\r\n
\u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/module\/emizen-module\/page\/emizen-module-list\u201d two files will be \u00a0added at this location<\/p>\r\n\r\n\r\n\r\n
-> index.js \r\n->  emizen-module-list.html.twig<\/code><\/pre>\r\n\r\n\r\n\r\n
\r\n
\"Hire<\/a><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n
3. In \u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/module\/emizen-module\/page\/emizen-module-list\/index.js\u201d we will add the following code:<\/p>\r\n\r\n\r\n\r\n
const { Component, Mixin } = Shopware;\r\nconst { Criteria } = Shopware.Data;\r\n\r\nimport template from '.\/emizen-module-list.html.twig'; \/\/ template which will show data \r\n\r\nComponent.register('emizen-module-list', {\r\n    template,\r\n\r\n    inject: [\r\n    'repositoryFactory',\r\n    ],\r\n\r\n    mixins: [\r\n    Mixin.getByName('notification')\r\n    ],\r\n\r\n    metaInfo() {\r\n        return {\r\n            title: this.$createTitle()\r\n        };\r\n    },\r\n\r\n    data() {\r\n        return {\r\n            total: 0,\r\n            emizenModuleCollection: null,\r\n            repository: null,\r\n            isLoading:false,\r\n            processSuccess:false\r\n        };\r\n    },\r\n\r\n    created() {\r\n        this.getEmizentechModule();\r\n    },\r\n\r\n    computed: {\r\n        columns() {\r\n            return [{\r\n                property: 'productNumber',  \/\/ column property\r\n                dataIndex: 'productNumber',\r\n                label: this.$t('emizen-module.list.titleColumn'), \/\/ column label (snippets used for labels)\r\n                allowResize: true,\r\n                sortable: false,\r\n            },\r\n            {\r\n                property: 'description',\r\n                dataIndex: 'description',\r\n                label: this.$t('emizen-module.list.descColumn'),\r\n                allowResize: true,\r\n                sortable: false,\r\n            },\r\n            ];\r\n        }\r\n    },\r\n\r\n    methods: {\r\n        getEmizentechModule: function () {\r\n            const criteria = new Criteria();\r\n            this.repository = this.repositoryFactory.create('product'); \/\/ product repository data\r\n            this.repository.search(criteria, Shopware.Context.api).then((result) =>{\r\n                this.emizenModuleCollection = result;\r\n                this.total = result.total;\r\n            })\r\n        }\r\n    }\r\n});<\/code><\/pre>\r\n\r\n\r\n\r\n
4. Now in \u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/module\/emizen-module\/page\/emizen-module-list\/emizen-module-list.html.twig\u201d<\/p>\r\n\r\n\r\n\r\n
{% block emizen_module_list %}\r\n    <sw-page>\r\n        {% block emizen_module_smart_bar_header %}\r\n            <template #smart-bar-header>\r\n                {% block emizen_module_list_smart_bar_header_title %}\r\n                    <h2>\r\n                        {% block emizen_module_list_smart_bar_header_title_text %}\r\n                            {{ $tc('sw-settings.index.title') }}\r\n                            <sw-icon name=\"small-arrow-medium-right\" small><\/sw-icon>\r\n                            {{ $t('emizen-module.general.mainMenuItemList') }}\r\n                        {% endblock %}\r\n                        {% block emizen_module_list_smart_bar_header_amount %}\r\n                            <span v-if=\"total\" class=\"sw-page__smart-bar-amount\">\r\n                                ({{total}})\r\n                            <\/span>\r\n                        {% endblock %}\r\n                    <\/h2>\r\n                {% endblock %}\r\n            <\/template>\r\n        {% endblock %}\r\n\r\n        <template slot=\"content\">\r\n            <sw-entity-listing\r\n                :items=\"emizenModuleCollection\"\r\n                :repository=\"repository\"\r\n                :showSelection=\"false\"\r\n                :columns=\"columns\">\r\n                <template slot=\"column-productNumber\" slot-scope=\"{ item }\">\r\n                   {{item.productNumber}}\r\n                <\/template>\r\n                <template slot=\"column-description\" slot-scope=\"{ item }\">\r\n                   {{item.description}}\r\n                <\/template>\r\n            <\/sw-entity-listing>\r\n        <\/template>\r\n    <\/sw-page>\r\n{% endblock %}<\/code><\/pre>\r\n\r\n\r\n\r\n
5. Now we will add snippets \u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/module\/emizen-module\/snippet\/de-DE.json\u201d<\/p>\r\n\r\n\r\n\r\n
{\r\n    \"emizen-module\":{\r\n        \"general\": {\r\n            \"mainMenuItemList\": \"Emizentech-Modul\",\r\n            \"descriptionTextModule\": \"Emizentech-Modul\"\r\n        },\r\n\r\n        \"list\": {\r\n            \"titleColumn\": \"Titel\",\r\n            \"descColumn\": \"Beschreibung\",\r\n            \"titleSaveSuccess\": \"Erfolg\",\r\n            \"messageSaveSuccess\": \"Einzelheiten erfolgreich aktualisiert\"\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/module\/emizen-module\/snippet\/en-GB.json\u201d \r\n\r\n{\r\n    \"emizen-module\":{\r\n        \"general\": {\r\n            \"mainMenuItemList\": \"Emizentech Module\",\r\n            \"descriptionTextModule\": \"Emizentech module`\" \r\n        },\r\n\r\n        \"list\": {\r\n            \"titleColumn\": \"Title\",\r\n            \"descColumn\": \"Description\",\r\n            \"titleSaveSuccess\": \"Success\",\r\n            \"messageSaveSuccess\": \"Details updated successfully\"\r\n        }\r\n    }\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n
6. Now at last we will add our module in main.js using the following code

\u201cEmizentechplugin\/src\/Resources\/app\/administration\/src\/main.js\u201d

import ‘.\/module\/emizen-module’;

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

\u201cbin\/build-administration.sh\u201d.

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

Thank you.<\/p>\r\n\r\n\r\n\r\n
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<\/a> that helps businesses thrive in the e-commerce industry.<\/p>\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"
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<\/p>\n","protected":false},"author":36,"featured_media":14472,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[85],"tags":[],"class_list":["post-14464","post","type-post","status-publish","format-standard","has-post-thumbnail","category-shopware"],"featured_image_src":"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2021\/10\/Create-Admin-Grid-In-Shopware-6-Using-Plugin-Module-1.jpg","featured_image_src_square":"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2021\/10\/Create-Admin-Grid-In-Shopware-6-Using-Plugin-Module-1.jpg","author_info":{"display_name":"Vivek Khatri","author_link":"https:\/\/emizentech.com\/blog\/author\/vivek"},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2021\/10\/Create-Admin-Grid-In-Shopware-6-Using-Plugin-Module-1.jpg","_links":{"self":[{"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/posts\/14464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/comments?post=14464"}],"version-history":[{"count":1,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/posts\/14464\/revisions"}],"predecessor-version":[{"id":595541,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/posts\/14464\/revisions\/595541"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/media\/14472"}],"wp:attachment":[{"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/media?parent=14464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/categories?post=14464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/tags?post=14464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}