Input image
Renders an image input field.
Node name : input-image
Note
The image component only displays an image. To change the image stored in the property it is linked to, the developer must provide an action to show the file selection dialog.
Check this article to see an example.
Attributes
Bound
| Attribute | Type | Required | Default value | Description |
|---|---|---|---|---|
| property-name | string |
true |
UI view property name | |
| item | UI view | false |
@DatasourceCurrent |
Item to be bound to |
Unbound
| Attribute | Type | Required | Default value | Description |
|---|---|---|---|---|
| value | FileReference |
true |
Input value. | |
| label | string |
false |
Input label. | |
| disabled | bool |
false |
false |
Value indicating whether the input is disabled |
| readonly | bool |
false |
false |
Value indicating whether the input is read-only. |
| required | bool |
false |
false |
Value indicating whether the input is required. |
| message-text | string |
false |
Additional message displayed next to the component. Usually a warning or an error message. | |
| message-severity | string (information, warning, error) |
false |
Severity of the additional message displayed next to the component. | |
| documentation | string |
false |
Documentation | |
| tab-stop | bool |
false |
true |
Value indicating whether the input can be focused using the Tab key. |
| value-changed | string |
false |
Name of the method called when the value has changed. The first parameter is the value and the second is the current item of the data source (DatasourceCurrent) or the iterated item in a repeat component. |
Common
| Attribute | Type | Required | Default value | Description |
|---|---|---|---|---|
| label-position | string (top, left, right, hidden) |
false |
top |
Input label position. |
| message-position | string (bottom, hidden) |
false |
bottom |
Input message position. |
| focused | bool |
false |
false |
Value indicating whether the component is focused. |
| delegated-loading | bool |
false |
true |
When the value of this attribute is true, the image is loaded in the context of the owner. |
Note
When the delegated-loading attribute is set to true, the image will be loaded in the context of the owner, so all http headers will be sent to the server.
This new implementation of the component is from 1.21.0 and should not generate any changes, otherwise you can restore the previous implementation by adding the attribute delegated-loading=false
Examples
Bound
<input-image property-name="Image" />
Unbound
<input-image value="@Fields.Image" label="myLabel" disabled="true" readonly="true" required="true"/>