SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Bar Code Row Formatter

This sample uses SharePoint List Formatting to automatically generate Bar code for each list item based on the Title field.

Get this format View on GitHub

Shared by Sai Bandaru
Updated Aug 29, 2025

Bar Code Row Formatter 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/view-formatting.schema.json",
  "hideColumnHeader": false,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "align-items": "center",
      "gap": "50px",
      "padding": "8px",
      "border-bottom": "1px solid #eee"
    },
    "children": [
      {
        "elmType": "span",
        "txtContent": "[$Title]",
        "style": {
          "font-weight": "600",
          "min-width": "150px"
        }
      },
      {
        "elmType": "img",
        "attributes": {
          "src": "='https://barcodeapi.org/api/' + [$Title]",
          "alt": "='Bar Code for ' + [$Title]"
        },
        "style": {
          "width": "300px",
          "height": "100px",
          "border": "1px solid #ddd",
          "padding": "4px",
          "background-color": "white"
        }
      }
    ]
  }
}
View sourceLink to this definitionbar-code.json

From the contributor

How to use this sample

This sample uses SharePoint List Formatting to automatically generate Bar code for each list item based on the Title field.
Each row displays the item title alongside a dynamically generated Bar code, making it easy to create scannable links or references for physical handouts, inventory tracking, or event management.

screenshot of the sample

View Requirements

Create a list with the following columns:

Internal Name Type
Title Single line of text
BC Single line of text

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

Sample Data

Title
Sai Bandaru
Budvik

Summary

  • The formatter displays each list item's Title with a corresponding Bar code
  • Bar codes are generated dynamically using the barcodeapi.org API
  • Each Bar code contains the exact text from the Title field
  • The layout uses a clean horizontal design with proper spacing and alignment
  • Bar codes are displayed at 300x100 pixels with a white background and border

Security Configuration

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

  1. Navigate to SharePoint Admin Center
  2. Go to Settings > Advanced Settings
  3. Find "HTML Field Security" section
  4. Add barcodeapi.org to the allowed domains list
  5. Save the configuration

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

Sample

Solution Author(s)
bar-code.json Sai Bandaru

Version history

Version Date Comments
1.0 August 29, 2025 Initial release

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

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

"src": "='https://barcodeapi.org/api/' + [$Description]"

Styling Modifications:

  • Adjust spacing: Change "gap": "50px" value
  • Modify title width: Update "min-width": "150px"
  • Customize borders and padding as needed

Use Cases

  • Asset Management: Generate Bar codes for equipment or inventory items
  • Event Planning: Create scannable codes for session titles or locations
  • Document Tracking: Link physical documents to digital versions
  • Contact Information: Generate codes for email addresses or phone numbers
  • URL Shortening: Create Bar codes for long URLs or SharePoint page links

Limitations

  • Requires internet connectivity for Bar code generation
  • External dependency on barcodeapi.org API
  • Consider data privacy when using external Bar code services
  • Performance may vary with large lists due to multiple API calls

License

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