Column formattingSharePoint Online

Star Icons

This sample formats a choice column to use star icons similar to Gmail.

Get this format View on GitHub

Shared by Will Cooper
Updated May 15, 2023

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.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "inlineEditField": "@currentField",
  "attributes": {
    "iconName": "=if(@currentField == 'None' || @currentField == '','FavoriteStar','') + if(@currentField == 'Yellow Star','FavoriteStarFill','') + if(@currentField == 'Orange Star','FavoriteStarFill','') + if(@currentField == 'Red Star','FavoriteStarFill','') + if(@currentField == 'Purple Star','FavoriteStarFill','') + if(@currentField == 'Blue Star','FavoriteStarFill','') + if(@currentField == 'Green Star','FavoriteStarFill','') + if(@currentField == 'Alert','AlertSolid','') + if(@currentField == 'Arrow','MSNVideosSolid','') + if(@currentField == 'Checkmark','CompletedSolid','') + if(@currentField == 'Info','InfoSolid','') + if(@currentField == 'Question','UnknownSolid','')",
    "title": "@currentField"
  },
  "style": {
    "--inline-editor-border-color": "Green",
    "cursor": "pointer",
    "font-size": "24px",
    "color": "=if(@currentField == 'None' || @currentField == '','#DDD','') + if(@currentField == 'Yellow Star','#f6c94b','') + if(@currentField == 'Orange Star','#f7a24b','') + if(@currentField == 'Red Star','#e57b72','') + if(@currentField == 'Purple Star','#b866c7','') + if(@currentField == 'Blue Star','#79a8f6','') + if(@currentField == 'Green Star','#56b989','') + if(@currentField == 'Alert','#e57b72','') + if(@currentField == 'Arrow','#f7a24b','') + if(@currentField == 'Checkmark','#56b989','') + if(@currentField == 'Info','#79a8f6','') + if(@currentField == 'Question','#b866c7','')"
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "inlineEditField": "@currentField",
  "attributes": {
    "iconName": "=if(@currentField == 'None' || @currentField == '','FavoriteStar','') + if(@currentField == 'Yellow Star','FavoriteStarFill','') + if(@currentField == 'Orange Star','FavoriteStarFill','') + if(@currentField == 'Red Star','FavoriteStarFill','') + if(@currentField == 'Purple Star','FavoriteStarFill','') + if(@currentField == 'Blue Star','FavoriteStarFill','') + if(@currentField == 'Green Star','FavoriteStarFill','') + if(@currentField == 'Alert','AlertSolid','') + if(@currentField == 'Arrow','MSNVideosSolid','') + if(@currentField == 'Checkmark','CompletedSolid','') + if(@currentField == 'Info','InfoSolid','') + if(@currentField == 'Question','UnknownSolid','')",
    "title": "@currentField"
  },
  "style": {
    "--inline-editor-border-color": "Green",
    "cursor": "pointer",
    "font-size": "24px",
    "color": "=if(@currentField == 'None' || @currentField == '','#DDD','') + if(@currentField == 'Yellow Star','#f6c94b','') + if(@currentField == 'Orange Star','#f7a24b','') + if(@currentField == 'Red Star','#e57b72','') + if(@currentField == 'Purple Star','#b866c7','') + if(@currentField == 'Blue Star','#79a8f6','') + if(@currentField == 'Green Star','#56b989','') + if(@currentField == 'Alert','#e57b72','') + if(@currentField == 'Arrow','#f7a24b','') + if(@currentField == 'Checkmark','#56b989','') + if(@currentField == 'Info','#79a8f6','') + if(@currentField == 'Question','#b866c7','')"
  }
}

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

This sample formats a choice column to use the star icons similar to Gmail.

This sample requires a choice field with these options added:

None
Yellow Star
Orange Star
Red Star
Purple Star
Blue Star
Green Star
Alert
Arrow
Checkmark
Info
Question

Also, it uses inlineEditField, which allows the user to change the icon on the view.

View requirements

This format can be applied to a Choice column

Sample

Solution	Author(s)
generic-star-icon.json	Will Cooper

Version history

Version	Date	Comments
1.0	May 15, 2023	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.

Get this format

How to use this sample

Summary

View requirements

Sample

Version history

Disclaimer

More formats like this

Missing Information Callout

Publishing Status

Country Flag