Magento 2 : Form component

Posted About 2 years ago. Visible to the public.

Text box component with currency symbol as prefix

In Product Form, Magento uses the text ui component with currency symbol as a prefix for price.
Following example shows how to get the prefix in text component

In form xml

<field name="final_total_text" formElement="input" sortOrder="120" component="Vasan_Bidding/js/form/components/price">
            <settings>
                <elementTmpl>Vasan_Bidding/form/element/currency_text</elementTmpl>
                <label translate="true">Total</label>
                <dataScope>amount</dataScope>
            </settings>
        </field>

In js file

define([
    'Magento_Ui/js/form/element/abstract',
    'Magento_Catalog/js/price-utils'
], function (Element, priceUtils) {
    'use strict';

    return Element.extend({
        defaults: {
            currency_sign: '$',
            imports : {
                currency_sign: '${ $.provider}:data.currency_sign'
            }
        },
        setInitialValue: function () {
            this._super();
            var self = this;

            self.setFormatPrice(self.initialValue);
            return this;
        },

        setFormatPrice: function (value) {
            var priceFormat = {
                decimalSymbol: '.',
                groupLength: 3,
                groupSymbol: ",",
                integerRequired: false,
                precision: 2,
                requiredPrecision: 2
            };
            var price = (value) ? priceUtils.formatPrice(value, priceFormat) : 0.00;
            this.initialValue = price;
            this.value._latestValue = price;

            return this;
        }
    });
});

In html

<span data-bind="text: currency_sign"></span>
<span class="admin__field-value"
          data-bind="
        text: value,
        attr: {
            name: inputName,
            id: uid
    }"/>


vasan
Last edit
About 2 years ago
vasan
Posted by vasan to vasan's deck (2022-03-24 17:31)