Basic Components

1. View

<View> tags get converted to <div> tags in the final HTML

Attributes

• className: Use a CSS class mentioned in styles.css in the game bundle
• style: Specify inline CSS for this tag
• onTapEvent: Custom Event Passing to Game Bundle when User Click/Tap on the corresponding overlay Component

2. Text

<Text> tags get converted to <p> tags in the final HTML

Attributes

• className: Use a CSS class mentioned in styles.css in the game bundle
• style: Specify inline CSS for this tag
• content: Text content to render

3. Button

<Button> tags get converted to <button> tags in the final HTML

Attributes

• className: Use a CSS class mentioned in styles.css in the game bundle
• style: Specify inline CSS for this tag
• content: Text content to render
• action: Context action triggered on press

4. Image

<Image> tags get converted to <img> tags in the final HTML

Attributes

• className: Use a CSS class mentioned in styles.css in the game bundle
• style: Specify inline CSS for this tag
• content: Text content to render
• src: Source of the image. This must reference either an image present in the game bundle, or use an FBInstant key to resolve the image to a player’s profile picture.

Control Structure Components

1. For

The for-loop statement for the Overlay syntax.

Attributes

• source: The data source to use for iteration. This can either be an FBInstant key that resolves to connected players or context participants, or it can be a list supplied by the game.
• itemName: The string here would be used to reference each individual item inside the iteration
• [Optional] sortKey: The key on which to sort the items in the list, if it needs to be sorted. This key can reference player data that is stored using FBInstant.player.setData
• [Optional] order: Either ASC for ascending or DESC for descending
• [Optional] limit: A number to specify how many items to consider for this iteration. The limit will apply after sorting
• [Optional] startIndex: A number to specify what index to start the list at if using {{itemname.index}}. Defaults to 1 if unspecified
• [Optional] scrollStyle: Where the scroll should start at, if there is overflow. Either top, bottom, or center to center on the item in the scrollIndex. Defaults behavior is top
• [Optional] scrollIndex: A number to specify the index of the initial data from the list to center on if scrollStyle is center. Must be provided if scrollStyle is center

2. If

Surround a block of components with an If component tag in order to conditionally render those components if the condition specified with the child Condition or ConditionGroup tag evaluates to true.

3. ElseIf

Follows an If component tag as a sibling tag, same rules as the If component tag. This gets evaluated if the preceding condition for If condition tag evaluates to false.

4. Else

Final component tag in the If-ElseIf chain. It evaluates if the preceding If/ElseIf tags evaluate to false.

5. Condition

Component inside If statement to specify the conditions.

Attributes

• lhs: The left hand side data to compare. This can be supplied as a key FBInstant.player.data.score or supplied from the map of key-value pairs provided when creating the overlay view
• operator: One of the operator of the following
  • EQUALS
  • NOT_EQUALS
  • GREATER_THAN
  • NOT_GREATER_THAN
  • LESS_THAN
  • NOT_LESS_THAN
  • IN
  • NOT_IN
• rhs: The right hand side data to compare. This can be supplied as a key FBInstant.player.data.score or supplied from the map of key-value pairs provided when creating the overlay view.

6. ConditionGroup

Combine multiple Condition components under a logical operator.

Attributes

• operator: One of the following
  • AND
  • OR