Magento 2 UI Form Component – Available Layout Types

magento2.2uicomponent

What layout types are there for the UI form component?

The example in the documentation (http://devdocs.magento.com/guides/v2.2/ui_comp_guide/components/ui-form.html) have type tabs:

<item name="layout" xsi:type="array">
    <item name="type" xsi:type="string">tabs</item>
    <item name="navContainerName" xsi:type="string">left</item>
</item>

Although in a different syntax, the actual customer form file (vendor/magento/module-customer/view/base/ui_component/customer_form.xml) defines the same value:

<layout>
    <navContainerName>left</navContainerName>
    <type>tabs</type>
</layout>

For me, such configuration results in an error message output: "No element found with ID 'left'.". I guess, it's related to the "tabs" type of form component having a tabbed form with tabs attached to some "left" container in Admin, however, I want to add a form on a frontend page, and I don't need any tabs.

Best Answer

The direct answer to your question is to the set page layout in the layout XML for your page. On the layout XML file that includes the <uiComponent/>, set the layout attribute on the root <page/> node like:

<page layout="admin-2columns-left" />

This will just introduce another problem, though, with a Javascript error regarding a "source". This is fixed by adding a deps to the form's data source:

<settings>
    <layout>
        <navContainerName>left</navContainerName>
        <type>tabs</type>
    </layout>
    <deps>
        <dep>referral_form.referral_form_data_source</dep>
    </deps>
</settings>

Finally, the second block of code you provided is Magento 2.2 UI Component syntax. It provides a much shorter way to type the same thing. Compare, the succinct <type> with the longer <item name="type" xsi:type="string"> in the first snippet.

For a more complete picture of what the UI Component must look like with tabs, refer to this answer: https://magento.stackexchange.com/a/246035/1929.

Related Topic