I want to create smth like this in adminhtml:

UI sample

This page contains form to type customer ID & grid to display downline data for the customer.

This is my description of the form component:


<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">downline_select.downline_select_ds</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>

            <button name="save" class="Vendor\Module\Block\Adminhtml\Bonus\Downline\Button\Get"/>

    <dataSource name="downline_select_ds">
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Vendor_Module/js/form/provider/downline</item>
            <submitUrl path="module/downline/post"/>
        <dataProvider class="Vendor\Module\App\Ui\DataProvider\Base"

    <fieldset name="customer_select">

        <field name="cust_id" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">block</item>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                <label translate="true">Customer ID</label>


        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="autoRender" xsi:type="string">true</item>
                <item name="ns" xsi:type="string">downline_grid</item>


The problem is that when I use:

<item name="template" xsi:type="string">templates/form/collapsible</item>

the nested listing is displayed on the page but form data (Customer ID) is not saved on "Get Downline" action


     * Saves currently available data.
     * @param {Object} [options] - Addtitional request options.
     * @returns {Provider} Chainable.
    save: function (options) {
        var data = this.get('data');

        this.client.save(data, options);

        return this;

data is undefined in save().

But when I use


in ./view/adminhtml/ui_component/downline_select.xml and comment templates/form/collapsible I can get form data in save() but nested grid is not displayed. The error:

layout.js:404 Uncaught TypeError: container.insertChild is not a function
    at layout.js:404
    at Registry._resolveRequest (registry.js:418)
    at Array.forEach (<anonymous>)
    at Registry._updateRequests (registry.js:400)
    at later (underscore.js:821)

is appeared in the browser when I load my page in adminhtml.

How can I use form and grid both in one page?

1 Answer 1


I am not sure it will work or not but you can try this.

<?xml version="1.0" encoding="UTF-8"?>
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceContainer name="content">
            <uiComponent name="ui_form"/>
            <uiComponent name="ui_listing"/>

I didn't try anything like this before but you should try once, please let me know if you face any issue.

  • oh great, I also learnt a new thing from this :) Oct 26, 2018 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.