Generic Field

A generic field with custom ui component

XML Configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Leonex_SiteBuilder:etc/lnx_sitebuilder.xsd">
    <element>
        ...
        <fields>
           ...
            <field code="field_code"
                    component="Leonex_SiteBuilderExample/js/js-component"
                    class="Leonex\SiteBuilderExample\ViewModel\Field\ComplexField"
                    position="1"
                    enabled="true"
                    list="false">
                <label translate="true">Custom Field</label>
                <placeholder translate="true">Custom Placeholder</placeholder>
                <tooltip translate="true">Custom Tooltip Text</tooltip>
                <notice translate="true">Custom Notice Text</notice>
                <validation>
                    <!-- Magento Validation Rules -->
                    <validate name="required-entry" enabled="true" />
                    <validate name="validate-digits" enabled="true" />
                </validation>
                <defaultValue>12</defaultValue>
            </field>
        </fields>
    </element>
</config>
Field Attribute Information
Name Value Type Default Value Required Description
component String No Default Value Yes A Javascript UI Component, which must extend lnxSiteBuilder/component/field/abstract. See JS Component.
code String No Default Value Yes Field Code, needs to be unique. Is used later in the template to get the data for this field.
class String / Php Class ScalarField [1] No Adds a custom Php ViewModel for this field. The Php Class must conform to the Leonex\SiteBuilder\Api\ViewModel\FieldInterface
position Integer MAX_INT No Position of the field inside the Element Configuration
enabled Boolean (“true” or “false”) true No Enables or Disables the field for the current element
list Boolean (“true” or “false”) false No If set to true the element can hold a list of the current field
[1]Namespace: Leonex\SiteBuilder\ViewModel\Field
Field Tag Information
Name Required Description
label Yes The Label of the field
tooltip No A Tooltip text which is shown left to the field
notice No A Notice which is shown below the field
validation No Validation Rules which should be applied to the filed value. A list of validation rules can be found here: https://mage2.pro/t/topic/356
defaultValue No The default Value of this element

UI Component

JS Component

1
2
3
4
5
6
7
define(['lnxSiteBuilder/component/field/abstract'], function (Component) {
    return Component.extend({
        defaults: {
            fieldElementTemplate: 'Leonex_SiteBuilderExample/field'
        }
    });
});

HTML Template

1
2
3
4
<p>A Custom Field Component...</p>
<input class="admin__control-text"
        type="text"
        data-bind="textInput: field().value, attr: {id: field().uniqueId}"/>