Làm cách nào tôi có thể thêm trường tùy chỉnh vào biểu mẫu quản trị viên trong Magento 2?

9

Tôi đã tạo một biểu mẫu trong quản trị viên bằng các thành phần UI, vì vậy trong phần tôi view/adminhtml/ui_component/[module]_[entity]_form.xmlcó:

<field name="configuration">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Configuration</item>
            <item name="formElement" xsi:type="string">textarea</item>
            <item name="source" xsi:type="string">form</item>
            <item name="sortOrder" xsi:type="number">30</item>
            <item name="dataScope" xsi:type="string">configuration</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Bây giờ tôi không muốn giá trị này là một textarea, nhưng tôi muốn tạo ra phép thuật HTML của riêng mình trong phần phụ trợ cho giá trị này. 'Ma thuật HTML' này cuối cùng sẽ có rất nhiều JS / KnockOut mà dưới nước vẫn gửi một số dữ liệu ẩn khi đăng biểu mẫu, vì vậy nó cần phải là một phần của biểu mẫu. Tôi đã thử thêm một kết xuất bằng cách thêm:

<item name="renderer" xsi:type="object">Vendor\Module\Block\Adminhtml\Renderer\Configurator</item>

Nhưng điều này vẫn làm cho textarea. Sau đó, tôi đã thử thay thế formElementbằng một lớp tùy chỉnh như vậy:

<item name="formElement" xsi:type="object">Vendor\Module\Component\Form\Element\Configurator</item>

Nhưng sau đó tôi nhận được lỗi:

The requested component ("Vendor\Module\Component\Form\Element\Configurator") is not found. Before using, you must add the implementation.

Vì vậy, 2 câu hỏi ở đây:

Đây có phải là cách đúng để thêm một yếu tố biểu mẫu tùy chỉnh vào biểu mẫu quản trị viên? (và nếu vậy: làm thế nào?)
Bất kể điều gì: làm thế nào tôi có thể thêm việc thực hiện? Tôi đang đào qua mô-đun UI để xem họ đã làm như thế nào, nhưng tôi không thể tìm thấy gì.

— Giel Berker
nguồn

10

Bạn có thể kiểm tra mô-đun mẫu magento họ đã cung cấp

<field name="color">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <!--component constructor-->
            <item name="component" xsi:type="string">Magento_SampleForm/js/form/element/color-select</item>
            <!--main template for form field that renders elementTmpl as a child template-->
            <item name="template" xsi:type="string">ui/form/field</item>
            <!--customized form element template that will show colors-->
            <item name="elementTmpl" xsi:type="string">Magento_SampleForm/form/element/color-select</item>
            <item name="label" xsi:type="string">Autumn colors</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">sampleform</item>
        </item>
    </argument>
</field>

— Giải thưởng
nguồn

Cảm ơn! chính xác câu trả lời tôi đang tìm kiếm! Tôi đã xem xét \Magento\Framework\View\Element\UiComponent\Config\Provider\Component\Definition::setComponentData()để thêm một thành phần tùy chỉnh bằng cách sử dụng một sự kiện, nhưng điều này thuận tiện hơn nhiều! Tôi thực sự nên xem xét nhiều hơn về các ví dụ Magento 2.

— Giel Berkers

3

Tôi không chắc chắn, nhưng tôi nghĩ shopping cart price rulesẽ cho bạn một số gợi ý về điều này, đây là ví dụ

<field name="stop_rules_processing">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">boolean</item>
                    <item name="formElement" xsi:type="string">checkbox</item>
                    <item name="source" xsi:type="string">sales_rule</item>
                    <item name="prefer" xsi:type="string">toggle</item>
                    <item name="valueMap" xsi:type="array">
                        <item name="true" xsi:type="number">1</item>
                        <item name="false" xsi:type="number">0</item>
                    </item>
                    <item name="default" xsi:type="number">0</item>
                    <item name="label" xsi:type="string" translate="true">Discard subsequent rules</item>
                </item>
            </argument>
        </field>
        <container name="actions_apply_to" >
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">40</item>
                </item>
            </argument>
            <htmlContent name="html_content">
                <argument name="block" xsi:type="object">Magento\SalesRule\Block\Adminhtml\Promo\Quote\Edit\Tab\Actions</argument>
            </htmlContent>
        </container>

Để biết thêm chi tiết, bạn có thể truy cập tập tin này

\vendor\magento\module-sales-rule\view\adminhtml\ui_component\sales_rule_form.xml

— Keyur Shah
nguồn

Cảm ơn vì tiền hỗ trợ! Điều này dường như chỉ cần thêm một khối nội dung HTML. Nhưng tôi cần tạo một phần tử biểu mẫu phức tạp có nhiều logic KnockOut trong đó có chứa XHR.

— Giel Berkers

Làm cách nào để thêm trường tùy chỉnh vào mẫu chỉnh sửa sản phẩm trong quản trị viên?

— jafar pinjar