Example Game Use Cases

You can find many sample XMLs for NEZP in our github repo:

List of friends rendered with game actions

You can achieve rendering a list of friends with corresponding actions such as context switch or a custom action (sending an in-game reward) in 2 ways:

Render friends' info in separate overlay view iframes

• Fetch list of friend player IDs using FBInstant.player.getConnectedPlayersAsync()
• Create an overlay view per player by passing in the specific player ID in the initialData of the createOverlayView API
• You can then render the specific player's information using the FBInstant.players key as detailed here
• You can render the corresponding game buttons for each friend row, and invoke functionality according to the player ID

Render everything in a single overlay view iframe

• You can pass in the set of player IDs retrieved from FBInstant.player.getConnectedPlayersAsync() as initialData to the createOverlayView method
• You can loop over this array using the For operator and render each row with the corresponding buttons
• For buttons corresponding to player actions, you can use:

<For source="{{playerIDs}}" itemName="i">
<!-- Render other player info here -->
  <Button onTapEvent="SendCoins_{{i.item}}"></Button>
</For>

• You can then listen to custom events using the FBInstant.overlayViews.setCustomEventHandler. More details in the section here

Render each row in its own overlay view iframe

• You can render each row separately by passing in the corresponding playerID to each created overlay view per row, and store the mapping of player ID to overlay ID in your local game code
• Each corresponding button can send a custom event, let's say SendCoins
• The function callback passed into FBInstant.overlayViews.setCustomEventHandler returns an overlayID that you can use to check which playerID it corresponds to

Render and sort by dynamic key in each row

You can render and sort data using dynamic keys in for-loops (e.g. {{scores[{{player.id}}]}}" in the example below).

<View>
  <For source="{{players}}" itemName="player" sortKey="{{scores[{{player.id}}]}}" order="DESC">
    <View>
        <Text content="{{player.name}}" />
        <Text content="{{scores[{{player.id}}]}}" />
     </View>
  </For>
</View>

{
    "players": [
        {
            "id": 1,
            "name": "Alice"
        },
        {
            "id": 2,
            "name": "Bob"
        },
        {
            "id": 3,
            "name": "Carol"
        }
    ],
    "scores": {
        "1": 101,
        "2": 222,
        "3": 313
    }
}

Basic XML examples

<View>
    <Image src="{{FBInstant.player.photo}}" className="profilePicture" width="50" />
    <Text content="{{FBInstant.player.name}}" className="playerName"/>
</View>

  <View>
    <View>
        <Image className="profilePicture" width="50"  src="{{FBInstant.player.photo}}"/>
    </View>
    <If>
        <Condition lhs="{{FBInstant.player.name}}" operator="EQUALS" rhs="Daiwei"/>
            <View><Text className="playerName" content="{{FBInstant.player.name}} - in IF!"/></View>
        <Else>
            <View><Text className="playerName" content="{{FBInstant.player.name}} - in ELSE!"/></View>
        </Else>
    </If>
</View>

<View>
    <For source="{{FBInstant.player.connectedPlayers}}" itemName="i" sortKey="name">
        <View>
            <Image className="profilePicture" width="50" src="{{i.photo}}" />
            <Text className="playerName" content="{{i.name}}" />
        </View>
    </For>
</View>  

<View>
  <For source="{{FBInstant.player.connectedPlayers}}" itemName="player" sortKey="{{scores[{{player.id}}]}}" order="DESC">
    <View>
        <Image src="{{player.photo}}" style="width:60px; height:60px;" />
        <Text content="{{player.name}}" />
        <Text content="{{scores[{{player.id}}]}}" />
     </View>
  </For>
</View>

<View>
    <Image className="profilePicture" width="50" src="{{FBInstant.players[{{playerID}}].photo}}" />
    <Image className="profilePicture" width="50" src="{{FBInstant.players[{{otherPlayerID}}].photo}}" />
</View>