website logo
👥 Community🎯 Samples on GitHub🚦 System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Overview
Reference
Actions
Data
UI
Widgets
Docs powered by
Archbee
Reference
UI

jc-media-field

42min

The schema defines the following properties:

Property

Type

Required

Description

type

component.media-field

true



instanceId

string

true



when

Expression | boolean

false



options

Options

true



instanceId (string, required)

when (Expression | boolean)

options (Options, required)



Sub Schemas

The schema defines the following additional types:

Options (Media picker field options)

Properties of the Options object:

Property

Type

Required

Description

imageQuality

number | string

false

Image quality after compression (from 0 to 100, where 100 is the best quality). On iOS, values larger than 80 don't produce a noticeable quality increase in most images, while a value of 80 will reduce the file size by about half or less compared to a value of 100. Default: 100 (Android)/ 80 (iOS)

maximumFileSize

number | none | string

false

Maximum file size in bytes. Set to 'none' to disable size check. Default value is 6MB.

imageCropping

object

false

Image cropping options

label

string | Expression | TextWithFormat | TextLocale

true

Label is displayed as placeholder when no value.

icon

icon-name | string

false

Trailing icon.

helperText

string | Expression | TextWithFormat | TextLocale

false

Helper text is displayed only when there is no errorText.

errorText

string | Expression | TextWithFormat | TextLocale

false

Text displayed when field's value is not valid. When not empty it displays isNegative style as well.

style

Date Picker Style

false

More of them can be true. It will be evaluated based on priority.

isAutoFocused

boolean

false

If true it will get focus immediately after it is displayed to user.

isRequired

boolean | string

false

True when the field is required. Useful when you use it in form submission.

isOptionalLabelHidden

boolean | string

false

If the field is optional you can turn off the "(optional)" label if you want.

isIgnored

boolean | string

false

When true, the field will be ignored when submitting the form.

isHidden

boolean | string

false

If true it will be hidden to user.

initialValue

string | string[] | string

false

Initial value of the relevant field. You can use this to preset value, so user doesn't need to add anything and use this "default".

value

string | string[] | string

false

The value to show for the field. Text field is a controlled component, which means the internal value will be forced to match this value prop if provided. In most cases, you don't need to use this.

onChange

keg-action-in-background

false

Action Keg component that will be triggered when value is changed

nextProperty

string

false

Name of the property you want to focus next in form when you use "submit" on virtual keyboard.

color

object[]

false

Changing color of field based on conditions. First evaluated to true will be used.

isMultiple

boolean | string

false

Allow multiple file selection

mediaType

image | any | string

true



imageQuality (number | string)

Image quality after compression (from 0 to 100, where 100 is the best quality). On iOS, values larger than 80 don't produce a noticeable quality increase in most images, while a value of 80 will reduce the file size by about half or less compared to a value of 100. Default: 100 (Android)/ 80 (iOS)

The object must be any of the following types:

imageQuality (string)

maximumFileSize (number | none | string)

Maximum file size in bytes. Set to 'none' to disable size check. Default value is 6MB.

The object must be any of the following types:

maximumFileSize (string)

Default: "=6 * 1024 * 1024"

imageCropping (object)

Image cropping options

Properties of the imageCropping object:

Property

Type

Required

Description

isEnabled

boolean | string

false

Image cropping enabled?

isFreeStyleCropEnabled

boolean | string

false



width

number | string

false

Width of result image after cropping

height

number | string

false

Height of result image after cropping

isEnabled (boolean | string)

Image cropping enabled?

The object must be any of the following types:

isEnabled (string)

Default: true

isFreeStyleCropEnabled (boolean | string)

The object must be any of the following types:

isFreeStyleCropEnabled (string)

Default: true

width (number | string)

Width of result image after cropping

The object must be any of the following types:

width (string)

height (number | string)

Height of result image after cropping

The object must be any of the following types:

height (string)

label (string | Expression | TextWithFormat | TextLocale, required)

Label is displayed as placeholder when no value.

icon (icon-name | string)

Trailing icon.

The object must be any of the following types:

icon (icon-name)

icon (string)

helperText (string | Expression | TextWithFormat | TextLocale)

Helper text is displayed only when there is no errorText.

errorText (string | Expression | TextWithFormat | TextLocale)

Text displayed when field's value is not valid. When not empty it displays isNegative style as well.

style (Date Picker Style)

More of them can be true. It will be evaluated based on priority.

Properties of the style object:

Property

Type

Required

Description

isDisabled

boolean | string

false

Change style to disabled. User can't do anything with field when disabled.

isBusy

boolean | string

false

Displays spinner on right side of text field. It removes icon if any.

isPositive

boolean | string

false

Displays success icon on right side of text field.

flex

number

false

Flex property if rendered inside row

isDisabled (boolean | string)

Change style to disabled. User can't do anything with field when disabled.

The object must be any of the following types:

isDisabled (string)

isBusy (boolean | string)

Displays spinner on right side of text field. It removes icon if any.

The object must be any of the following types:

isBusy (string)

isPositive (boolean | string)

Displays success icon on right side of text field.

The object must be any of the following types:

isPositive (string)

isRequired (boolean | string)

True when the field is required. Useful when you use it in form submission.

The object must be any of the following types:

isRequired (string)

isOptionalLabelHidden (boolean | string)

If the field is optional you can turn off the "(optional)" label if you want.

The object must be any of the following types:

isOptionalLabelHidden (string)

isIgnored (boolean | string)

When true, the field will be ignored when submitting the form.

The object must be any of the following types:

isIgnored (string)

isHidden (boolean | string)

If true it will be hidden to user.

The object must be any of the following types:

isHidden (string)

initialValue (string | string[] | string)

Initial value of the relevant field. You can use this to preset value, so user doesn't need to add anything and use this "default".

The object must be any of the following types:

initialValue (string | string[])

The object must be any of the following types:

initialValue (string[])

The object is an array with all elements of the type string.

initialValue (string)

value (string | string[] | string)

The value to show for the field. Text field is a controlled component, which means the internal value will be forced to match this value prop if provided. In most cases, you don't need to use this.

The object must be any of the following types:

value (string | string[])

The object must be any of the following types:

value (string[])

The object is an array with all elements of the type string.

value (string)

onChange (keg-action-in-background)

Action Keg component that will be triggered when value is changed

color (object[])

Changing color of field based on conditions. First evaluated to true will be used.

The object is an array with all elements of the type object.

The array object has the following properties:

isMultiple (boolean | string)

Allow multiple file selection

The object must be any of the following types:

isMultiple (string)

Default: false

mediaType (image | any | string, required)

The object must be any of the following types:

mediaType (string)

Default: "image"

Updated 25 Sep 2023
Did this page help you?
PREVIOUS
jc-location
NEXT
jc-number-field
Docs powered by
Archbee
TABLE OF CONTENTS
instanceId (string, required)
when (Expression | boolean)
options (Options, required)
Sub Schemas
Options (Media picker field options)
imageQuality (number | string)
imageQuality (string)
maximumFileSize (number | none | string)
maximumFileSize (string)
imageCropping (object)
isEnabled (boolean | string)
isEnabled (string)
isFreeStyleCropEnabled (boolean | string)
isFreeStyleCropEnabled (string)
width (number | string)
width (string)
height (number | string)
height (string)
label (string | Expression | TextWithFormat | TextLocale, required)
icon (icon-name | string)
icon (icon-name)
icon (string)
helperText (string | Expression | TextWithFormat | TextLocale)
errorText (string | Expression | TextWithFormat | TextLocale)
style (Date Picker Style)
isDisabled (boolean | string)
isDisabled (string)
isBusy (boolean | string)
isBusy (string)
isPositive (boolean | string)
isPositive (string)
isRequired (boolean | string)
isRequired (string)
isOptionalLabelHidden (boolean | string)
isOptionalLabelHidden (string)
isIgnored (boolean | string)
isIgnored (string)
isHidden (boolean | string)
isHidden (string)
initialValue (string | string[] | string)
initialValue (string | string[])
initialValue (string[])
initialValue (string)
value (string | string[] | string)
value (string | string[])
value (string[])
value (string)
onChange (keg-action-in-background)
color (object[])
isMultiple (boolean | string)
isMultiple (string)
mediaType (image | any | string, required)
mediaType (string)
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service