Reference
jc-interactive-image

28min
The schema defines the following properties:
Property
Type
Required
Description
type
component.interactive-image
true
﻿
instanceId
InstanceId | Expression
false
﻿
when
Expression | boolean
false
﻿
options
Interactive Image Options
true
﻿
instanceId (InstanceId | Expression)
when (Expression | boolean)
options (Interactive Image Options, required)
Properties of the options object:
Property
Type
Required
Description
data
string
false
Points with percentage coordinates placed on the image.
item
﻿jc-interactive-image-item﻿
false
﻿
groups
JCInteractiveImageGroupItem[]
false
﻿
source
object
true
The image source (either a remote URL or a local file resource).This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the best uri to display based on the measured size of the image container. A cache property can be added to control how networked request interacts with the local cache.The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only).
imageHeight
number | string
false
Change constrain of image height.If height it bigger than image ration (width / height), it correlate height based on the image dimensions.
pointColor
ComponentColor | string
false
Default color for point items in inactive state.
data (string)
Points with percentage coordinates placed on the image.
item (jc-interactive-image-item)
groups (JCInteractiveImageGroupItem[])
The object is an array with all elements of the type JCInteractiveImageGroupItem.
source (object, required)
The image source (either a remote URL or a local file resource).
This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the best uri to display based on the measured size of the image container. A cache property can be added to control how networked request interacts with the local cache.
The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only).
Properties of the source object:
Property
Type
Required
Description
uri
string | string
false
Uri transformation -> string or jigx expression
bundle
string
false
`bundle` is the iOS asset bundle which the image is included in. This will default to [NSBundle mainBundle] if not set.
method
string
false
`method` is the HTTP Method to use. Defaults to GET if not specified.
headers
object
false
`headers` is an object representing the HTTP headers to send along with the request for a remote image.
cache
enum<string>
false
`cache` determines how the requests handles potentially cached responses.- `default`: Use the native platforms default strategy. `useProtocolCachePolicy` on iOS.- `reload`: The data for the URL will be loaded from the originating source. No existing cache data should be used to satisfy a URL load request.- `force-cache`: The existing cached data will be used to satisfy the request, regardless of its age or expiration date. If there is no existing data in the cache corresponding the request, the data is loaded from the originating source.- `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of its age or expiration date. If there is no existing data in the cache corresponding to a URL load request, no attempt is made to load the data from the originating source, and the load is considered to have failed.
body
string
false
`body` is the HTTP body to send with the request. This must be a valid UTF-8 string, and will be sent exactly as specified, with no additional encoding (e.g. URL-escaping or base64) applied.
width
number
false
`width` and `height` can be specified if known at build time, in which case these will be used to set the default `<Image/>` component dimensions.
height
number
false
﻿
scale
number
false
`scale` is used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP.
uri (string | string)
Uri transformation -> string or jigx expression
The object must be any of the following types:
uri (string)
headers (object)
headers is an object representing the HTTP headers to send along with the request for a remote image.
cache (enum<string>)
cache determines how the requests handles potentially cached responses.
default: Use the native platforms default strategy. useProtocolCachePolicy on iOS.
reload: The data for the URL will be loaded from the originating source. No existing cache data should be used to satisfy a URL load request.
force-cache: The existing cached data will be used to satisfy the request, regardless of its age or expiration date. If there is no existing data in the cache corresponding the request, the data is loaded from the originating source.
only-if-cached: The existing cache data will be used to satisfy a request, regardless of its age or expiration date. If there is no existing data in the cache corresponding to a URL load request, no attempt is made to load the data from the originating source, and the load is considered to have failed.
This element must be one of the following enum values:
default
reload
force-cache
only-if-cached
imageHeight (number | string)
Change constrain of image height.
If height it bigger than image ration (width / height), it correlate height based on the image dimensions.
The object must be any of the following types:
imageHeight (string)
Default: "undefined"
pointColor (ComponentColor | string)
Default color for point items in inactive state.
The object must be any of the following types:
pointColor (ComponentColor)
pointColor (string)
Default: "primary"
﻿
Sub Schemas
The schema defines the following additional types:
ComponentColor (BasicColor | StatusColor | primary)
The object must be any of the following types:
ComponentColor (BasicColor)
ComponentColor (StatusColor)
BasicColor (enum<string>)
This element must be one of the following enum values:
color1
color2
color3
color4
color5
color6
color7
color8
color9
color10
color11
color12
color13
color14
StatusColor (enum<string>)
This element must be one of the following enum values:
positive
negative
warning
JCInteractiveImageGroupItem (object)
Properties of the JCInteractiveImageGroupItem object:
Property
Type
Required
Description
title
string | number | string
true
Title of the group
id
string | number | string
true
Unique id for group
maximumPoints
number | string
false
Maximum number of items that can be assigned to the groupWhen not defined, there is no limit
color
ComponentColor
false
Color of group
title (string | number | string, required)
Title of the group
The object must be any of the following types:
title (string)
id (string | number | string, required)
Unique id for group
The object must be any of the following types:
id (string)
maximumPoints (number | string)
Maximum number of items that can be assigned to the group
When not defined, there is no limit
The object must be any of the following types:
maximumPoints (string)
color (ComponentColor)
Color of group
Updated 25 Sep 2023
Did this page help you?
jc-interactive-image-item
jc-jig-header
Docs powered by
Archbee
Property	Type	Required	Description
type	component.interactive-image	true
instanceId	InstanceId \| Expression	false
when	Expression \| boolean	false
options	Interactive Image Options	true