Какие типы макетов существуют для компонента формы пользовательского интерфейса?
Какие типы макетов существуют для компонента формы пользовательского интерфейса?
Пример в документации (http://devdocs.magento.com/guides/v2.2/ui_comp_guide/components/ui-form.html ) имеют тип tabs:
<item name="layout" xsi:type="array">
<item name="type" xsi:type="string">tabs</item>
<item name="navContainerName" xsi:type="string">left</item>
</item>
Хотя и в другом синтаксисе, фактический файл формы клиента (vendor/magento/module-customer/view/base/ui_component/customer_form.xml ) определяет одно и то же значение:
<layout>
<navContainerName>left</navContainerName>
<type>tabs</type>
</layout>
Для меня такая конфигурация приводит к выводу сообщения об ошибке: "Нет элемент найден с идентификатором "слева".". Я предполагаю, что это связано с типом компонента формы "вкладки", в котором есть форма с вкладками, прикрепленная к какому-либо "левому" контейнеру в Admin, однако я хочу добавить форму на интерфейсной странице, и мне не нужны вкладки.
2 answers
Прямой ответ на ваш вопрос - задать макет страницы в XML-файле макета для вашей страницы. В XML-файле макета, содержащем <uiComponent/>, установите атрибут layout в корневом узле <page/>, например:
<page layout="admin-2columns-left" />
Это просто создаст еще одну проблему, однако, с ошибкой Javascript в отношении "источника". Это исправляется путем добавления deps в источник данных формы:
<settings>
<layout>
<navContainerName>left</navContainerName>
<type>tabs</type>
</layout>
<deps>
<dep>referral_form.referral_form_data_source</dep>
</deps>
</settings>
Наконец, второй предоставленный вами блок кода - это синтаксис компонента пользовательского интерфейса Magento 2.2. Он обеспечивает гораздо более короткий способ ввести то же самое. Сравните краткое <type> с более длинным <item name="type" xsi:type="string"> в первом фрагменте.
Для более полного представления о том, как должен выглядеть компонент пользовательского интерфейса с вкладками, обратитесь к этому ответу: https://magento.stackexchange.com/a/246035/1929.
Это всего лишь образец, а не полезный код.
Если вы хотите посмотреть, как это работает, используйте модуль образца формы отсюда:
Https://github.com/magento/magento2-samples/tree/master/sample-module-form-uicomponent