Skip to content

How to use base Magento’s form element checkbox in custom template?

Magento 2.4.6
// vendor/module-user-access-control-admin-ui/view/adminhtml/ui_component/customer_form.xml

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="test_control">
 <!-- Profile field -->
        <field name="profile"
               formElement="select"
               component="Vendor_UserAccessControlAdminUi/js/form/element/profile">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filterOptions" xsi:type="boolean">false</item>
                    <item name="multiple" xsi:type="boolean">false</item>
                </item>
            </argument>
            <settings>
                <label translate="true">Access profile</label>
                <elementTmpl>Vendor_UserAccessControlAdminUi/form/element/profile</elementTmpl>                
            </settings>
        </field>
<field formElement="checkbox" name="is_profile">
            <settings>
                <dataType>boolean</dataType>
                <dataScope>is_profile</dataScope>
                <label translate="true">Is Profile</label>
                <notice translate="true">Check this box to add the Companies field to the form.</notice>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="string">0</map>
                            <map name="true" xsi:type="string">1</map>
                        </valueMap>
                        <prefer>toggle</prefer>                        
                    </settings>
                </checkbox>
            </formElements>            
        </field>
        </fieldset>
</form>

// vendor/module-user-access-control-admin-ui/view/adminhtml/web/js/form/element/profile.js

define([
    'Magento_Ui/js/form/element/ui-select',
    'ko'
], function (Element, ko) {
    'use strict';    

    return Element.extend({
        defaults: {
            isProfileChecked: ko.observable(true)
        },

        /**
         * Initializes the component.
         *
         * @returns {Object}
         */
        initialize: function () {
            this._super();
            return this;
        }
    });
});

// vendor/module-user-access-control-admin-ui/view/adminhtml/web/template/form/element/profile.html

<div id='test'>Some Content</div>

How to move the base Magento’s checkbox toggle with settings from UI Component Configuration customer_form.xml to custom template profile.html after that div id=’test’?

I’ve tried in profile.html:

<div id='test'>Some Content</div>
<div data-bind="template: { name: 'Magento_Ui/templates/form/components/single/switcher' }"></div>

but got

[ERROR] Failed to load the "Magento_Ui/templates/form/components/single/switcher" template requested by "access_control.profile".