6

I want to create a post form by using UI component, it has 2 selectbox, 1 submit button and URL to submit.

Currently, I use .xml layout and template .phtml to render html but I want use UI component because it look beautiful and professional.

What can I do? Thanks,

  • What Magento 2 version you are using? – Siarhey Uchukhlebau Dec 2 '16 at 4:55
  • I'm using Mage 2.1.1 – Henry Bui Dec 2 '16 at 5:45
  • @HenryBui have you found any alternative? – Knight017 Aug 3 at 16:33
  • @Knight017 not yet at that time. And I'm not working on Magento anymore. – Henry Bui Aug 7 at 6:50
1

You can refer sample provided my magento itself to create a form in ui-component

https://github.com/magento/magento2-samples/tree/master/sample-module-form-uicomponent

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/Ui/etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">sampleform_form.sampleform_form_data_source</item>
            <item name="deps" xsi:type="string">sampleform_form.sampleform_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Sample Form</item>
        <item name="layout" xsi:type="array">
            <item name="type" xsi:type="string">tabs</item>
        </item>
    </argument>

    <dataSource name="sampleform_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Magento\SampleForm\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">sampleform_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
            <argument name="requestFieldName" xsi:type="string">id</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="sample_fieldset">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Sample Fieldset</item>
            </item>
        </argument>

        <!-- This field represents form id and is hidden -->
        <field name="entity_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">sampleform</item>
                </item>
            </argument>
        </field>

        <!-- This field has data type 'text' and standard 'input' form element and looks like input -->
        <field name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Some text</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">sampleform</item>
                </item>
            </argument>
        </field>

        <!-- This field has data type 'text'
        and override standard 'input' form element's tempate and constructor by custom ones -->
        <field name="color">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <!--component constructor-->
                    <item name="component" xsi:type="string">Magento_SampleForm/js/form/element/color-select</item>
                    <!--main template for form field that renders elementTmpl as a child template-->
                    <item name="template" xsi:type="string">ui/form/field</item>
                    <!--customized form element template that will show colors-->
                    <item name="elementTmpl" xsi:type="string">Magento_SampleForm/form/element/color-select</item>
                    <item name="label" xsi:type="string">Autumn colors</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">sampleform</item>
                </item>
            </argument>
        </field>
     </fieldset>
 </form> 
  • 1
    Thanks, but I just want create a submit form to URL and don't use Model or interactive with database. – Henry Bui Dec 5 '16 at 1:30

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.