Sp-dev-docs: Alternating row colors

[kasperbolarsen]

According to https://social.technet.microsoft.com/Forums/en-US/67b7e912-2a44-4e51-bf89-8084141733ff/add-alternate-shading-into-a-modern-sharepoint-lists?forum=onlineservicessharepoint. Alternating row colors is easy, yet I can't find any sample json for that?

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 002a1ee9-dc9f-8dc1-6f3c-ef23297b83d4
• Version Independent ID: 82565c7e-b264-94f5-8708-d4757482e133
• Content: Use view formatting to customize SharePoint
• Content Source: docs/declarative-customization/view-formatting.md
• Product: sharepoint
• GitHub Login: @spdevdocs
• Microsoft Alias: spdevdocs

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[thechriskent]

Thanks for your question! Unfortunately, this isn't possible in View Formatting.

The linked forum post describes creating a calculated column and then referencing it within your format. There are several issues with this approach:

• Calculated columns cannot reliably reference the ID column. Existing rows will have the calculation performed correctly, but new rows will receive this value as 0. This invalidates the MOD approach suggested.
• You can reference calculated columns in your formats, but only if they are part of the view
• Using a static value from the list items will not respect changes to the view (sorts, filters, etc.)

Unfortunately, that means that unless there are no filters, the sort is by ID, the calculated column is visible, and all items were created before the calculated column was added, the proposed solution you linked to won't work as expected.

View Formatting does not currently provide access to the view row index (which is what you would want to use). Additionally, there is no modulo function yet in List Formatting that would allow you to utilize the row Index properly even if it were provided.

[thechriskent]

Great news! This is now possible with View Formatting in O365! You can now use @rowIndex and the modulus operator % to apply classes to alternate rows using the additionalRowClass property.

Here is a sample doing exactly that: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/alternating-rowclass

[thechriskent]

Please let us know if this works for you or if you have any questions. If this solution works for you, feel free to close the issue. Thanks!

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within next 7 days of this comment. Thank you for your contributions to SharePoint Developer activities.

[kasperbolarsen]

Perfekt 😊 It Works great and the sample is spot on. Keep up the great work

[thechriskent]

Awesome! Let us know if there's anything else you need in the future!

[sanjitlpatel]

@rowIndex works in the ListView in JSON used to "Format View" with the rowFormatter class. However, when viewing the List View web part on a Modern Themed site page, @rowIndex returns -1. I was using @rowIndex to calculate the absolute height value for an absolutely positioned list item to work around a bug referenced in the URLs below.
This bug/feature is related to the functionality attempted in the following:
https://github.com/SharePoint/sp-dev-docs/issues/3537
and
https://techcommunity.microsoft.com/t5/SharePoint-Developer/Use-Format-View-on-List-WebPart-to-Create-Tile-View/m-p/360411#M6634

[thechriskent]

@sanjitlpatel I'm not having any trouble referencing @rowIndex on a modern page using the list web part. I recommend opening this as a new issue and provide additional details about the format you are using and the issue you are seeing. Thanks!

[sanjitlpatel]

@thechriskent I've confirmed that the test works with your JSON file. I'll open a new ticket for the issue with rowFormatter.

Thanks.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues