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)

2 Answers 2

14

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>
4
  • Thanks. I would rather have it on the field itself, but I can work with this.
    – Marius
    Sep 29, 2016 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 Sep 29, 2016 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, 2016 at 13:38
  • 1
    @Marius time for PR ? :P Sep 29, 2016 at 13:41
3

We cannot add a class to input, textarea, etc. We need to add a 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.