Module Extended Admin UI provides components for building common interfaces across Plumrocket Extensions. # System Config ## Customisable Field Provides the ability to customize basic properties of the field. For example: Css class, inherit checkbox, scope label, element attributes. system.xml ```xml Plumrocket\ExtendedAdminUi\Block\Adminhtml\System\Config\Form\CustomisableField 1 1 readonly ``` ## Color Picker For using Color Picker you should 1. Add frontend_model as in example below 2. Add one of pickr css themes to system config layout Css theme 1 `Plumrocket_ExtendedAdminUi::css/lib/pickr/monolith.min.css` Css theme 2 `Plumrocket_ExtendedAdminUi::css/form/element/color-picker.css` system.xml ```xml Plumrocket\ExtendedAdminUi\Block\Adminhtml\System\Config\Form\ColorPicker ``` pr_system_config_edit_{section}.xml ```xml ``` ### Settings Use can use attributes to change color picker configs, for example ```xml 0 ``` ## Radio With Images For using Radio With Images you should 1. Change "select" or "radios" type as in example below 2. Add css to system config layout 3. Create a source model implementing \Plumrocket\ExtendedAdminUi\Api\ImageRadioButtonSourceInterface ```xml Plumrocket\ModuleName\Model\OptionSource\Template Plumrocket\ExtendedAdminUi\Block\Adminhtml\System\Config\Form\CustomisableField ``` pr_system_config_edit_{section}.xml ```xml ``` ## Text editor (wysiwyg) frontend_model `Plumrocket\ExtendedAdminUi\Block\Adminhtml\System\Config\Form\Editor` Exist possibility modify wysiwyg config by adding attributes ```xml Plumrocket\ExtendedAdminUi\Block\Adminhtml\System\Config\Form\Editor prgdpr/cookie_consent/notice_text 300px ``` ## Pure Fieldset frontend_model `Plumrocket\ExtendedAdminUi\Block\Adminhtml\System\Config\Form\PureFieldset` Exist possibility to display fields in module configurations without a group header ```xml Plumrocket\ExtendedAdminUi\Block\Adminhtml\System\Config\Form\PureFieldset ``` ## Notice _since 1.1.0_ Notice is an element designed to give customers tips related to the module configurations or field set but not for a single configuration field. Styles were completely copied from magento messages to make them build-in like. There are two variants of notices: 1. Full width ![Notice example](docs/notice.png "Notice") 2. With label ![Notice example](docs/notice-with-label.png "Notice with label") Also, there are five levels of notice: **note, info, warning, success, error** Example for full width info notice: ```xml Plumrocket\ExtendedAdminUi\Block\Adminhtml\System\Config\Form\Notice info developer guide.]]> ``` To add styles use update handle ```xml ``` ## Option source models ### Yes (Recommended)/No _since 1.1.0_ `Plumrocket\ExtendedAdminUi\Model\OptionSource\YesRecommended` ### Enabled (Recommended)/Disabled _since 1.1.0_ `Plumrocket\ExtendedAdminUi\Model\OptionSource\EnabledRecommended` # UI Forms ## Color Picker Added for 2.2 because from 2.3 magento has its own [color picker](https://devdocs.magento.com/guides/v2.4/ui_comp_guide/components/ui-colorpicker.html) Component `Plumrocket_ExtendedAdminUi/js/form/element/color-picker` Template `Plumrocket_ExtendedAdminUi/form/element/color-picker` ### Example form field ```xml Plumrocket_ExtendedAdminUi/form/element/color-picker true ```