What layout types are there for the UI form component?

Question

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.

Answer 1

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.

Answer 2

That is only a sample, not a usable code.

If you want to see, how is it work, use the sample form module from here:

https://github.com/magento/magento2-samples/tree/master/sample-module-form-uicomponent