1

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.

2

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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