Magento – Magento 2: call helper function in ui component form

helpermagento2ui-formuicomponent

In my form.xml, I have used below code to show input field

<field name="price">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Shipping Price</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="elementTmpl" xsi:type="string">ui/form/element/price</item>
            <item name="currency_sign" xsi:type="string">$</item>
            <item name="source" xsi:type="string">shippingrates</item>
        </item>
    </argument>
</field>

As it was a price column I added below code to show currency symbol 

<item name="elementTmpl" xsi:type="string">ui/form/element/price</item>
<item name="currency_sign" xsi:type="string">$</item>

Now the problem is that I want to pass the currency_sign dynamically using helper function, I was unable to call helper function here.
I tried below to call helper function, but none of them worked.

<item name="currency_sign" xsi:type="helper" helper="Namespace\ModuleName\Helper\Data::getCurrencySymbol" />

I tried this too

<item name="currency_sign" xsi:type="helper" >Namespace\ModuleName\Helper\Data::getCurrencySymbol</item>

Anyone has idea how to get this working?

Best Answer

The base layer of UI Component configuration is made up of static values in Javascript (per module, in the defaults object) and more specifically XML. This makes it easy build out new UI Components, but is not flexible. Magento processes all the XML configuration through PHP and provides a simple interface with which to modify, add, or delete configuration during the request. To integrate with this, use a DataModifier. It must implement \Magento\Ui\DataProvider\Modifier\ModifierInterface. There are also abstract classes that can be used for convenience as well, such as: \Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier.

First, create a DataModifier class (these are usually placed within a Ui/ directory):

namespace SwiftOtter\Example\Ui\Modifiers;

use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;

class ProductForm extends AbstractModifier
{

    public function modifyData(array $data)
    {
        // modify data provided to UI Component here

        return $data;
    }


    public function modifyMeta(array $meta)
    {
        // modify currency_sign (or any field structure) here
        // Use \Magento\Framework\Stdlib\ArrayManager for diving deep into complex array structures

        return $meta;
    }
}

Next, configure the data modifier with the appropriate modifier pool. In the following example, I am adding a modifier for example-input on the Catalog Product manage page:

<virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
    <arguments>
        <argument name="modifiers" xsi:type="array">
            <item name="example-input" xsi:type="array">
                <item name="class" xsi:type="string">SwiftOtter\Example\Ui\Modifiers\ProductForm</item>
            </item>
        </argument>
    </arguments>
</virtualType>

As you can imagine, this provides a great deal of flexibility for modifying various aspects of not only your UI Component but others, if necessary.

For more info, DevDocs has a good article on PHP Data Modifiers: https://devdocs.magento.com/guides/v2.2/ui_comp_guide/concepts/ui_comp_modifier_concept.html

Related Topic