Hjdcti

I'm looking for an explanation about how the multi-select "available_sort_by" get data.

Like you can see in the image below, they are using UI component to render this multi-select. And I don't understand how did they get the data.

I think they use "available_sort_by" column in somewhere. But I couldn't find them.

So here is the code:

C:xampphtdocsmagentovendormagentomodule-catalogviewadminhtmlui_componentcategory_form.xml

<container name="available_sort_by_group" 

component="Magento_Ui/js/form/components/group" sortOrder="90">
 <argument name="data" xsi:type="array">
 <item name="type" xsi:type="string">group</item>
 <item name="config" xsi:type="array">
 <item name="breakLine" xsi:type="boolean">true</item>
 <item name="required" xsi:type="boolean">true</item>
 </item>
 </argument>
 <field name="available_sort_by" formElement="multiselect">
 <!--<argument name="data" xsi:type="array">-->
 <!--<item name="config" xsi:type="array">-->
 <!--<item name="source" xsi:type="string">category</item>-->
 <!--</item>-->
 <!--</argument>-->
 <settings>
 <additionalClasses>
 <class name="admin__field-default">true</class>
 </additionalClasses>
 <label translate="true">Available Product Listing Sort By</label>
 </settings>
 </field>
 <field name="use_config.available_sort_by" formElement="checkbox">
 <settings>
 <dataType>boolean</dataType>
 <exports>
 <link name="checked">ns = $ $.ns , index = available_sort_by :disabled</link>
 </exports>
 </settings>
 <formElements>
 <checkbox>
 <settings>
 <description translate="true">Use All</description>
 <valueMap>
 <map name="false" xsi:type="boolean">false</map>
 <map name="true" xsi:type="boolean">true</map>
 </valueMap>
 </settings>
 </checkbox>
 </formElements>
 </field>
 </container>

Thanks for reading. Have a good day :)

EDIT 1:

So i've try this query in mysql to search which table contain column "available_sort_by", but it return empty.

Here is the query:

SELECT DISTINCT TABLE_NAME 
FROM INFORMATION_SCHEMA.COLUMNS
WHERE COLUMN_NAME IN ('available_sort_by')
AND TABLE_SCHEMA='magento';

My table named "magento".

And this is the correct query to find which table contain column "X". Because i've try it with my column named "banner_id", and it work perfectly.

EDIT 2:

So i have found some answer and related to it, i'm doing my multi select.

But i dont know why its not run into the toOptionArray() function. But it can go to the __construct() function.

So here is the code:

C:xampphtdocsmagentoappcodeAhtBannerSliderviewadminhtmlui_componentbanner_form.xml

<container name="banner_page_group" component="Magento_Ui/js/form/components/group" sortOrder="40">
 <argument name="data" xsi:type="array">
 <item name="type" xsi:type="string">group</item>
 <item name="options" xsi:type="object">AhtBannerSliderModelPagePageSource</item>
 <item name="config" xsi:type="array">
 <item name="breakLine" xsi:type="boolean">true</item>
 <item name="required" xsi:type="boolean">true</item>
 </item>
 </argument>
 <field name="banner_page" formElement="multiselect">
 <settings>
 <additionalClasses>
 <class name="admin__field-default">true</class>
 </additionalClasses>
 <label translate="true">Banner Page</label>
 </settings>
 </field>
 <field name="use_config.banner_page" formElement="checkbox">
 <settings>
 <dataType>boolean</dataType>
 <exports>
 <link name="checked">ns = $ $.ns , index = banner_page :disabled</link>
 </exports>
 </settings>
 <formElements>
 <checkbox>
 <settings>
 <description translate="true">Use All</description>
 <valueMap>
 <map name="false" xsi:type="boolean">false</map>
 <map name="true" xsi:type="boolean">true</map>
 </valueMap>
 </settings>
 </checkbox>
 </formElements>
 </field>
 </container>

C:xampphtdocsmagentoappcodeAhtBannerSliderModelPagePageSource.php

<?php

namespace AhtBannerSliderModelPage;

use AhtBannerSliderModelResourceModelPageCollectionFactory;

class PageSource implements MagentoFrameworkDataOptionSourceInterface

// protected $pageCollectionFactory;

// public function __construct(CollectionFactory $pageCollectionFactory)
// 
// $this->pageCollectionFactory = $pageCollectionFactory;
// 

 public function toOptionArray()
 
 return [
 [
 'value' => '1',
 'label' => 'Default Level',
 ],
 [
 'value' => '2',
 'label' => 'Store Level',
 ],
 ];
 

// public function toOptionArray()
// 
// $page = $this->pageCollectionFactory->create();
// $options = [];
// foreach ($page as $rows) 
// $options[] = [
// 'label' => $rows->getName(),
// 'value' => $rows->getId()
// ];
// 
// return $options;
// 

I've try both way, and try to debug with xdebug too, but it doesn't go to toOptionArray() function.

EDIT 3:

Solved: I've found the true answer, and this is the perfect code (i thing).

<container name="banner_page_group" component="Magento_Ui/js/form/components/group" sortOrder="40">
 <field name="banner_page">
 <argument name="data" xsi:type="array">
 <item name="type" xsi:type="string">group</item>
 <item name="config" xsi:type="array">
 <item name="breakLine" xsi:type="boolean">true</item>
 <item name="required" xsi:type="boolean">true</item>
 <item name="formElement" xsi:type="string">multiselect</item>
 <item name="label" xsi:type="string">Banner Page</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 </item>
 <item name="options" xsi:type="object">AhtBannerSliderModelPagePageSource</item>
 </argument>
 </field>

 <!--check box "use all"-->
 <field name="use_config.banner_page" formElement="checkbox">
 <settings>
 <dataType>boolean</dataType>
 <exports>
 <link name="checked">ns = $ $.ns , index = banner_page :disabled</link>
 </exports>
 </settings>
 <formElements>
 <checkbox>
 <settings>
 <description translate="true">Use All</description>
 <valueMap>
 <map name="false" xsi:type="boolean">false</map>
 <map name="true" xsi:type="boolean">true</map>
 </valueMap>
 </settings>
 </checkbox>
 </formElements>
 </field>
 </container>

<?php

namespace AhtBannerSliderModelPage;

use AhtBannerSliderModelResourceModelPageCollectionFactory;

class PageSource implements MagentoFrameworkOptionArrayInterface

 protected $pageCollectionFactory;

 public function __construct(CollectionFactory $pageCollectionFactory)
 
 $this->pageCollectionFactory = $pageCollectionFactory;
 

 public function toOptionArray()
 
 $page = $this->pageCollectionFactory->create()->getData();
 $options = [];
 foreach ($page as $rows) 
 $options[] = [
 'label' => $rows['page_name'],
 'value' => $rows['id']
 ];
 
 return $options;
 

OKe. let me show you how to debug ui_component form.
First, you must know what is: dataSource.

class MagentoCatalogModelCategoryDataProvider where was define form data to load.

Find out these functions.

1.:

vendor/magento/module-catalog/Model/Category/DataProvider::getMeta

2.:
MagentoCatalogModelCategoryDataProvider::prepareMeta

3.:
MagentoCatalogModelCategoryDataProvider::getAttributesMeta

If you want to modify MetaData of DataProvider you must create a plugin (recommend) |Overide (not recommend) to modify data before or after DataProvider send to UiComponentFactory

Then let resolve your problem.
available_sort_by that is category attribute based EAV design you can't find the table has a column named available_sort_by. => Get it from eav_attribute => entity_type_id = 3 and attribute_code='available_sort_by'.

For EDIT 1:
You are defined options in the container, please use field instead.