Today, I am coming with a very interesting topic that is How you can create the UI component form without database collection, so let’s check it out How you can do this!
As you know, to create UI form first we are creating setup script and create model files then we will start with the UI form but now we will first create UI form and data provider file which help to us for achieving this functionality.
Quick Tip:- Access Uploaded Files Using Magento Framework
Let’s check 2 simple steps:
Step 1: First, create the ui_component file in the following location
app/code/[Namespace]/[Module]/view/adminhtml/ui_component/test_test_form.xml
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">namespace_module_form.namespace_module_form_data_source</item>
<item name="deps" xsi:type="string">namespace_module_form.namespace_module_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Rfq Information</item>
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">namespace_module_form</item>
</item>
<item name="buttons" xsi:type="array">
<item name="back" xsi:type="array">
<item name="name" xsi:type="string">Back</item>
<item name="label" xsi:type="string" translate="true">Back</item>
<item name="class" xsi:type="string">back</item>
<item name="url" xsi:type="string">*/*/index</item>
</item>
<item name="save" xsi:type="array">
<item name="name" xsi:type="string">Save</item>
<item name="label" xsi:type="string" translate="true">Save</item>
<item name="class" xsi:type="string">save primary</item>
<item name="url" xsi:type="string">*/*/save</item>
</item>
</item>
<item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>
<dataSource name="namespace_module_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">[Namespace]\[Module]\Model\DataProvider</argument>
<argument name="name" xsi:type="string">namespace_module_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="test/test/save/"/>
</item>
</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
</item>
</argument>
</dataSource>
<fieldset name="category_duplicate_details">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="collapsible" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">Test Options</item>
<item name="sortOrder" xsi:type="number">10</item>
</item>
</argument>
<field name="test" formElement="select">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">Test Field</item>
<item name="default" xsi:type="string">0</item>
</item>
</argument>
<settings>
<dataType>boolean</dataType>
<label translate="true">Test Field</label>
<dataScope>test</dataScope>
</settings>
<formElements>
<select>
<settings>
<options class="Magento\Config\Model\Config\Source\Yesno"/>
</settings>
</select>
</formElements>
</field>
</fieldset>
</form>
As you can see in the above UI component form file, we have created one UI Component file which has only one test field which has one data provider file.
Step 2: Now, create the Data provider file in the following location
app/code/[Namespace]/[Module]/Model/DataProvider
<?php
namespace [Namespace]\[Module]\Model;
class DataProvider extends \Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider
{
public function getData()
{
return [];
}
}
In the above data provider file which is called from the UI component file its returns null data so, we don’t need to call any collections.
Just try it above code and share your view in the comment box.
Thanks for reading this post!
