2

I'm building my own add/edit form in the backend for a Magento 2 module using ui-components.
I have one simple thing to do... add a class to an input/select/textarea.
Here is my element definition:

<field name="name">
    <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">Name</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">author</item>
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="dataScope" xsi:type="string">name</item>
            <item name="notice" xsi:type="string" translate="true">Enter full name here</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>  

This is rendered as

<div class="admin__field _required" data-bind="css: $data.additionalClasses, attr: {'data-index': index}, visible: visible" data-index="name">
    <!-- ko if: $data.label --><label class="admin__field-label" data-bind="attr: {for: uid}, visible: $data.labelVisible" for="LLKEGUU">
        <span data-bind="attr: {'data-config-scope': $data.scopeLabel}, i18n: label">Name</span>
    </label><!-- /ko -->
    <div class="admin__field-control" data-bind="css: {'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset &amp;&amp; $data.isDifferedFromDefault}">
        <!-- ko ifnot: hasAddons() --><!-- ko template: elementTmpl -->
<input class="admin__control-text" data-bind="
        event: {change: userChanges},
        value: value,
        hasFocus: focused,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled
    }" name="name" aria-describedby="notice-LLKEGUU" id="LLKEGUU" type="text">
<!-- /ko --><!-- /ko -->

        <!-- ko if: hasAddons() --><!-- /ko -->

        <!-- ko if: $data.tooltip --><!-- /ko -->

        <!-- ko if: $data.showFallbackReset && $data.isDifferedFromDefault --><!-- /ko -->

        <!-- ko if: error --><!-- /ko -->

        <!-- ko if: $data.notice --><div class="admin__field-note" data-bind="attr: {id: noticeId}" id="notice-LLKEGUU">
            <span data-bind="i18n: notice">Enter full name here</span>
        </div><!-- /ko -->

        <!-- ko if: $data.additionalInfo --><!-- /ko -->

        <!-- ko if: $data.hasService() --><!-- /ko -->
    </div>
</div>

I want to add a class my-custom-css-class to the field itself or the element wrapping it (the one with the class admin__field-control) or even the wrapper of the wrapper (the one with the class admin__field _required)

12

You can use the additionalClasses :

<item name="additionalClasses" xsi:type="string">my-custom-class</item>

Side note: interestingly, it seems like it also handles arrays:

<item name="additionalClasses" xsi:type="array">
    <item name="my-custom-class" xsi:type="boolean">true</item>
</item>
  • Thanks. I would rather have it on the field itself, but I can work with this. – Marius Sep 29 '16 at 13:20
  • @Marius unfortunately apart from using some custom JS I don't think it's possible on the field itself out of the box. You can check by looking at Magento/Ui/view/base/web/templates/form/element/input.html that it does not support custom class – Raphael at Digital Pianism Sep 29 '16 at 13:26
  • 1
    Yeah...I just found that file. Too bad. Anyway, I can work with this. It's better than nothing. – Marius Sep 29 '16 at 13:38
  • 1
    @Marius time for PR ? :P – Raphael at Digital Pianism Sep 29 '16 at 13:41
2

We can not add a class to input,textarea,etc. We need add new custom template for the elements, like this:

<field name="position" sortOrder="90" formElement="input">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="classes" xsi:type="string">CUSTOM_CLASS</item>
            </item>
        </item>
    </argument>
    <settings>
        <label translate="true">Position</label>
        <dataType>number</dataType>
        <elementTmpl>VENDOR_MODULE/form/element/input</elementTmpl>
        <dataScope>position</dataScope>
    </settings>
</field>

VENDOR/MODULE/view/adminhtml/web/template/form/element/input.html

<input type="text"
    data-bind="
        event: {change: userChanges},
        value: value,
        hasFocus: focused,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled,
            class: 'admin__control-text ' + $data.classes
    }"
    />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.