interactive-image-item

6min

The interactive-image-item is used in the item property of the interactive-image﻿ component that servers as a container. The interactive-image-item can be set in various ways using the properties of the interactive-image﻿ as well as the properties described below.
﻿Configuration options﻿
﻿
Core structure
﻿
id
Provide an id for the item that is used for filtering and as a key
percentageCoordinates
Percentage x and y coordinates are required.  Coordinates are represented as absolute percentage numbers between 0-100.
title
Give a name/title for the point, for example, Table 1.
Other options
﻿
color
This allows you to set a specific color for the active/selected point (e.g., when the point is selected or active).
icon
This allows you to set a specific icon for different states (e.g., when the point is selected active or inactive).
index
Index for the initial animation.
groupId
 This property allows you to add the item to the group. The groups are created inside the interactive-image﻿ component. Effective only initial load.
style
The following style options are available:
isActive - shows if the point is active or available for selection.
isDisabled - shows if the point is disabled and is unavailable for selection.
Actions
﻿
onPress
The action is triggered when pressing the image's marked coordinate point. Use IntelliSense (ctrl+space) to see the list of available actions. 
State Configuration
Key
Notes
[email protected].
selected
State is the variable of the component.
[email protected].
activeItemId
now
Global state variable that can be used throughout the solution.
﻿Examples and code snippets ﻿
Restaurant table booking example
Table booking
﻿
Table booking
﻿
The example shows tables in a restaurant that are available for booking, the pointColor property is set to blue to show availabilty. Once a table is reserved the icon and color property are set to show that the tables are reserved and cannot be booked. 
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub. 
Datasource:
See the full datasource for static data in GitHub. 
See the full datasource for dynamic data in GitHub. 
interactive-image-rest (static)
interactive-image-rest (dynamic)
datasources (static)
datasources (dynamic)
children:
  - type: component.interactive-image
    options:
      imageHeight: 1500
      source: 
        uri:  https://fpg.roomsketcher.com/image/level/164/3d/Elegant-Restaurant-Plan-3D.jpg

          
      data: [email protected]-restaurant-static
      pointColor: color10
      groups:
        - title: Reserved Tables
          id: Reserved
          color: color14

      item:
        type: component.interactive-image-item
        options:
          id: [email protected]
          title: [email protected]
          icon: [email protected] = true ? 'close' :null
          color: [email protected] = true ? 'color3' :null
          style:
            isDisabled: [email protected] = true ? true :false
          
          percentageCoordinates:
            x: [email protected]
            y: [email protected]
children:
  - type: component.interactive-image
    options:
      imageHeight: 1500
      source: 
        uri:  https://fpg.roomsketcher.com/image/level/164/3d/Elegant-Restaurant-Plan-3D.jpg

          
      data: =@ctx.datasources.floorplan-restaurant-static
      pointColor: color10
      groups:
        - title: Reserved Tables
          id: Reserved
          color: color14

      item:
        type: component.interactive-image-item
        options:
          id: =@ctx.current.item.id
          title: =@ctx.current.item.name
          icon: =@ctx.current.item.isReserved = true ? 'close' :null
          color: =@ctx.current.item.isReserved = true ? 'color3' :null
          style:
            isDisabled: =@ctx.current.item.isReserved = true ? true :false
          
          percentageCoordinates:
            x: =@ctx.current.item.xCoordinate
            y: =@ctx.current.item.yCoordinate
﻿
Hot seat and meeting room booking example
Office desk booking
﻿
Office desk booking
﻿
The example shows how hot seats and meeting rooms at an office can be booked. The groups property is used to differentiate between the types of available bookings, namely, seats, meeting rooms and reserved seats. The maximumPoints property specifies how many of each type can be booked, for example, there are three hot desks for booking.   
Examples:
See the full example using static data in GitHub. 
interactive-image (static)
datasources (static)
datasources:
  interactive-image-office:
    type: datasource.static
    options:
      data:
        - id: 1
          name: Meeting Room
          xCoordinate: 65
          yCoordinate: 43
          isReserved: true
          group: Meeting room
        - id: 2
          name: Hot Desk 1
          xCoordinate: 22
          yCoordinate: 12
          isReserved: true
          group: Hot desk - reserved
        - id: 3
          name: Hot Desk 2
          xCoordinate: 22
          yCoordinate: 22.5
          isReserved: false
          group:
        - id: 4
          name: Hot Desk 3
          xCoordinate: 22
          yCoordinate: 33
          isReserved: true
          group: Hot desk - reserved
        - id: 5
          name: Hot Desk 4
          xCoordinate: 22
          yCoordinate: 44
          isReserved: false
          group:
        - id: 6
          name: Hot Desk 5
          xCoordinate: 22
          yCoordinate: 55.5
          isReserved: false
          group:
        - id: 7
          name: Hot Desk 6
          xCoordinate: 22
          yCoordinate: 66.5
          isReserved: true
          group: Hot desk - reserved
datasources:
  interactive-image-office:
    type: datasource.static
    options:
      data:
        - id: 1
          name: Meeting Room
          xCoordinate: 65
          yCoordinate: 43
          isReserved: true
          group: Meeting room
        - id: 2
          name: Hot Desk 1
          xCoordinate: 22
          yCoordinate: 12
          isReserved: true
          group: Hot desk - reserved
        - id: 3
          name: Hot Desk 2
          xCoordinate: 22
          yCoordinate: 22.5
          isReserved: false
          group:
        - id: 4
          name: Hot Desk 3
          xCoordinate: 22
          yCoordinate: 33
          isReserved: true
          group: Hot desk - reserved
        - id: 5
          name: Hot Desk 4
          xCoordinate: 22
          yCoordinate: 44
          isReserved: false
          group:
        - id: 6
          name: Hot Desk 5
          xCoordinate: 22
          yCoordinate: 55.5
          isReserved: false
          group:
        - id: 7
          name: Hot Desk 6
          xCoordinate: 22
          yCoordinate: 66.5
          isReserved: true
          group: Hot desk - reserved
﻿
See also
﻿State﻿﻿
﻿

Core structure
id	Provide an id for the item that is used for filtering and as a key
percentageCoordinates	Percentage x and y coordinates are required. Coordinates are represented as absolute percentage numbers between 0-100.
title	Give a name/title for the point, for example, Table 1.

Other options
color	This allows you to set a specific color for the active/selected point (e.g., when the point is selected or active).
icon	This allows you to set a specific icon for different states (e.g., when the point is selected active or inactive).
index	Index for the initial animation.
groupId	This property allows you to add the item to the group. The groups are created inside the interactive-image component. Effective only initial load.
style	The following style options are available: isActive - shows if the point is active or available for selection. isDisabled - shows if the point is disabled and is unavailable for selection.

Actions
onPress	The action is triggered when pressing the image's marked coordinate point. Use IntelliSense (ctrl+space) to see the list of available actions.

State Configuration	Key	Notes
[email protected].	selected	State is the variable of the component.
[email protected].	activeItemId now	Global state variable that can be used throughout the solution.