UI Components

Today I had to fix the following issue in a custom module. The error appeared on the UI Component list view.

Fatal error: Method Magento\Ui\TemplateEngine\Xhtml\Result::__toString() must not throw an exception, caught TypeError: Argument 1 passed to Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider::searchResultToOutput() must implement interface Magento\Framework\Api\Search\SearchResultInterface, instance of [Namespace]\[Module]\Model\ResourceModel\Team\Collection given, called in

Fatal error: Method Magento\Ui\TemplateEngine\Xhtml\Result::__toString() must not throw an exception, caught TypeError: Argument 1 passed to Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider::searchResultToOutput() must implement interface Magento\Framework\Api\Search\SearchResultInterface, instance of [Namespace]\[Module]\Model\ResourceModel\Team\Collection given, called in

I found the reason of the problem in the di.xml file. All what was missing was the following virtualType node. After adding this and re-compiling the code, the list view was fixed.

<virtualType name="[Namespace]\[Module]\Model\ResourceModel\Team\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
    <arguments>
        <argument name="mainTable" xsi:type="string">[namespace]_[module]_team</argument>
        <argument name="resourceModel" xsi:type="string">[Namespace]\[Module]\Model\ResourceModel\Team</argument>
    </arguments>
</virtualType>

<argument name="mainTable" xsi:type="string">[namespace]_[module]_team</argument>

<argument name="resourceModel" xsi:type="string">[Namespace]\[Module]\Model\ResourceModel\Team</argument>

</arguments>

</virtualType>

I tried to implement a simple field validation for a checkbox Apply Special Price which I needed on the Catalog > Product > Edit page. Unfortunately my first attempt below didn’t work and broke the whole grid table.

The requested component ("settings") is not found. Before using, you must add the implementation.

1	The requested component ("settings") is not found. Before using, you must add the implementation.

Here is how I have defined the field apply_special_price in category_form.xml based on different stackoverflow posts.

<field name="apply_special_price">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            ....
        </item>
    </argument>
    <settings>
        <validation>
            <rule name="required-entry" xsi:type="boolean">false</rule>
        </validation>
        <dataType>boolean</dataType>
    </settings>
    <formElements>
        <checkbox>
            <settings>
                <valueMap>
                    <map name="false" xsi:type="string">0</map>
                    <map name="true" xsi:type="string">1</map>
                </valueMap>
                <prefer>toggle</prefer>
            </settings>
        </checkbox>
    </formElements>
</field>

....

</item>

</argument>

<rule name="required-entry" xsi:type="boolean">false</rule>

</validation>

<dataType>boolean</dataType>

</settings>

</valueMap>

<prefer>toggle</prefer>

</settings>

</checkbox>

</formElements>

</field>

As I said, it didn’t work at all. So, I kept researching and found a solution which allowed me to implement the validation rule without the nodes <settings> and <formElements> inside of <field>.

<field name="apply_special_price">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">boolean</item>
            <item name="formElement" xsi:type="string">checkbox</item>
            <item name="source" xsi:type="string">category</item>
            <item name="label" xsi:type="string" translate="true">Apply Special Price</item>
            <item name="sortOrder" xsi:type="number">10</item>
            
            <item name="default" xsi:type="number">0</item>
            <item name="prefer" xsi:type="string">toggle</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">false</item>
            </item>
            <item name="valueMap" xsi:type="array">
                <item name="true" xsi:type="string">1</item>
                <item name="false" xsi:type="string">0</item>
            </item>
        </item>
    </argument>
</field>

<item name="dataType" xsi:type="string">boolean</item>

<item name="formElement" xsi:type="string">checkbox</item>

<item name="source" xsi:type="string">category</item>

<item name="label" xsi:type="string" translate="true">Apply Special Price</item>

<item name="prefer" xsi:type="string">toggle</item>

<item name="required-entry" xsi:type="boolean">false</item>

</item>

</item>

</argument>

</field>

Basically, everything has to be defined inside of config otherwise the XML for your custom UI component will be invalid. The section validation allows you to define filters for pretty much every use case. The example below sets a field as mandatory and detects white spaces. Beside that it will make sure the value matches a specific regex pattern.

<item name="validation" xsi:type="array">
    <item name="required-entry" xsi:type="boolean">false</item>
    <item name="no-whitespace" xsi:type="boolean">true</item>
    <item name="validate-pattern" xsi:type="string">/^[a-z][a-z0-9_.-]$/i</item>
</item>

<item name="required-entry" xsi:type="boolean">false</item>

</item>

More validation options are available out-of-the-box.

min_text_length
max_text_length
max-words
min-words
range-words
letters-with-basic-punc
alphanumeric
letters-only
no-whitespace
zip-range
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
stripped-min-length
email2
url2
credit-card-types
ipv4
ipv6
pattern
validate-no-html-tags
validate-select
validate-no-empty
validate-alphanum-with-spaces
validate-data
validate-street
validate-phoneStrict
validate-phoneLax
validate-fax
validate-email
validate-emailSender
validate-password
validate-admin-password
validate-url
validate-clean-url
validate-xml-identifier
validate-ssn
validate-zip-us
validate-date-au
validate-currency-dollar
validate-not-negative-number
validate-zero-or-greater
validate-greater-than-zero
validate-css-length
validate-number
validate-number-range
validate-digits
validate-digits-range
validate-range
validate-alpha
validate-code
validate-alphanum
validate-date
validate-identifier
validate-zip-international
validate-state
less-than-equals-to
greater-than-equals-to
validate-emails
validate-cc-number
validate-cc-ukss
required-entry
checked
not-negative-amount
validate-per-page-value-list
validate-new-password
validate-item-quantity
equalTo

min_text_length

max_text_length

max-words

min-words

range-words

letters-with-basic-punc

alphanumeric

letters-only

no-whitespace

zip-range

integer

vinUS

dateITA

dateNL

time

time12h

phoneUS

phoneUK

mobileUK

stripped-min-length

email2

url2

credit-card-types

ipv4

ipv6

pattern

validate-no-html-tags

validate-select

validate-no-empty

validate-alphanum-with-spaces

validate-data

validate-street

validate-phoneStrict

validate-phoneLax

validate-fax

validate-email

validate-emailSender

validate-password

validate-admin-password

validate-url

validate-clean-url

validate-xml-identifier

validate-ssn

validate-zip-us

validate-date-au

validate-currency-dollar

validate-not-negative-number

validate-zero-or-greater

validate-greater-than-zero

validate-css-length

validate-number

validate-number-range

validate-digits

validate-digits-range

validate-range

validate-alpha

validate-code

validate-alphanum

validate-date

validate-identifier

validate-zip-international

validate-state

less-than-equals-to

greater-than-equals-to

validate-emails

validate-cc-number

validate-cc-ukss

required-entry

checked

not-negative-amount

validate-per-page-value-list

validate-new-password

validate-item-quantity

equalTo

Tag: UI Components

UI Components and searchResultToOutput in Magento2

UI Component Listing And Not registered handle in Magento2

The requested component (“settings”) is not found. Before using, you must add the implementation.