SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

QR Code Tile

This sample uses SharePoint List Formatting to automatically generate QR codes for each list item in a tile view based on the Title field.

Get this format View on GitHub

Shared by Sai Bandaru
Updated Oct 13, 2025

QR Code Tile formatting preview
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.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 300,
  "width": 250,
  "hideSelection": false,
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "center",
      "justify-content": "center",
      "padding": "20px",
      "height": "100%",
      "box-sizing": "border-box",
      "background-color": "#f9f9f9",
      "border-radius": "4px"
    },
    "children": [
      {
        "elmType": "div",
        "txtContent": "=[$Title]",
        "style": {
          "font-size": "16px",
          "font-weight": "600",
          "color": "#333",
          "text-align": "center",
          "margin-bottom": "15px",
          "word-break": "break-word",
          "max-width": "100%"
        }
      },
      {
        "elmType": "img",
        "attributes": {
          "src": "='https://quickchart.io/qr?text=' + [$Title]",
          "alt": "QR Code"
        },
        "style": {
          "width": "180px",
          "height": "180px",
          "border": "2px solid #ddd",
          "padding": "8px",
          "background-color": "white",
          "border-radius": "4px",
          "box-shadow": "0 2px 4px rgba(0,0,0,0.1)"
        }
      }
    ]
  }
}
View sourceLink to this definitionqr-code-tile.json

From the contributor

How to use this sample

Summary

This sample uses SharePoint List Formatting to automatically generate QR codes for each list item in a tile view based on the Title field.
Each tile displays the item title above a dynamically generated QR code in a clean, centered card layout, making it ideal for visual dashboards, inventory displays, or quick-scan directories.

screenshot of the sample

View Requirements

Create a list with the following columns:

Internal Name Type
Title Single line of text

Note: Additional columns can be added as needed for your specific use case.

Configure the view as Tiles layout for the best experience.

Sample Data

Title
Design mockups
Develop feature

How it Works

  • The formatter displays each list item in a 300x250px tile with centered content
  • Each tile shows the Title above a corresponding QR code
  • QR codes are generated dynamically using the QuickChart.io API
  • Each QR code contains the exact text from the Title field
  • The layout features a modern card design with proper spacing, shadows, and rounded corners
  • QR codes are displayed at 180x180 pixels with padding and border styling

Security Configuration

CRITICAL: Before the QR codes will display, you must configure SharePoint security settings:

  1. Navigate to SharePoint Site
  2. Go to Settings > Advanced Settings
  3. Find "HTML Field Security" section
  4. Add quickchart.io to the allowed domains list
  5. Save the configuration

Without this security configuration, QR codes will not display due to SharePoint's content security policies.

Sample

Solution Author(s)
qr-code-tile.json Sai Bandaru

Version history

Version Date Comments
1.0 October 13, 2025 Initial release with tile formatter

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.

Additional Notes

Customization Options

Change Tile Size: Modify the dimensions in the JSON:

"height": 350,
"width": 300

Change QR Code Size: Modify the CSS dimensions:

"style": {
  "width": "200px",
  "height": "200px"
}

Use Different Data Source: Replace [$Title] with any other text field:

"src": "='https://quickchart.io/qr?text=' + [$QR]"

Styling Modifications:

  • Adjust background color: Change "background-color": "#f9f9f9"
  • Modify title styling: Update font-size, color, or weight
  • Customize borders and shadows: Adjust border, box-shadow values
  • Change spacing: Modify padding and margin-bottom values

Advantages of QuickChart.io

  • Simple, reliable API with no authentication required
  • Fast QR code generation
  • Supports URL encoding for special characters
  • No rate limiting for basic usage
  • Clean, scannable QR codes

Limitations

  • Requires internet connectivity for QR code generation
  • External dependency on QuickChart.io API
  • Consider data privacy when using external QR code services
  • Performance may vary with large lists due to multiple API calls
  • Tile view may not be suitable for lists requiring detailed column information

Tips for Best Results

  • Keep titles concise for better QR code readability
  • Test QR codes with multiple scanner apps before deployment
  • Use URLs or structured data for most reliable scanning
  • Consider adding a description column for additional context
  • Ensure adequate lighting when scanning printed QR codes

License

This formatting solution is provided as-is for educational and professional use. The QuickChart.io API has its own terms of service.

Keep exploring

More formats like this

Course Training Tile Cards

Modern tile card layout for displaying training courses with images, badges, and hover previews in SharePoint Gallery view.

Explore format

Picture Link Tiles - Collapsible

Creates a card-style tile view in a SharePoint list with expand and collapse functionality.

Explore format

Icon Link Tiles

This sample uses tileProps element to create tile layout on the view. This layout allow users to see the list as the promoted links app (including the power the security trimming on the items). This sample uses the Icons from the Microsoft UI Fabric. The name of the icon is referenced through an Icon field.

Explore format