Magento 2 - Custom UI Component on checkout page

Question

I'm creating an extension that modifies the checkout page. What I want to do is create a custom textarea with some additional classes and a wrapper class. I used the default textarea UI Component as a base.

How can I use this new component in my checkout page?

What I did so far:

Create an extension: Silvan\Checkout, added class Comment.php in Silvan\Checkout\Component\Form\Element and created file view/frontend/ui_component/etc/definition.xml:

<?xml version="1.0" encoding="UTF-8"?>
<components xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_definition.xsd">
    <comment class="Silvan\Checkout\Component\Form\Element\Comment">
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Silvan_Checkout/js/form/element/comment</item>
                <item name="config" xsi:type="array">
                    <item name="template" xsi:type="string">ui/form/field</item>
                    <item name="elementTmpl" xsi:type="string">ui/form/element/comment</item>
                </item>
            </item>
        </argument>
    </comment>
</components>

view/frontend/web/js/form/element/comment.js

define([
    './abstract'
], function (Abstract) {
    'use strict';

    return Abstract.extend({
        defaults: {
            cols: 15,
            rows: 2,
            template: 'ui/form/element/comment'
        }
    });
});

view/frontend/web/templates/form/element/comment.html

<div class="c-checkout-form--comments">

    <div class="c-checkout-form__title h5">
        Opmerking bij bestelling
    </div>
    <!-- /.h5 -->

    <div class="form__group">
        <textarea class="form__text--full-width form__text--bg-gray" data-bind="
            value: value,
            hasFocus: focused,
            attr: {
                name: inputName,
                cols: cols,
                rows: rows,
                'aria-describedby': noticeId,
                placeholder: placeholder,
                id: uid
            }"
        />
    </div>
    <!-- /.form__group -->
</div>

Then I try to use the component in my checkout page under shipping-address-fieldset/children:

<item name="order_comment" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="component" xsi:type="string">Silvan_Checkout/js/form/element/comment</item>
        <item name="config" xsi:type="array">
            <item name="template" xsi:type="string">ui/form/field</item>
            <item name="elementTmpl" xsi:type="string">ui/form/element/comment</item>
        </item>
    </item>
</item>

Answer 1

Magento 2 documentation has now been updated to answer your question, they cover more areas which may help too:

http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_overview.html

However, they have a section specifically on adding a form (where you can gleam how to add a field using the same method).

http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html

The most pressing issue that you first must understand is that the methodology for adding the component or input depends upon whether the form is static or generated dynamically. The address fields in checkout are generated dynamically whereas the above link (adding a form) shows how to add a static form (or fields) by adding your uiComponents with the xml layout.

Adding a field to a dynamically generated form will mean a plugin on the checkout layout processor* and modifying an array through at least ten keys for some reason. More details in link below:

http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_field.html

• Layout Processor: \Magento\Checkout\Block\Checkout\LayoutProcessor