In SharePoint Online List, how to use JSON to wrap text and to give alternate background colors to list items in the view?

Question

In SharePoint Online List, how to use JSON to wrap text and to give alternate background colors to list items in the view?

frob 4,281

Hi there

In SharePoint Online List, how to use JSON to wrap text and to give alternate background colors to list items in the view?
How to modify the code below to add the alternating background for list items to it?

Thanks.

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style":{
        "white-space":"wrap"
  }, 
  "txtContent": "@currentField"
}

1 answer

Your answer

Answer 1

CaseyYang-MSFT 10,466

Hi @frob ,

You could use following JSON code to alternate the background color.

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",  
  "additionalRowClass": "=if(@rowIndex%2==0,'ms-bgColor-themeLight','')"  
}

Your JSON code is SharePoint column formatting, it only works in column. You have to format the columns you want to wrap text with this codes.

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.

frob 4,281 Reputation points

2022-02-08T18:31:19.833+00:00

Hi @CaseyYang-MSFT

When I combine both codes (alternate color and text wrapping), the code does not work.
(Both pieces of code work individually, though)

I am looking for code that works to make BOTH of the above possible.

Thank you.
CaseyYang-MSFT 10,466 Reputation points

2022-02-11T06:33:50.7+00:00

Hi @frob ,

We can't combine alternate color and text wrapping codes. Because the warp text json is column formatting and the alternate background colors json is view formatting. So we have to add wrap text codes in your column settings and add alternate background colors codes in view.

warp text:
Column settings > Format this column

alternate background colors:
All Items > Format current view
frob 4,281 Reputation points

2022-02-12T00:59:03.177+00:00

Hi
One of the images you attached (173418-1.jpg) is not visible, please reattach when you get a chance.

Thanks.
CaseyYang-MSFT 10,466 Reputation points

2022-02-14T09:09:34.34+00:00

Hi @frob ,

Sorry for the delayed response.
frob 4,281 Reputation points

2022-02-14T16:57:07.8+00:00

Hi Casey

I will prefer to wait and hope that someone can provide a way to have alternate color and text wrapping BOTH for my web part. (I hope that is okay).

Thanks again for your time, Casey!
CaseyYang-MSFT 10,466 Reputation points

2022-02-21T09:21:42.383+00:00

Hi @frob ,

Thanks for your reply.
Julia Wade 0 Reputation points

2023-11-13T10:27:10.7366667+00:00

I track training for many customer and sometimes we enter the date the training was completed and other times we enter the expiration date. Each column is a little different depending on the client and date.

I have spent hours googling and trying to figure this out and can't. Is this even possible? I need 2 different JSON single codes to insert into my lists (per column) to have certain formatting. Ideally, I would like the entire cell to change color but if just the text changes, that is fine too.

The first code I need is for when we enter the "Date Completed". I need the code to do all of the below:

Turns the text Yellow after a certain amount of days from the date entered in the cell (then I can set this to however many days/years the training is good for) and keep it yellow until it is updated or until turns Red

Turns the text Red after a certain amount of days and keeps it red until it is updated

Puts N/A in the cell if the cell is blank

Turns the date “1/1/1900” red automatically

(example: If the training is good for 1 year and they completed it today, we would enter “11/12/2023” – I would want it to turn yellow after 320 days and then red at 365 days and stay red for all days after 365 until updated)

I also need a single code to enter for the expiration date columns that does the below:

Turns text yellow when 45 days away from the date entered

Turns red when it hits the date entered or any day after that date until it is updated

Puts “N/A in the cell if the cell is blank

Turns the date” 1/1/1900” red automatically

(example: For these, not as common but used when tracking date of driver’s license expiration or something similar when not all dates are good for the same amount of time. If there license expires on 10/20/2026 then we would enter “10/20/2026” and I would need it to turn Yellow 45 days before 10/20/26 and then turn red at 10/20/26 and stay red until it is updated.)

Share via

In SharePoint Online List, how to use JSON to wrap text and to give alternate background colors to list items in the view?

1 answer

Your answer