Tile Layout Editor

The Tile Layout Editor helps you configure grid-based layouts in FM - areas where content is displayed in a tile/card arrangement rather than a table.

What are Tile Layouts?

Tile layouts display information in a grid of cards or panels:

• Player card grids
• Team overview panels
• News feed layouts
• Trophy displays

Opening the Tile Layout Editor

• Single-click a tile layout JSON file
• These are typically in a tile-layouts/ folder

Simple Mode

Simple Mode provides visual grid configuration.

Grid Preview

The preview panel shows your layout:

• Tiles displayed in configured arrangement
• Spacing visualized
• Resize handles for adjustment

Configuration Panel

Edit grid properties:

Visual Adjustments

Drag handles in the preview to adjust:

• Corner handles: Resize tiles
• Drag drop: Move tiles within the grid

Expert Mode

Expert Mode shows the raw JSON configuration.

JSON Structure

{
  "grid": {
    "width": 20,
    "height": 10
  },
  "tiles": [
    {
      "tile": "PortalMessagesTile",
      "x": 0,
      "y": 0,
      "w": 6,
      "h": 10
    },
    {
      "tile": "CalendarTile_4x4",
      "x": 6,
      "y": 6,
      "w": 4,
      "h": 4
    }
  ]
}

Grid Properties

{
  "grid": {
    "width": 20,     // Total grid width in units
    "height": 10     // Total grid height in units
  },
}

Tile Options

{
    {
      "tile": "CalendarTile_4x4",   // Tile identifier
      "x": 6,                       // X position in grid units
      "y": 6,                       // Y position in grid units
      "w": 4,                       // Tile width in grid units
      "h": 4                        // Tile height in grid units
    }
}

Tips and Best Practices

Consider Content Size

Tiles should fit their content:

Test at Different Sizes

Grids may look different on various screens:

1. Test at minimum window size
2. Test at maximum/fullscreen
3. Adjust columns if needed

Troubleshooting

”Tiles overlapping”

• Tile dimensions too large for columns
• Reduce tile size or number of columns

”Large gaps between tiles”

• Container width doesn’t divide evenly
• Adjust tile width or gap size

”Tiles cut off”

• Tile height too small for content
• Increase tileHeight

”Layout looks wrong”

• Check JSON syntax
• Verify all required properties present
• Compare with working examples

Next: Inline Style Editor - Apply styles to specific elements.