SharePoint: what does JSON error message mean

Question

SharePoint: what does JSON error message mean

vrm 711

Using an online JSON validator, I was informed that my code has the following error:

Error: Parse error on line 10:
...eld-fontSizeSmall'"}
----------------------^
Expecting ':', got '}'

My JSON code

 { 	"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", 	"additionalEventClass": {
		"operator": "==",
 		"operands": [
 			"[$Activity]",
 			"Conference or Event"
 		]
 	},
 	"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , 'sp-css-backgroundColor-BgRed sp-css-color-WhiteFont')+' sp-field-fontSizeSmall'"
 }

Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Ling Zhou_MSFT 23,620 Reputation points Microsoft External Staff

2023-09-20T02:00:53.1466667+00:00

Hi @vrm,

Thank you for posting in this community.

I would like to confirm you with some questions about your issue:

1.Are you using SharePoint Online or SharePoint Server 2019?

2.What kind of effect are you trying to achieve with this JSON? What are the columns involved and what are the types of those columns?

This information will help me to reproduce your issue in my test environment and find the problem in the JSON.

Please be careful not to disclose your personal information.

Thank you for your time and efforts in advance. If there is any other assistance I can provide, please feel free to let me know.

Vanessa 356

I am using SharePoint Online.

My custom list has four columns:

Title (single line of text)
Activity (choice)
Start Date
End Date

The goal is a colored coded calendar. The following JSON works. If a category is selected, the title is rendered in a specific text and background color.

I have filtered the list to create a calendar view for each activity. I want to shorten the JSON for each calendar view to just the needed code. For example, the code for the Conference and Events calendar view to have only the code needed to render the white text and red background for Conference and Events items.

Thanks.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalEventClass": {
    "operator": ":",
    "operands": [
      {
        "operator": "==",
        "operands": [
          "[$Activity]",
          "Blog Post"
        ]
      },
      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGreen' , 'sp-css-backgroundColor-BgGreen sp-css-color-WhiteFont')+' sp-field-fontSizeSmall'",
      {
        "operator": ":",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "[$Activity]",
              "Campaign Push"
            ]
          },
          "=if(@isSelected == true, 'sp-css-color-BlackFont sp-css-backgroundColor-BgCoral' , 'sp-css-backgroundColor-BgCoral sp-css-color-BlackFont')+' sp-field-fontSizeSmall'",
          {
            "operator": ":",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$Activity]",
                  "Conference or Event"
                ]
              },
              "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , 'sp-css-backgroundColor-BgRed sp-css-color-WhiteFont')+' sp-field-fontSizeSmall'",
              {
                "operator": ":",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "[$Activity]",
                      "MIR Release"
                    ]
                  },
                  "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkRed' , 'sp-css-backgroundColor-BgDarkRed sp-css-color-WhiteFont')+' sp-field-fontSizeSmall'",
                  {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$Activity]",
                          "Newsletter Blast"
                        ]
                      },
                      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGray' , 'sp-css-backgroundColor-BgGray sp-css-color-WhiteFont')+' sp-field-fontSizeSmall'",
                      {
                        "operator": ":",
                        "operands": [
                          {
                            "operator": "==",
                            "operands": [
                              "[$Activity]",
                              "Observance Day"
                            ]
                          },
                          "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgOrange' , 'sp-css-backgroundColor-BgOrange sp-css-color-WhiteFont')+' sp-field-fontSizeSmall'",
                          {
                            "operator": ":",
                            "operands": [
                              {
                                "operator": "==",
                                "operands": [
                                  "[$Activity]",
                                  "Paid Media Run"
                                ]
                              },
                              "=if(@isSelected == true, 'sp-css-color-BlackFont sp-css-backgroundColor-BgSage' , 'sp-css-backgroundColor-BgSage sp-css-color-BlackFont')+' sp-field-fontSizeSmall'",
                              {
                                "operator": ":",
                                "operands": [
                                  {
                                    "operator": "==",
                                    "operands": [
                                      "[$Activity]",
                                      "Podcast Episode"
                                    ]
                                  },
                                  "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgPurple' , 'sp-css-backgroundColor-BgPurple sp-css-color-WhiteFont')+' sp-field-fontSizeSmall'",
                                  {
                                    "operator": ":",
                                    "operands": [
                                      {
                                        "operator": "==",
                                        "operands": [
                                          "[$Activity]",
                                          "Social Post"
                                        ]
                                      },
                                      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgTeal' , 'sp-css-backgroundColor-BgTeal sp-css-color-WhiteFont')+' sp-field-fontSizeSmall'",
                                      {
                                        "operator": ":",
                                        "operands": [
                                          {
                                            "operator": "==",
                                            "operands": [
                                              "[$Activity]",
                                              "Video Release"
                                            ]
                                          },
                                          "=if(@isSelected == true, 'sp-css-color-BlackFont sp-css-backgroundColor-BgGold' , 'sp-css-backgroundColor-BgGold sp-css-color-BlackFont')+' sp-field-fontSizeSmall'",
                                          ""
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

4 answers

Your answer

Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Ling Zhou_MSFT 23,620 Reputation points Microsoft External Staff

2023-09-20T02:00:53.1466667+00:00

Hi @vrm,

Thank you for posting in this community.

I would like to confirm you with some questions about your issue:

1.Are you using SharePoint Online or SharePoint Server 2019?

2.What kind of effect are you trying to achieve with this JSON? What are the columns involved and what are the types of those columns?

This information will help me to reproduce your issue in my test environment and find the problem in the JSON.

Please be careful not to disclose your personal information.

Thank you for your time and efforts in advance. If there is any other assistance I can provide, please feel free to let me know.

Answer 1

vrm 711

The code to display one colored coded activity in a view:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalEventClass": {
    "operator": ":",
    "operands": [
      {
        "operator": "==",
        "operands": [
          "[$Activity]",
          "Conference or Event"
        ]
      },
      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , 'sp-css-backgroundColor-BgRed sp-css-color-WhiteFont')+' sp-field-fontSizeSmall'",
      ""
    ]
  }
}

Ling Zhou_MSFT 23,620 Reputation points Microsoft External Staff

2023-09-25T06:05:51.0933333+00:00

Hi @vrm,

I am kindly following up to see if you have any remaining questions or concerns for this issue. Is there a problem with the answer I provided last time? If so, please describe your problem in detail and we will try to solve it for you.

Answer 2

I wanted the code for the individual views to be as simple as possible. The following is an example of what worked for me:

{   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",   "additionalEventClass": {     "operator": ":",     "operands": [       {         "operator": "==",         "operands": [           "[$Activity]",           "Conference or Event"         ]       },       "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , 'sp-css-backgroundColor-BgRed sp-css-color-WhiteFont')+' sp-field-fontSizeSmall'",       ""     ]   } }

Answer 3

Hi @vrm,

Apologize for the late reply.

Please select your calendar view -> format current view->Advanced mode.

User's image

Please copy the JSON below:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/calendar-formatting.schema.json",
  "additionalEventClass": "=if([$Activity] =='Blog Post' && @isSelected == true,'sp-css-color-WhiteFont sp-css-backgroundColor-BgGreen sp-css-backgroundColor-BgGreen sp-css-color-WhiteFont ',if([$Activity] =='Campaign Push' && @isSelected == true,'sp-css-color-BlackFont sp-css-backgroundColor-BgCoral sp-css-backgroundColor-BgCoral sp-css-color-BlackFont',if([$Activity] =='Conference or Event' && @isSelected == true,'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed sp-css-backgroundColor-BgRed sp-css-color-WhiteFont',if([$Activity] =='MIR Release' && @isSelected == true,'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkRed sp-css-backgroundColor-BgDarkRed sp-css-color-WhiteFont',if([$Activity] =='Newsletter Blast' && @isSelected == true,'sp-css-color-WhiteFont sp-css-backgroundColor-BgGray sp-css-backgroundColor-BgGray sp-css-color-WhiteFont',if([$Activity] =='Observance Day' && @isSelected == true,'sp-css-color-WhiteFont sp-css-backgroundColor-BgOrange sp-css-backgroundColor-BgOrange sp-css-color-WhiteFont',if([$Activity] =='Paid Media Run' && @isSelected == true,'sp-css-color-BlackFont sp-css-backgroundColor-BgSage sp-css-backgroundColor-BgSage sp-css-color-BlackFont',if([$Activity] =='Social Post' && @isSelected == true,'sp-css-color-WhiteFont sp-css-backgroundColor-BgTeal sp-css-backgroundColor-BgTeal sp-css-color-WhiteFont',if([$Activity] =='Video Release' && @isSelected == true,'sp-css-color-BlackFont sp-css-backgroundColor-BgGold sp-css-backgroundColor-BgGold sp-css-color-BlackFont',if([$Activity] =='Podcast Episode' && @isSelected == true,'sp-css-color-WhiteFont sp-css-backgroundColor-BgPurple sp-css-backgroundColor-BgPurple sp-css-color-WhiteFont','')))))))))) + 'sp-field-fontSizeSmall'"
}

enter image description here

Also, I have a couple of clarifications:

I checked the JSON you provided, where operator and operands are syntax from SharePoint2019 JSON formatting, which is not available for SharePoint Online.

2.For Calendar view JSON formatting, you should use "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/calendar-formatting.schema. json" instead of "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json".

For more SharePoint Online views on JSON formatting, you can check out these articles: SharePoint Online view formatting.

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Vanessa 356 Reputation points

2023-09-21T11:44:55.99+00:00

The code you provided did not work in my environment. Row-formatting works.

While I still don't understand the error message, I found that the following code format yields the results I want:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "additionalEventClass": { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$Activity]", "Conference or Event" ] }, "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , 'sp-css-backgroundColor-BgRed sp-css-color-WhiteFont')+' sp-field-fontSizeSmall'", "" ] } }

Answer 4

Hi @vrm,

I apologize that I may have misunderstood your needs. Let me confirm with you that your requirement is that you want the text and background color to be modified when the corresponding time is selected. Please correct me if I misunderstood.

Unselected:

User's image

Selected:

User's image

If I understand correctly, you can try replacing the JSON below:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalEventClass": {
    "operator": ":",
    "operands": [
      {
        "operator": "==",
        "operands": [
          "[$Activity]",
          "Blog Post"
        ]
      },
      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGreen' , '')+' sp-field-fontSizeSmall'",
      {
        "operator": ":",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "[$Activity]",
              "Campaign Push"
            ]
          },
          "=if(@isSelected == true, 'sp-css-color-BlackFont sp-css-backgroundColor-BgCoral' , '')+' sp-field-fontSizeSmall'",
          {
            "operator": ":",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$Activity]",
                  "Conference or Event"
                ]
              },
              "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , '')+' sp-field-fontSizeSmall'",
              {
                "operator": ":",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "[$Activity]",
                      "MIR Release"
                    ]
                  },
                  "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkRed' , '')+' sp-field-fontSizeSmall'",
                  {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$Activity]",
                          "Newsletter Blast"
                        ]
                      },
                      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGray' , '')+' sp-field-fontSizeSmall'",
                      {
                        "operator": ":",
                        "operands": [
                          {
                            "operator": "==",
                            "operands": [
                              "[$Activity]",
                              "Observance Day"
                            ]
                          },
                          "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgOrange' , '')+' sp-field-fontSizeSmall'",
                          {
                            "operator": ":",
                            "operands": [
                              {
                                "operator": "==",
                                "operands": [
                                  "[$Activity]",
                                  "Paid Media Run"
                                ]
                              },
                              "=if(@isSelected == true, 'sp-css-color-BlackFont sp-css-backgroundColor-BgSage' , '')+' sp-field-fontSizeSmall'",
                              {
                                "operator": ":",
                                "operands": [
                                  {
                                    "operator": "==",
                                    "operands": [
                                      "[$Activity]",
                                      "Podcast Episode"
                                    ]
                                  },
                                  "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgPurple' , '')+' sp-field-fontSizeSmall'",
                                  {
                                    "operator": ":",
                                    "operands": [
                                      {
                                        "operator": "==",
                                        "operands": [
                                          "[$Activity]",
                                          "Social Post"
                                        ]
                                      },
                                      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgTeal' , '')+' sp-field-fontSizeSmall'",
                                      {
                                        "operator": ":",
                                        "operands": [
                                          {
                                            "operator": "==",
                                            "operands": [
                                              "[$Activity]",
                                              "Video Release"
                                            ]
                                          },
                                          "=if(@isSelected == true, 'sp-css-color-BlackFont sp-css-backgroundColor-BgGold' , '')+' sp-field-fontSizeSmall'",
                                          ""
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Vanessa 356 Reputation points

2023-09-25T10:43:30.4666667+00:00

As I stated on September 22, 6:01AM, I wanted the code for individual views to be as simple as possible and the following format worked for me. So, if you want to copy this as the answer, I will accept it.

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "additionalEventClass": { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$Activity]", "Conference or Event" ] }, "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , 'sp-css-backgroundColor-BgRed sp-css-color-WhiteFont')+' sp-field-fontSizeSmall'", "" ] } }

Share via

SharePoint: what does JSON error message mean

4 answers

Your answer