Magento 2 - How to make a dynamic dropdown in custom checkout module

Question

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!

Answer 1

1. specify plugin at di.xml <plugin name="yourname-intercept-checkout" type="Vendor\Module\Plugin\Checkout\Block\LayoutProcessor"

            disabled="false"/>
   

2. class LayoutProcessor public function afterProcess($subject, $jsLayout) {

$options[] = ['label' => 'Hi', 'value'=> 1]; $jsLayout['components']['checkout']['children']['steps']['children']['connect-step']['children']['connect-form-fieldset']['children']['YOURSELECTNAME']['options'] = $options;

return $jsLayout; }

Answer 2

Thanks for the answer but I found a solution here:

https://github.com/sbodak/magento2-checkout-custom-form/tree/feature/dynamic-select-options

Good luck!