jc-view
The schema defines the following properties:
Property | Type | Required | Description |
type | component.view | true | |
instanceId | InstanceId | Expression | false | |
when | Expression | boolean | false | |
options | View Options | true | |
Properties of the options object:
Property | Type | Required | Description |
style | ViewStyleSpecification | true | |
onPress | false | Action Keg component that will be triggered by pressing on this view. | |
children | ComponentDefaultChild[] | true | Children of the view |
emphasis | EmphasisDefinition | false | Change emphasis of the background color |
Action Keg component that will be triggered by pressing on this view.
Children of the view
The object is an array with all elements of the type ComponentDefaultChild.
Change emphasis of the background color
The schema defines the following additional types:
Properties of the ViewStyleSpecification object:
Property | Type | Required | Description |
emphasis | EmphasisDefinition | false | Emphasis of the content |
flex | number | string | object | false | Dont use `flex: 1` with the `width` parameter. The `width` parameter will be ignored in this case. |
justifyContent | enum<string> | false | Justify content of the content. Behaviour depends on the `flexDirection` parameter. |
alignItems | enum<string> | false | Align items of the content. Behaviour depends on the `flexDirection` parameter. |
alignContent | enum<string> | false | Align content of the content. Behaviour depends on the `flexDirection` parameter. |
alignSelf | enum<string> | false | Align self inside the parent container |
overflow | enum<string> | false | Overflow of the content |
position | enum<string> | false | Position of the content |
top | SpacingType | string | false | |
right | SpacingType | string | false | |
bottom | SpacingType | string | false | |
left | SpacingType | string | false | |
width | number | string | object | false | Dont use `flex: 1` or `flex.grow` with the `width` parameter. The `width` parameter will be ignored in this case. |
height | number | string | object | false | |
margin | SpacingType | string | object | false | |
padding | SpacingType | string | object | false | |
gap | SpacingType | string | object | false | |
border | Border settings | false | |
radius | RadiusType | string | object | false | Radius of the corners of the view |
background | object | false | |
Emphasis of the content
Dont use flex: 1 with the width parameter. The width parameter will be ignored in this case.
The object must be any of the following types:
Properties of the flex object:
Property | Type | Required | Description |
direction | enum<string> | false | Direction of the content |
grow | number | string | false | Dont use the `grow` with the `width` parameter. The `width` parameter will be ignored in this case. |
basis | number | string | string | false | Dont use the `basis` with the `width` parameter. The `width` parameter will be ignored in this case. |
shrink | number | string | false | Will shrink itself if the content is bigger than the container |
wrap | enum<string> | false | Will wrap the content if the content is bigger than the container |
Direction of the content
This element must be one of the following enum values:
- row
- column
- row-reverse
- column-reverse
Dont use the grow with the width parameter. The width parameter will be ignored in this case.
The object must be any of the following types:
Dont use the basis with the width parameter. The width parameter will be ignored in this case.
The object must be any of the following types:
Will shrink itself if the content is bigger than the container
The object must be any of the following types:
Will wrap the content if the content is bigger than the container
This element must be one of the following enum values:
- wrap
- nowrap
- wrap-reverse
Justify content of the content. Behaviour depends on the flexDirection parameter.
This element must be one of the following enum values:
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
Align items of the content. Behaviour depends on the flexDirection parameter.
This element must be one of the following enum values:
- flex-start
- flex-end
- center
- stretch
- baseline
Align content of the content. Behaviour depends on the flexDirection parameter.
This element must be one of the following enum values:
- flex-start
- flex-end
- center
- stretch
- space-between
- space-around
Align self inside the parent container
This element must be one of the following enum values:
- auto
- flex-start
- flex-end
- center
- stretch
- baseline
Overflow of the content
This element must be one of the following enum values:
- visible
- hidden
- scroll
Position of the content
This element must be one of the following enum values:
- absolute
- relative
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
Dont use flex: 1 or flex.grow with the width parameter. The width parameter will be ignored in this case.
The object must be any of the following types:
Properties of the width object:
Property | Type | Required | Description |
value | number | string | string | false | |
min | number | string | string | false | |
max | number | string | string | false | |
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
Properties of the height object:
Property | Type | Required | Description |
value | number | string | string | false | |
min | number | string | string | false | |
max | number | string | string | false | |
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
Properties of the margin object:
Property | Type | Required | Description |
bottom | SpacingType | string | false | |
end | SpacingType | string | false | |
horizontal | SpacingType | string | false | |
left | SpacingType | string | false | |
right | SpacingType | string | false | |
start | SpacingType | string | false | |
top | SpacingType | false | |
vertical | SpacingType | string | false | |
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
Properties of the padding object:
Property | Type | Required | Description |
bottom | SpacingType | string | false | |
end | SpacingType | string | false | |
horizontal | SpacingType | string | false | |
left | SpacingType | string | false | |
right | SpacingType | string | false | |
start | SpacingType | string | false | |
top | SpacingType | string | false | |
vertical | SpacingType | string | false | |
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
Properties of the gap object:
Property | Type | Required | Description |
column | SpacingType | string | false | |
row | SpacingType | string | false | |
The object must be any of the following types:
The object must be any of the following types:
Properties of the border object:
Property | Type | Required | Description |
style | BorderStyleDefinition | false | |
color | ColorOrConditionalColor | false | |
emphasis | EmphasisDefinition | false | |
top | object | false | Specific setting of top border |
bottom | object | false | Specific setting of bottom border |
left | object | false | Specific setting of left border |
right | object | false | Specific setting of right border |
start | object | false | Specific setting of start border |
end | object | false | Specific setting of end border |
Default: true
Specific setting of top border
Properties of the top object:
Property | Type | Required | Description |
style | BorderStyleDefinition | true | |
color | ColorOrConditionalColor | false | |
emphasis | EmphasisDefinition | false | |
Specific setting of bottom border
Properties of the bottom object:
Property | Type | Required | Description |
style | BorderStyleDefinition | true | |
color | ColorOrConditionalColor | false | |
emphasis | EmphasisDefinition | false | |
Specific setting of left border
Properties of the left object:
Property | Type | Required | Description |
style | BorderStyleDefinition | true | |
color | ColorOrConditionalColor | false | |
emphasis | EmphasisDefinition | false | |
Specific setting of right border
Properties of the right object:
Property | Type | Required | Description |
style | BorderStyleDefinition | true | |
color | ColorOrConditionalColor | false | |
emphasis | EmphasisDefinition | false | |
Specific setting of start border
Properties of the start object:
Property | Type | Required | Description |
style | BorderStyleDefinition | true | |
color | ColorOrConditionalColor | false | |
emphasis | EmphasisDefinition | false | |
Specific setting of end border
Properties of the end object:
Property | Type | Required | Description |
style | BorderStyleDefinition | true | |
color | ColorOrConditionalColor | false | |
emphasis | EmphasisDefinition | false | |
Radius of the corners of the view
The object must be any of the following types:
Properties of the radius object:
Property | Type | Required | Description |
topLeft | RadiusType | string | false | |
topRight | RadiusType | string | false | |
bottomLeft | RadiusType | string | false | |
bottomRight | RadiusType | string | false | |
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
The object must be any of the following types:
Properties of the background object:
Property | Type | Required | Description |
color | ColorOrConditionalColor | false | Background color of the view |
emphasis | EmphasisDefinition | false | Change emphasis of the background color |
Background color of the view
Change emphasis of the background color
The object must be any of the following types:
This element must be one of the following enum values:
- none
- minimal
- small
- medium
- regular
- large
The object must be any of the following types:
The object must be any of the following types:
The object is an array with all elements of the type object.
The array object has the following properties:
This element must be one of the following enum values:
- color1
- color2
- color3
- color4
- color5
- color6
- color7
- color8
- color9
- color10
- color11
- color12
- color13
- color14
This element must be one of the following enum values:
- tiny
- small
- medium
- regular
- large
ComponentDefaultChild (jc-avatar | jc-bar-chart | jc-button | jc-card | jc-entity | jc-expander | jc-form | jc-icon | JCImageOnCustomComponentConfig | jc-interactive-image | jc-line-chart | jc-location | jc-pie-chart | jc-stage | jc-stepper | jc-text | jc-trend | JCVideoPlayerOnJigConfig | jc-view | jc-web-view)
The object must be any of the following types:
FormChildrenFields (jc-text-field | jc-checkbox | jc-email-field | jc-number-field | jc-dropdown | jc-date-picker | jc-signature-field | jc-media-field | jc-avatar-field)
The object must be any of the following types:
This element must be one of the following enum values:
- contain
- cover
- stretch
- center
Properties of the JCImageURISource object:
Property | Type | Required | Description |
uri | string | string | true | |
The object must be any of the following types:
Properties of the JCVideoPlayerOnJigConfig object:
Property | Type | Required | Description |
type | component.video-player | true | |
instanceId | InstanceId | Expression | false | |
when | Expression | boolean | false | |
options | Video Player Options jigs | true | |
Properties of the options object:
Property | Type | Required | Description |
url | string | string | true | URL of the video |
title | string | Expression | TextWithFormat | TextLocale | false | Title of the video |
subtitle | string | Expression | TextWithFormat | TextLocale | false | Subtitle of the video |
ratio | Ratio | false | Aspect ratio of the video (default = 16:9, only for non-YouTube videos) |
autoplay | boolean | string | false | Autoplay the video (default = true) |
loop | boolean | string | false | Loop the video (default = true) |
onPress | false | Action Keg component that will be triggered by pressing on this image. |
URL of the video
The object must be any of the following types:
Title of the video
Subtitle of the video
Aspect ratio of the video (default = 16:9, only for non-YouTube videos)
Autoplay the video (default = true)
The object must be any of the following types:
Loop the video (default = true)
The object must be any of the following types:
Action Keg component that will be triggered by pressing on this image.
This element must be one of the following enum values:
- 16:9
- 4:3
Properties of the JCImageOnCustomComponentConfig object:
Property | Type | Required | Description |
type | component.image | true | |
instanceId | InstanceId | Expression | false | |
when | Expression | boolean | false | |
options | object | true | |
Properties of the options object:
Property | Type | Required | Description |
title | string | Expression | TextWithFormat | TextLocale | false | Title that could be displayed on/next to the image based on current context. |
subtitle | string | Expression | TextWithFormat | TextLocale | false | Subtitle that could be displayed on/next to the image based on current context. |
resizeMode | ResizeMode | false | Determines how to resize the image when the frame doesn't match the raw image dimensions.'cover': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).'contain': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).'stretch': Scale width and height independently, This may change the aspect ratio of the src.'center': Scale the image down so that it is completely visible, if bigger than the area of the view. The image will not be scaled up. |
source | JCImageURISource | true | The image source (either a remote URL or a local file resource). The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only). |
size | ImageSizeConfig | flexible | false | |
onPress | false | Action Keg component that will be triggered by pressing on this image. |
Title that could be displayed on/next to the image based on current context.
Subtitle that could be displayed on/next to the image based on current context.
Determines how to resize the image when the frame doesn't match the raw image dimensions.
'cover': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
'contain': Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
'stretch': Scale width and height independently, This may change the aspect ratio of the src.
'center': Scale the image down so that it is completely visible, if bigger than the area of the view. The image will not be scaled up.
The image source (either a remote URL or a local file resource). The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only).
The object must be any of the following types:
Action Keg component that will be triggered by pressing on this image.
Properties of the ImageSizeConfig object:
Property | Type | Required | Description |
height | number | string | false | Change constrain of image height. Remember to use a proper resizeMode toachieve the best results in all different device resolutions |
width | number | string | false | Change constrain of image width. Remember to use a proper resizeMode toachieve the best results in all different device resolutions |
Change constrain of image height. Remember to use a proper resizeMode to achieve the best results in all different device resolutions
The object must be any of the following types:
Default: 196
Change constrain of image width. Remember to use a proper resizeMode to achieve the best results in all different device resolutions
The object must be any of the following types:
