Magento 2 : Form component

Text box component with suffix

Magento use ui component with suffix in product form for weight.
Following example shows how to use the suffix for a text ui component.

In xml

<field name="duration" formElement="input" component="Vasan_Bidding/js/form/components/duration">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">milestone</item>
                </item>
            </argument>
            <settings>
                <elementTmpl>Vasan_Bidding/form/element/duration_input</elementTmpl>
                <dataType>text</dataType>
                <visible>true</visible>
                <dataScope>duration</dataScope>
                <label translate="true">Duration</label>
            </settings>
        </field>

In JS file

define([
    'Magento_Ui/js/form/element/abstract'
], function (Element) {
    'use strict';

    return Element.extend({
        defaults: {
            suffix_text: 'minutes'
        }
    });
});

In html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="admin__control-addon">
    <input class="admin__control-text" 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,
            maxlength: 255

    }"/>
    <label class="admin__addon-suffix" data-bind="attr: { for: uid }"><span data-bind="text: suffix_text"></span></label>
</div>

vasan

Say thanks

Last edit

2022-03-24

vasan

Magento 2 : Form component

Adding searchable drop-down

Simply following steps to add searchable drop-down ui component in a form

1. Add element in form xml

<field name="rateselection" component="Vasan_Bidding/js/form/components/rate-select" formElement="...

Magento 2 : Form component

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=...

Magento 2 : Form component

Custom time component

Magento2 time component does not pass the selected time when post the form to controller.
Following custom time component is used to capture the time.

In form xml

<field name="start_time" formElement="input">
  ...

Magento 2 : Listing component amount formatting

Formatting amount column with currency symbol

The prices column can be be formatted to two decimal and currency symbol

Following example shows how to add formatting for a amount column.

/**
     * Prepare Data Source
     *
     * @par...

Magento2 : Admin Module Part 3

This section contains the edit UI components and layout xml files

Stesps :

Form ui components

create a file kpsaddress_index_lising.xml for grid under ui_component

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http...

Magento 2 : Form component

How to set a custom value to the field and make it disable

This requirement can be achieved using DataProvider class of the UI form component

/**
     * @inheritdoc
     */
    public function getMeta()
    {
        $meta = parent::get...

Magento 2 Tips: main.WARNING: Session size of 257209 exceeded allowed session max size of 256000.

This can be fixed by excuting folloing configuration.

./bin/magento config:set system/security/max_session_size_admin 512000
./bin/magento config:set system/security/max_session_size_storefront 512000

Magento 2 : Listing component

Date columns with date formatting

Following example shows how to use date component in listing

In xml

<column name="due_date" class="Magento\Ui\Component\Listing\Columns\Date">
            <argument name="data" xsi:type="array">
      ...

Posted by vasan to vasan's deck (2022-03-24 17:50)

Magento 2 : Form component

Related cards: