interactive-image-item

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

Some properties are common to all components, see Common component properties for the properties and their 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 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
=@ctx.component.state.	selected	State is the variable of the component.
=@ctx.solution.state.	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)

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

interactive-image-rest (dynamic)

datasources (static)

datasources (dynamic)

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)

children:
  - type: component.interactive-image
    options:
      imageHeight: 1500
      source: 
        uri:  https://i.pinimg.com/564x/b0/eb/52/b0eb52122452257e955f210e7fdb8f55.jpg
          
      data: =@ctx.datasources.interactive-image-office
      pointColor: color10
      groups:
        - title: Selected desks
          id: Selected desks
          color: color2
        - title: Hot desk - reserved
          id: Hot desk - reserved
          color: color14
          maximumPoints: 3
        - title: Meeting room - reserved
          id: Meeting room
          color: color14
          maximumPoints: 1

      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
          groupId: =@ctx.current.item.group
          style:
            isDisabled: =@ctx.current.item.isReserved = true ? true :false
          percentageCoordinates:
            x: =@ctx.current.item.xCoordinate
            y: =@ctx.current.item.yCoordinate

datasources (static)

See also

• State