1

I have a custom module that uses most of the sample form in the Magento 2 docs for a static form - https://devdocs.magento.com/guides/v2.3/howdoi/checkout/checkout_form.html

I need to have the select box be filled from data from other input from the admin. I have the Dynamic Rows working, saving data, converting the serialized array and it is ready for input. The trouble is I cannot get the values into the field.

Here is my checkout_index_index.xml. I am calling the class Options to populate the select box values. The code for the class is most of the way down:

<item name="custom-checkout-form" xsi:type="array">
    <item name="component" xsi:type="string">uiComponent</item>
    <item name="displayArea" xsi:type="string">custom-checkout-form</item>
    <item name="children" xsi:type="array">
        <item name="custom-checkout-form-container" xsi:type="array">
            <item name="sortOrder" xsi:type="string">0</item>
            <item name="component" xsi:type="string">Vendor_Module/js/view/checkout/custom-checkout-form</item>
            <item name="provider" xsi:type="string">checkoutProvider</item>
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">Vendor_Module/checkout/custom-checkout-form</item>
            </item>
            <item name="children" xsi:type="array">
                <item name="custom-checkout-form-fieldset" xsi:type="array">
                    <item name="component" xsi:type="string">uiComponent</item>
                    <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
                    <item name="children" xsi:type="array">
                        <item name="checkout_buyer_name" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                            <item name="config" xsi:type="array">
                                <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                <item name="template" xsi:type="string">ui/form/field</item>
                                <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                            </item>
                            <item name="provider" xsi:type="string">checkoutProvider</item>
                            <item name="dataScope" xsi:type="string">customCheckoutForm.checkout_buyer_name</item>
                            <item name="label" xsi:type="string">Buyer name</item>
                            <item name="sortOrder" xsi:type="string">1</item>
                        </item>
                        <item name="checkout_buyer_email" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                            <item name="config" xsi:type="array">
                                <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                <item name="template" xsi:type="string">ui/form/field</item>
                                <item name="elementTmpl" xsi:type="string">ui/form/element/email</item>
                                <item name="tooltip" xsi:type="array">
                                    <item name="description" xsi:type="string" translate="true">We will send an order confirmation to this email address</item>
                                </item>
                            </item>
                            <item name="provider" xsi:type="string">checkoutProvider</item>
                            <item name="dataScope" xsi:type="string">customCheckoutForm.checkout_buyer_email</item>
                            <item name="label" xsi:type="string">Buyer email</item>
                            <item name="sortOrder" xsi:type="string">2</item>
                            <item name="validation" xsi:type="array">
                                <item name="validate-email" xsi:type="boolean">true</item>
                            </item>
                        </item>
                        <item name="checkout_purchase_order_no" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                            <item name="config" xsi:type="array">
                                <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                <item name="template" xsi:type="string">ui/form/field</item>
                                <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                            </item>
                            <item name="validation" xsi:type="array">
                                <item name="required-entry" xsi:type="boolean">true</item>
                            </item>
                            <item name="provider" xsi:type="string">checkoutProvider</item>
                            <item name="dataScope" xsi:type="string">customCheckoutForm.checkout_purchase_order_no</item>
                            <item name="label" xsi:type="string">Purchase order no.</item>
                            <item name="sortOrder" xsi:type="string">3</item>
                        </item>
                        <item name="checkout_goods_mark" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                            <item name="config" xsi:type="array">
                                <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                <item name="template" xsi:type="string">ui/form/field</item>
                                <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                            </item>
                            <item name="provider" xsi:type="string">checkoutProvider</item>
                            <item name="dataScope" xsi:type="string">customCheckoutForm.checkout_goods_mark</item>
                            <item name="label" xsi:type="string">Goods mark</item>
                            <item name="sortOrder" xsi:type="string">4</item>
                        </item>



                        <item name="checkout_building_address" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
                            <item name="config" xsi:type="array">
                              <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
                              <item name="customScope" xsi:type="string">customCheckoutForm</item>
                              <item name="template" xsi:type="string">ui/form/field</item>
                              <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
                            </item>


                            <item name="options" xsi:type="object">Vendor\Module\Model\Options\Options</item>


                            <!-- value element allows to specify default value of the form field -->
                            <item name="value" xsi:type="string">Please Select Value</item>
                            <item name="provider" xsi:type="string">checkoutProvider</item>
                            <item name="dataScope" xsi:type="string">customCheckoutForm.checkout_building_address</item>
                            <item name="label" xsi:type="string">Select Building Address</item>
                            <item name="sortOrder" xsi:type="string">2</item>
                        </item>



                        <item name="checkout_comment" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                            <item name="config" xsi:type="array">
                                <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                <item name="template" xsi:type="string">ui/form/field</item>
                                <item name="elementTmpl" xsi:type="string">ui/form/element/textarea</item>
                                <item name="cols" xsi:type="string">15</item>
                                <item name="rows" xsi:type="string">2</item>
                            </item>
                            <item name="provider" xsi:type="string">checkoutProvider</item>
                            <item name="dataScope" xsi:type="string">customCheckoutForm.checkout_comment</item>
                            <item name="label" xsi:type="string">Comment</item>
                            <item name="sortOrder" xsi:type="string">5</item>
                        </item>
                    </item>
                </item>
            </item>
        </item>
    </item>
</item>
</item>

Here is my class Options using default values as a test:

namespace Vendor\Module\Model\Options;

use Magento\Framework\Data\OptionSourceInterface;
use Magento\Framework\View\Element\Block\ArgumentInterface;

class Options implements OptionSourceInterface, ArgumentInterface
{
    /**
     * @return array
     */
    public function toOptionArray()
    {
        $options = [
            [
                'value' => '1',
                'label' => 'Option 1'
            ],
            [
                'value' => '2',
                'label' => 'Option 2'
            ],
            [
                'value' => '3',
                'label' => 'Option 3'
            ],
            [
                'value' => '4',
                'label' => 'Option 4'
            ]
        ];

        return $options;
    }
}

The drop down box appears but no values are in the fields. What am I doing wrong?

Thanks!

Your Answer

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

Browse other questions tagged or ask your own question.