aimes/magento2-improved-admin-ui

Improved UI for certain aspects of the admin area

1.1.0 2024-11-26 01:11 UTC

Requires

• php: ~8.2 | ~8.3
• magento/module-ui: ^101.2

GPL-3.0-or-later

• Rob Aimes

README

• Compatible with Magento Open Source and Adobe Commerce 2.4.x

Features

• Use a slightly modified UI-select component to replace standard select and multiselect components
  • Provides a search field for option models that have a lot of options (E.g. CMS Blocks)
• Dynamically use ui-select components, replacing select and multiselect components, in the product edit form
  • Configured to perform this action only when a certain number of options are shown
• Support for the default category attribute landing_page on the category form
• Any custom form can be modified, see Usage

Requirements

• Magento Open Source or Adobe Commerce version 2.4.x

Installation

Please install this module via Composer. This module is hosted on Packagist.

• composer require aimes/magento2-improved-admin-ui
• bin/magento module:enable Aimes_ImprovedAdminUi
• bin/magento setup:upgrade

Usage

Dynamic Replacement

System configuration is provided to set the minimum amount of options required before the component is rendered as a ui-select. By default, this value is set to 20.

Stores -> Configuration -> Catalog -> Catalog -> Admin UI

Statically Declared UI Components

Not every form has a pool of modifiers, most are statically declared. Since modifying attributes within these forms generally requires a new ui_component file, customisation to additional attributes can be done there. For example:

view/adminhtml/category_form.xml

<!-- some fields -->
<field name="my_custom_attribute"
       component="Aimes_ImprovedAdminUi/js/form/element/ui-select"
       formElement="select">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="multiple" xsi:type="boolean">false</item>
        </item>
    </argument>
    <settings>
        <elementTmpl>ui/grid/filters/elements/ui-select</elementTmpl>
    </settings>
</field>
<!-- some more fields -->

This should be merged with any other desired/required settings. Settings can be found on the default ui-select component documentation.

Preview

Product Form - Select

Product Form - Multiselect

Licence

GPLv3 © Rob Aimes