浏览文章

  1. Weline论坛
  2. 文章列表
  3. 查看文章

文章信息

Magento2 UI 常用form字段类型 | Magento2 UI 复杂字段 | Magento2 UI form fields 10666

1、Checkbox选择组件

<field name="is_active" formElement="checkbox">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="source" xsi:type="string">SocialInfluencer</item>
        </item>
    </argument>
    <settings>
        <label translate="true">是否置顶</label>
        <tooltip>
            <description translate="true">启用则生效，不启用则不生效！</description>
        </tooltip>
        <validation>
            <rule name="required-entry" xsi:type="boolean">true</rule>
        </validation>
        <dataType>boolean</dataType>
        <dataScope>is_active</dataScope>
    </settings>
    <formElements>
        <checkbox>
            <settings>
                <prefer>toggle</prefer>
                <valueMap>
                    <map name="false" xsi:type="string">0</map>
                    <map name="true" xsi:type="string">1</map>
                </valueMap>
            </settings>
        </checkbox>
    </formElements>
</field>

2、多选复选框

<field name="stores" formElement="multiselect" sortOrder="100">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="source" xsi:type="string">SocialInfluencer</item>
        </item>
    </argument>
    <settings>
        <dataType>text</dataType>
        <dataScope>stores</dataScope>
        <dataType>text</dataType>
        <label translate="true">选择关联店铺</label>
        <validation>
            <rule name="required-entry" xsi:type="boolean">true</rule>
        </validation>
        <visible>true</visible>
    </settings>
    <formElements>
        <multiselect>
            <settings>
                <options class="Magento\Store\Model\System\Store"/>
            </settings>
        </multiselect>
    </formElements>
</field>

3、图像输入框（直接保存json到字段，预览时在DataProvider中将字段json_decode）

<field name="avatar" sortOrder="130" formElement="imageUploader">
	<argument name="data" xsi:type="array">
		<item name="config" xsi:type="array">
			<item name="source" xsi:type="string">SocialInfluencer</item>
		</item>
	</argument>
	<settings>
		<elementTmpl>ui/form/element/uploader/image</elementTmpl>
		<dataType>string</dataType>
		<dataScope>avatar</dataScope>
		<label translate="true">头像</label>
		<visible>true</visible>
		<required>true</required>
	</settings>
	<formElements>
		<imageUploader>
			<settings>
				<required>true</required>
				<uploaderConfig>
					<param xsi:type="url" name="url" path="aiweline_socialinfluencermarketing/image/upload"/>
				</uploaderConfig>
				<previewTmpl>Magento_Catalog/image-preview</previewTmpl>
				<openDialogTitle>Media Gallery</openDialogTitle>
				<initialMediaGalleryOpenSubpath>Aiweline/SocialInfluencerMarketing</initialMediaGalleryOpenSubpath>
				<allowedExtensions>jpg jpeg gif png</allowedExtensions>
				<maxFileSize>4194304</maxFileSize>
			</settings>
		</imageUploader>
	</formElements>
</field>

4、复杂动态记录dynamicRows字段

<dynamicRows name="images">
    <settings>
        <addButtonLabel translate="true">添加搭配图片</addButtonLabel>
        <additionalClasses>
            <class name="admin__field-wide">true</class>
        </additionalClasses>
        <componentType>dynamicRows</componentType>
    </settings>
    <container name="record" component="Magento_Ui/js/dynamic-rows/record">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="isTemplate" xsi:type="boolean">true</item>
                <item name="is_collection" xsi:type="boolean">true</item>
                <item name="componentType" xsi:type="string">container</item>
            </item>
        </argument>
        <field name="pre_style_image" sortOrder="40" formElement="imageUploader">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">general</item>
                </item>
            </argument>
            <settings>
                <elementTmpl>ui/form/element/uploader/image</elementTmpl>
                <dataType>string</dataType>
                <label translate="true">搭配图片</label>
                <visible>true</visible>
                <required>false</required>
            </settings>
            <formElements>
                <imageUploader>
                    <settings>
                        <required>false</required>
                        <uploaderConfig>
                            <param xsi:type="url" name="url" path="howtostyle/image/upload"/>
                        </uploaderConfig>
                        <previewTmpl>Magento_Catalog/image-preview</previewTmpl>
                        <openDialogTitle>Media Gallery</openDialogTitle>
                        <initialMediaGalleryOpenSubpath>Aiweline/HowToStyle</initialMediaGalleryOpenSubpath>
                        <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                        <maxFileSize>4194304</maxFileSize>
                    </settings>
                </imageUploader>
            </formElements>
        </field>
        <field name="stores" formElement="multiselect">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">rule</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="visibleValue" xsi:type="string">1</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">选择关联店铺</label>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <visible>false</visible>
            </settings>
            <formElements>
                <multiselect>
                    <settings>
                        <options class="Magento\Store\Model\System\Store"/>
                    </settings>
                </multiselect>
            </formElements>
        </field>
        <field name="desc" formElement="textarea">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="cols" xsi:type="number">15</item>
                    <item name="rows" xsi:type="number">5</item>
                    <item name="label" translate="true" xsi:type="string">简述（128字符）</item>
                    <item name="dataType" translate="true" xsi:type="string">text</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">false</rule>
                    <rule name="max_text_length" xsi:type="number">128</rule>
                    <rule name="min_text_length" xsi:type="number">10</rule>
                </validation>
            </settings>
        </field>
        <field name="description" formElement="textarea">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="cols" xsi:type="number">15</item>
                    <item name="rows" xsi:type="number">10</item>
                    <item name="label" translate="true" xsi:type="string">内容（1000字以内）</item>
                    <item name="dataType" translate="true" xsi:type="string">text</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">false</rule>
                    <rule name="max_text_length" xsi:type="number">1000</rule>
                    <rule name="min_text_length" xsi:type="number">10</rule>
                </validation>
            </settings>
        </field>
        <field name="is_active" formElement="checkbox">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="default" xsi:type="string">1</item>
                </item>
            </argument>
            <settings>
                <label translate="true">启用状态</label>
                <tooltip>
                    <description translate="true">启用则生效，不启用则不生效！</description>
                </tooltip>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <prefer>toggle</prefer>
                        <valueMap>
                            <map name="true" xsi:type="string">1</map>
                            <map name="false" xsi:type="string">0</map>
                        </valueMap>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <field name="is_top" formElement="checkbox">
            <settings>
                <label translate="true">是否置顶</label>
                <tooltip>
                    <description translate="true">启用则生效：置顶到首页，不启用则不生效！</description>
                </tooltip>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <prefer>toggle</prefer>
                        <valueMap>
                            <map name="true" xsi:type="string">1</map>
                            <map name="false" xsi:type="string">0</map>
                        </valueMap>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <actionDelete template="Magento_Backend/dynamic-rows/cells/action-delete">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="fit" xsi:type="boolean">false</item>
                </item>
            </argument>
            <settings>
                <additionalClasses>
                    <class name="some-class">true</class>
                </additionalClasses>
                <dataType>text</dataType>
                <label>Actions</label>
                <componentType>actionDelete</componentType>
            </settings>
        </actionDelete>
    </container>
</dynamicRows>

5、下拉选择select

<field name="type" formElement="select">
    <settings>
        <dataType>text</dataType>
        <label translate="true">网红类型</label>
        <dataScope>type</dataScope>
    </settings>
    <formElements>
        <select>
            <settings>
                <options>
                    <option name="1" xsi:type="array">
                        <item name="value" xsi:type="string">artist</item>
                        <item name="label" xsi:type="string">Artist</item>
                    </option>
                    <option name="2" xsi:type="array">
                        <item name="value" xsi:type="string">star</item>
                        <item name="label" xsi:type="string">Star</item>
                    </option>
                    <option name="3" xsi:type="array">
                        <item name="value" xsi:type="string">other</item>
                        <item name="label" xsi:type="string">Other</item>
                    </option>
                </options>
                <caption translate="true">-- Please Select --</caption>
            </settings>
        </select>
    </formElements>
</field>

6、时间选择

<field name="created_at" formElement="date" sortOrder="120">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="source" xsi:type="string">SocialInfluencer</item>
            <item name="options" xsi:type="array">
                <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
                <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
                <item name="showsTime" xsi:type="boolean">true</item>
                <item name="timeOnly" xsi:type="boolean">false</item>
            </item>
        </item>
    </argument>
    <settings>
        <!--<disabled>1</disabled>-->
        <!--<validation>
            <rule name="validate-date" xsi:type="boolean">false</rule>
        </validation>-->
        <dataType>text</dataType>
        <label translate="true">Created At</label>
        <visible>true</visible>
        <dataScope>created_at</dataScope>
    </settings>
</field>


原创
返回