SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Gamification Badges

This sample demonstrates how to create dynamic Gamification badges in SharePoint columns based on score values with visual indicators and tooltips.

Get this format View on GitHub

Shared by Sai Bandaru
Updated Sep 26, 2025

Gamification badges showing different contributor levels with colored borders and medal indicators
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "inline-flex",
    "align-items": "center",
    "justify-content": "center",
    "position": "relative"
  },
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "=if(Number([$Score]) <= 30, @currentWeb+'/SiteAssets/Rookie.png', if(Number([$Score]) <= 149, @currentWeb+'/SiteAssets/Ace.png', if(Number([$Score]) >= 150, @currentWeb+'/SiteAssets/Champion.png', @currentWeb+'/SiteAssets/Rookie.png')))",
        "title": "=if(Number([$Score]) <= 30, 'Rookie Contributor - Score: ' + [$Score], if(Number([$Score]) <= 149, 'Ace Contributor - Score: ' + [$Score], if(Number([$Score]) >= 150, 'Champion - Score: ' + [$Score], 'Contributor - Score: ' + [$Score])))"
      },
      "style": {
        "width": "100px",
        "height": "100px",
        "border": "=if(Number([$Score]) <= 30, '3px solid #6c757d', if(Number([$Score]) <= 149, '3px solid #007acc', if(Number([$Score]) >= 150, '3px solid #ffc107', '3px solid #28a745')))",
        "cursor": "pointer"
      }
    },
    {
      "elmType": "div",
      "style": {
        "position": "absolute",
        "bottom": "-2px",
        "right": "-2px",
        "width": "18px",
        "height": "18px",
        "border-radius": "50%",
        "background-color": "=if(Number([$Score]) <= 30, '#6c757d', if(Number([$Score]) <= 149, '#007acc', if(Number([$Score]) >=150, '#ffc107', '#28a745')))",
        "border": "2px solid white",
        "display": "flex",
        "align-items": "center",
        "justify-content": "center",
        "font-size": "10px",
        "color": "white",
        "font-weight": "bold"
      },
      "txtContent": "=if(Number([$Score]) <= 30, '🥉', if(Number([$Score]) <= 149, '🥈', if(Number([$Score]) >= 150, '🥇', '⭐')))"
    }
  ]
}
View sourceLink to this definitiongeneric-gamification.json

From the contributor

How to use this sample

Summary

This project demonstrates how to create dynamic Gamification badges within a SharePoint list using column formatting JSON. The badges display different contributor levels based on score values, with visual indicators, tooltips, and color-coded borders.

Screenshot of the sample

Features

  • Dynamic Badge Display: Shows different contributor images based on score ranges
  • Color-Coded Borders: Visual indication of Gamification level with themed colors
  • Interactive Tooltips: Hover to see detailed contributor level and score information
  • Medal Badges: Small emoji indicators showing Gamification tier
  • Responsive Design: Scales appropriately within SharePoint list columns
  • Score-Based Logic: Automatically categorizes contributors into tiers

Gamification Tiers

The badge system categorizes contributors into the following tiers based on their scores:

Score Range Level Border Color Badge Image
≤ 30 Rookie Contributor Gray (#6c757d) 🥉 Bronze Rookie.png
31-149 Ace Contributor Blue (#007acc) 🥈 Silver Ace.png
> 150 Champion Gold (#ffc107) 🥇 Gold Champion.png

View requirements

This formatting requires the following columns in your SharePoint list:

Column Name Type Description
Score Number Numerical score value for determining Gamification level
EmployeeName Single Line of Text Employee Name
Title Single Line of Text Column where the formatting will be applied

Note: The formatting references the Score column to determine which badge to display. Ensure your Score column contains numerical values.

JSON Column Formatting Features

The JSON formatting includes several advanced features:

  • Conditional Image Loading: Different images based on score ranges
  • Dynamic Styling: Border colors and background colors change based on Gamification level
  • Hover Tooltips: Interactive title attribute shows "Level - Score: X"
  • Badge Overlay: Small circular badge in bottom-right corner with achievement emoji
  • Flexible Sizing: 100x100px images with responsive borders

How to Apply

  1. Prepare Your List:

    • Ensure you have a Score column (Number type)
    • Have the images uploaded to your SharePoint site assets

  2. Apply Column Formatting:

    • Open your SharePoint list
    • Click the column Title header → Column settings → Format this column
    • Switch to Advanced mode
    • Paste the provided JSON into the formatting editor
    • Click Save

  3. Image Setup:

    • Upload your achievement images to Site Assets:
      • Rookie.png - For rookie and default contributors
      • Ace.png - For ace contributors
      • Champion.png - For champions
    • Update the URLs in the JSON to match your site path

Troubleshooting

Images Not Loading

  • Verify image URLs are accessible to all users
  • Check SharePoint permissions on Site Assets library
  • Ensure image file names match exactly (case-sensitive)

Formatting Not Applied

  • Confirm Score column is Number type
  • Check column references match exact column names
  • Validate JSON syntax using online JSON validators

Tooltips Not Showing

  • Ensure browser allows tooltips
  • Check if custom CSS is interfering
  • Verify title attribute is not being overridden

Performance Considerations

  • Image Optimization: Use optimized PNG/JPG files (recommended: <100KB each)
  • Caching: SharePoint automatically caches images for better performance
  • Column Limit: Works efficiently with hundreds of rows

Security Notes

  • Images are served through SharePoint's security context
  • No external dependencies or third-party resources required
  • All logic is processed client-side through SharePoint's JSON engine

Sample

Solution Author(s)
generic-gamification.json Sai Bandaru

Version History

Version Date
1.0 September 26, 2025

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

References