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>
|
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 |
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}"/>
|