Ratings for Lists example

[BjarniPeturFridjonsson]

Column format for Ratings on lists

There are a few examples out there to improve the displaying of ratings through "Column Formatting" but all of them end up disrupting the underlying functionality of the ratings.

Sample Description (what should it do)

This is how it is now and you can't change the colors or sizes of anything.

and how it could look but of course people would be able to use either an icon or text trough "txtContent" in the script.

What I have been using to try this out is like this:

{
    "_comment": "Dynamic Icon Rating",
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
      "font-size": "20px",
      "title": "=@currentField + if(@currentField != '1', 's', '')",
	  "cursor": "pointer"
    },
    "children": [
      {
        "elmType": "span",
        "attributes": {
          "iconName": "favoriteStarFill",
          "class": "='ms-fontColor-yellow' + if(1==1,' ms-fontColor-green--hover','')"
        },
        "style": {
          "padding-right": "4px",
		  "display": "inline"
        }
		,"customRowAction": { "action": "setValue","actionInput": { "myFieldName": "1" } }
      },
      {
        "elmType": "span",
        "attributes": {
          "iconName": "=if(Number(@currentField) > 1, 'favoriteStarFill', 'favoriteStar')",
          "class": "='ms-fontColor-' + if(Number(@currentField) > 1, 'yellow', 'gray40') + if(1==1,' ms-fontColor-green--hover','')"
        },
        "style": {
          "padding-right": "4px",
		  "display": "inline"
        }
		,"customRowAction": { "action": "setValue","actionInput": { "myFieldName": "2" } }
      },
      {
        "elmType": "span",
        "attributes": {
          "iconName": "=if(Number(@currentField) > 2, 'favoriteStarFill', 'favoriteStar')",
          "class": "='ms-fontColor-' + if(Number(@currentField) > 2, 'yellow', 'gray40') + if(1==1,' ms-fontColor-green--hover','')"
        },
        "style": {
          "padding-right": "4px",
		  "display": "inline"
        }
		,"customRowAction": { "action": "setValue","actionInput": { "myFieldName": "3" } }
      },
      {
        "elmType": "span",
        "attributes": {
          "iconName": "=if(Number(@currentField) > 3, 'favoriteStarFill', 'favoriteStar')",
          "class": "='ms-fontColor-' + if(Number(@currentField) > 3, 'yellow', 'gray40') + if(1==1,' ms-fontColor-green--hover','')"
        },
        "style": {
          "padding-right": "4px",
		  "display": "=if(5 > 3,'inline','none')"
        }
		,"customRowAction": { "action": "setValue","actionInput": { "myFieldName": "4" } }
      },
      {
        "elmType": "span",
        "attributes": {
          "iconName": "=if(Number(@currentField) > 4, 'favoriteStarFill', 'favoriteStar')",
          "class": "='ms-fontColor-' + if(Number(@currentField) > 4, 'yellow', 'gray40') + if(1==1,' ms-fontColor-green--hover','')"
        },
        "style": {
          "padding-right": "4px",
		  "display": "=if(5 > 4,'inline','none')"
        }
		,"customRowAction": { "action": "setValue","actionInput": { "myFieldName": "5" } }
      }
    ]
  }

It's only a rough outline of what we could use for the sample.

I can help with this.

If you can get me the customAction that is run when you press the stars, I could create a pull request and document this.