Format list view to customize SharePoint (2023)

  • Article
  • 8 minutes to read

Apply conditional classes on rows

You can use additionalRowClass to apply one or more classes to the entire list row depending on the value of one or more fields in the row. These examples leave the content and structure of list rows intact.

For a list of recommended classes to use inside view formats, please see the Style guidelines in the Use column formatting to customize SharePoint.


Using the additionalRowClass property to apply classes to list rows will leave the formatting of individual columns in place. This allows you to combine view formats with column formatting for some powerful visualizations.

Example: Conditional classes based on a date field

The following image shows a list layout with a class applied based on the value of a date column:

Format list view to customize SharePoint (1)

This example applies the class sp-field-severity--severeWarning to a list row when the item's DueDate is before the current date/time:

(Video) Customize SharePoint List Forms using JSON Formatting (1)

{ "$schema": "", "additionalRowClass": "=if([$DueDate] <= @now, 'sp-field-severity--severeWarning', '')"}

Example: Conditional classes based on the value in a text or choice field

This example was adopted from a column formatting example, Conditional formatting based on the value in a text or choice field, with some important differences to apply the concept to list rows. The column formatting example applies both an icon and a class to a column based on the value of @currentField. The additionalRowClass attribute in view formatting, however, only allows you to specify a class and not an icon. Additionally, since @currentField always resolves to the value of the Title field when referenced inside a view format, this sample refers to the Status field directly (by using the [$Field] syntax inside the additionalRowClass property to determine which class to apply to the row).

{ "$schema": "", "additionalRowClass": "=if([$Status] == 'Done', 'sp-field-severity--good', if([$Status] == 'In progress', 'sp-field-severity--low' ,if([$Status] == 'In review','sp-field-severity--warning', if([$Status] == 'Has issues','sp-field-severity--blocked', ''))))"}

You can find this sample with additional details here: Conditional formatting based on choice field

Example: Alternate Row Formatting based on Modulus

This example applies % (Mod) to a list row with alternate coloring the rows:

{ "$schema": "", "additionalRowClass": "=if(@rowIndex%2==0,'ms-bgColor-themeLight','')"}

Build custom list rows

You can use rowFormatter to define a totally custom layout of field values inside a row using the same syntax used in Column Formatting.

Example: Multi-line view style

The following image shows a list with a custom multi-line view style applied:

Format list view to customize SharePoint (2)

This example uses the rowFormatter element, which totally overrides the rendering of a list row. The rowFormatter in this example creates a bounding <div /> box for every list row. Inside this bounding box, the $Title and $Feedback fields are displayed on separate lines. Under those fields, a button element is displayed that, when clicked, does the same thing as clicking the list row in an uncustomized view, which is opening the property form for the item. This button is displayed conditionally, when the value of the $Assigned_x0020_To field (assumed to be a person/group field) matches the current signed-in user:

{ "$schema": "", "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "attributes": { "class": "sp-row-card" }, "children": [ { "elmType": "div", "style": { "text-align": "left" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-row-title" }, "txtContent": "[$Title]" }, { "elmType": "div", "attributes": { "class": "sp-row-listPadding" }, "txtContent": "[$Feedback]" }, { "elmType": "button", "customRowAction": { "action": "defaultClick" }, "txtContent": "Give feedback", "attributes": { "class": "sp-row-button" }, "style": { "display": { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@me", "[$]" ] }, "", "none" ] } } } ] } ] }}

You can find this sample with additional details here: Multi-line view rendering

You can use groupProps to format group headers with flexibility to add grouped column's data, display name and item count. You can also add group aggregates in the group headers or format it directly in the group footers.

Example: Color coded group header

In the example below we have list with group headers formatted according to column metadata.

(Video) List View Formatting in SharePoint Modern List Views

Format list view to customize SharePoint (3)

In this example below, the headerFormatter for groupProps is used to format the group header and the @group is used to access group info.


The JSON below contains line breaks. These have been added to improve the readability of the code.

{ "$schema": "", "groupProps": { "headerFormatter": { "elmType": "div", "style": { "flex-wrap": "wrap", "display": "flex", "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "border-radius": "6px", "align-items": "center", "white-space": "nowrap", "overflow": "hidden", "margin": "1px 4px 4px 1px" }, "attributes": { "class": "=if(@group.fieldData == 'California', 'sp-css-backgroundColor-blueBackground37', if(@group.fieldData == 'Chicago', 'sp-css-backgroundColor-successBackground50', if(@group.fieldData == 'New York', 'sp-css-backgroundColor-warningBackground50', if(@group.fieldData == 'Seattle', 'sp-css-backgroundColor-blockingBackground50', if(@group.fieldData == 'Washington DC', 'sp-css-backgroundColor-errorBackground50', 'sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary')))))" }, "children": [ { "elmType": "img", "attributes": { "src": "=if(@group.fieldData == 'California', '', if(@group.fieldData == 'Chicago', '', if(@group.fieldData == 'New York', '', if(@group.fieldData == 'Seattle', '', if(@group.fieldData == 'Washington DC', '', '')))))" }, "style": { "max-width": "24px", "max-height": "24px", "margin-top": "2px", "border-radius": "2px" } }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "padding": "5px 5px 5px 5px", "font-weight": "500" }, "txtContent": "@group.fieldData.displayValue" } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "justify-content": "center" }, "children": [ { "elmType": "div", "txtContent": "='has ' + @group.count + if(@group.count > '1', ' employees', ' employee')", "style": { "font-weight": "500" } } ] } ] } ] } }}

Example: Color coded group header with aggregate

In the example below we have list with group headers formatted with group aggregates.

Format list view to customize SharePoint (4)

In this example the hideFooter for groupProps is set to true - to hide the group footer and the @aggregates array is used to display a summary in the group header.


(Video) How To Customize a SharePoint List Form

The JSON below contains line breaks. These have been added to improve the readability of the code.

{ "$schema": "", "groupProps": { "hideFooter": true, "headerFormatter": { "elmType": "div", "style": { "flex-wrap": "wrap", "display": "flex", "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "border-radius": "6px", "align-items": "center", "white-space": "nowrap", "overflow": "hidden", "margin": "1px 4px 4px 1px" }, "attributes": { "class": "=if(@group.fieldData == 'California', 'sp-css-backgroundColor-blueBackground37', if(@group.fieldData == 'Chicago', 'sp-css-backgroundColor-successBackground50', if(@group.fieldData == 'New York', 'sp-css-backgroundColor-warningBackground50', if(@group.fieldData == 'Seattle', 'sp-css-backgroundColor-blockingBackground50', if(@group.fieldData == 'Washington DC', 'sp-css-backgroundColor-errorBackground50', 'sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary')))))" }, "children": [ { "elmType": "img", "attributes": { "src": "=if(@group.fieldData == 'California', '', if(@group.fieldData == 'Chicago', '', if(@group.fieldData == 'New York', '', if(@group.fieldData == 'Seattle', '', if(@group.fieldData == 'Washington DC', '', '')))))" }, "style": { "max-width": "24px", "max-height": "24px", "margin-top": "2px", "border-radius": "2px" } }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "padding": "5px 5px 5px 5px", "font-weight": "500" }, "txtContent": "@group.fieldData.displayValue" } ] }, { "elmType": "div", "forEach": "aggregate in @aggregates", "children": [ { "elmType": "div", "style": { "display": "=if([$aggregate.columnDisplayName] == 'Approved' && Number([$aggregate.value]) < @group.count, 'flex', 'none')", "flex-direction": "row", "justify-content": "center" }, "children": [ { "elmType": "div", "txtContent": "='has approval pending for ' + Number(@group.count - Number([$aggregate.value])) + if(@group.count - Number([$aggregate.value]) > 1 , ' employees', ' employee')", "style": { "font-weight": "500" } } ] } ] } ] } }}

Example: Custom group footer

In the example below we have list with group footer formatted according to aggregate value.

Format list view to customize SharePoint (5)

In this example the footerFormatter for groupProps are used to format the group footer and the @columnAggregate is used to access column aggregate.

{ "$schema": "", "groupProps": { "hideFooter": false, "footerFormatter": { "elmType": "div", "children": [ { "elmType": "div", "attributes": { "iconName": "=if(@columnAggregate.type == 'Average' && @columnAggregate.value < 10, 'SortDown', 'SortUp')" }, "style": { "color": "=if(@columnAggregate.type == 'Average' && @columnAggregate.value < 10, '#d13438', '#107c10')", "font-weight": "600", "margin-top": "10px" } }, { "elmType": "div", "style": { "color": "=if(@columnAggregate.type == 'Average' && @columnAggregate.value < 10, '#d13438', '#107c10')", "font-weight": "600", "margin-top": "10px", "font-family": "Segoe UI" }, "txtContent": "=@columnAggregate.type + ': ' + @columnAggregate.value" } ] } }}

Build custom list footers

You can use footerFormatter to format list footer with access to column aggregates.

Example: Custom list footer

In the example below we have list with formatted footer as per the aggregate value.

Format list view to customize SharePoint (6)

In this example the footerFormatter is set to format the list footer and the @columnAggregate is used to access column aggregate.

{ "$schema": "", "hideFooter": false, "footerFormatter": { "elmType": "div", "attributes": { "class": "ms-fontColor-themePrimary" }, "customCardProps": { "formatter": { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex" }, "txtContent": "=@columnAggregate.type + ' of ' + @columnAggregate.columnDisplayName + ' is ' + @columnAggregate.value" } ], "style": { "height": "10px", "width": "auto", "cursor": "pointer", "font-size": "14px", "padding": "14px" } }, "openOnEvent": "hover", "directionalHint": "bottomCenter", "isBeakVisible": true, "beakStyle": { "backgroundColor": "white" } }, "txtContent": "View details", "style": { "text-decoration": "none", "cursor": "pointer", "font-size": "16px", "margin-top": "10px" } }}

Detailed syntax reference


Optional element. Specifies a JSON object that describes a list row format. The schema of this JSON object is identical to the schema of a column format. For details on this schema and its capabilities, see Formatting syntax reference.


Using the rowFormatter property will override anything specified in the additionalRowClass property. They are mutually exclusive.

(Video) How to Modify SharePoint List Toolbar Buttons with List Formatting

Differences in behavior between the rowFormatter element and column formatting

Despite sharing the same schema, there are some differences in behavior between elements inside a rowFormatter element and those same elements in a column formatting object.

  • @currentField always resolves to the value of the Title field inside a rowFormatter.


Optional element. Specifies a CSS class(es) that is applied to the entire row. Supports expressions.

additionalRowClass only takes effect when there is no rowFormatter element specified. If a rowFormatter is specified, then additionalRowClass is ignored.


Optional element. Specifies whether the ability to select rows in the view is disabled or not. false is the default behavior inside a list view (meaning selection is visible and enabled). true means that users will not be able to select list items.


Optional element. Specifies whether the column headers in the view are hidden or not. false is the default behavior inside a list view (meaning column headers will be visible). true means that the view will not display column headers.


Groups the group related customization options. For details on groupProps, see Group Customization syntax reference


Groups the command bar customization options. For details on commandBarProps, see Command bar customization syntax reference

See also

  • Group customization syntax reference
  • Command bar customization syntax reference
  • Advanced formatting concepts
  • Formatting syntax reference


How do I Format a view in SharePoint list? ›

Go to the list you want to format. On the right side above the list select the Switch view options down arrow and select Format current view. Under Choose layout, select List. In the Format view panel you have several options.

How do I change the Format of a SharePoint list? ›

To open the Format column panel, select a column heading, select Column settings from the menu, and then select Format this column. The Format column panel appears. Copy and paste text from the column formatting JSON reference to columns in your SharePoint list.

How do I configure a layout in SharePoint list? ›

In a SharePoint List / library form, there are three areas in the form where you can customize the formatting. To customize , just select any of the list item or file to view the details, it will show the display form on right side, expand the Edit Form icon and select Configure Layout.

How do you edit layout in list view? ›

Click Search Layouts. Click the down arrow for the Default Layout and select Edit from the dropdown. Use the Add arrow to move these fields into the Selected Fields column, in order. Click Save.

How do I customize SharePoint layout? ›

You can change a page's Page Layout after you have logged in and are editing the page (click the Edit icon or click on the Site Actions dropdown menu and select Edit Page). In the ribbon, click on the Page tab and click the Page Layout dropdown. Select the layout you want and wait for the page to refresh.

How do I format a list? ›

Simply begin the sentence as you normally would and then format each item onto a separate line. End each item with a semicolon, closing the second-to-last item with a semicolon, followed by the word “and” or the word “or”. End the final item with the closing punctuation of the sentence.

What is the best way to structure SharePoint? ›

Follow these best practices:
  1. Use metadata to tag and find your documents.
  2. Whenever possible, centralize and reuse.
  3. Design a site architecture that accounts for the 5,000 list view threshold.
  4. Don't use SharePoint to replace your relational database.
  5. Assign permissions to groups—never to users directly.
Jan 25, 2022

How do I arrange a list in SharePoint? ›

To set up a sort, follow these steps:
  1. Select the Library tab, and then select Create view.
  2. On the create or edit a view page, scroll down to Sort. ...
  3. Select Show the items in ascending order or Show the items in descending order.
  4. Scroll to the top or bottom of the page and select OK.

What is custom view in SharePoint? ›

You can create custom views of a document library to display items in a way that makes sense for you. For example, you can select the columns you want to display and arrange them in the order you want.

How do I get rid of classic view in SharePoint? ›

To exit, select Exit classic experience.
Change the experience for a list or document library
  1. In the modern experience for a list or document library, select Settings. ...
  2. Towards the end of the list of settings, select Advanced settings and select List experience.
  3. Select one of the three options, and to save, select OK.

Can we modify standard list view? ›

Click Edit next to the list view name. If you see Clone instead of Edit, you don't have permission to edit this list view. Use Clone to clone the list view, save it under a different name and then edit the cloned list view. In Specify Filter Criteria, change your Filter By Owner selection, if desired.

How do you control list view? ›

The Windows Forms ListView control displays a list of items with icons. You can use a list view to create a user interface like the right pane of Windows Explorer. The control has four view modes: LargeIcon, SmallIcon, List, and Details.

How do I enable inline editing in list view? ›

To enable inline editing, edit your list view filters so it contains only one record type. Inline edit doesn't apply to components in the small region. You can inline edit in Recently Viewed or Team list views that are predefined to contain only one record type.

Can you edit in design view? ›

Understand Design view

You can: Add a wider variety of controls to your report, such as labels, images, lines, and rectangles. Edit text box control sources in the text boxes themselves, without using the property sheet. Change certain properties that are not available in Layout view.

How do I change the default columns in a list view? ›

Right click on the list header Configure -> List layout. Click on list layout and add the columns. This will change globally. You can set the default layout with Configure> List Layout.

How do I create a custom layout in SharePoint online? ›

Create a page layout
  1. In Design Manager, in the left navigation pane, choose Edit Page Layouts.
  2. Choose Create a page layout.
  3. In the Create a Page Layout dialog box, enter a name for your page layout.
  4. Select a master page. ...
  5. Select a content type. ...
  6. Choose OK.
Jun 21, 2022

What are the SharePoint site layout options? ›

SharePoint uses a number of different layout types for web parts. The most common are grid, list, filmstrip, carousel, and compact. Each one of these five layouts serves a different purpose, depending on the layout, breakpoints, and content density of a page.

How do I modernize SharePoint? ›

We can change SharePoint online site from classic to modern by connecting it to Office 365 group. Here is how: Navigate to your SharePoint Online classic site >> Click on Settings gear >> Choose “Connect to a new Office 365 Group” from the settings menu.

How do I format rows in Sharepoint list? ›

To format rows in 'List' or 'Compact List' layout, select 'List' in 'Choose layout' dropdown in the formatting pane and use the rowFormatter or additionalRowClass properties. To format cards in 'Gallery' layout, select 'Gallery' in 'Choose layout' dropdown in the formatting pane and use the formatter property.

How do I format text in a sharepoint list? ›

Edit an enhanced rich text column
  1. Open the list you want to edit.
  2. Select the list item, right click, and then select Edit.
  3. Next to the Text label, click the Pencil. ...
  4. Add text and format it any way you want (change the font, font size, font color, highlight, bold, italics, underline, bullet points, numbering, and so on.

What does a format list do? ›

The Format-List cmdlet formats the output of a command as a list of properties in which each property is displayed on a separate line. You can use Format-List to format and display all or selected properties of an object as a list ( Format-List -Property * ).

What is list format in outline? ›

An outline numbered list is any type of list other than a simple bulleted or numbered list. That is, if the list has a mix of bullets and numbers, or if the list is a structured, hierarchical list (an outline), you need to use the outline numbered list features.

How do you format a list of tables and figures? ›

On the Insert menu, click Index and Tables, and then click the Table of Figures tab. Click Options, and then select the Style check box. On the Style pop-up menu, click the style name that is used for the figure captions, and then click OK. In the Formats box, select one of the designs.

How do you make a list of lists flat? ›

Flattening a list of lists entails converting a 2D list into a 1D list by un-nesting each list item stored in the list of lists - i.e., converting [[1, 2, 3], [4, 5, 6], [7, 8, 9]] into [1, 2, 3, 4, 5, 6, 7, 8, 9] .

How do I create a custom list in SharePoint? ›

Create a list on a classic SharePoint or a SharePoint Server 2019 site
  1. Select Settings. ...
  2. Select + New, and then select List.
  3. Enter a Name for the list, and optionally, a Description. ...
  4. Select Create.
  5. When your list opens, to add room for more types of information to the list, select + or + Add column.

What is the basic SharePoint structure? ›

Classic SharePoint architecture is typically built using a hierarchical system of site collections and subsites, with inherited navigation, permissions, and site designs. Once built, this structure can be inflexible and difficult to maintain. In the modern SharePoint experience, subsites aren't recommended.

How do I organize my SharePoint tiles? ›

Go to your new Tiles list. In the Items tab in the ribbon, click the List tab in the ribbon, and click the Create Column button. Name it Show On, make it a Choice column, and choose Checkboxes (allow multiple selections). Type the names of the different pages on your site where you may want to display these tiles.

Which tools can be used to customize list forms in SharePoint online? ›

InfoPath was the most widely used tool to customize SharePoint list forms. Nonetheless, Microsoft has different plans for form designing options. If you are using the modern SharePoint list or the modern experience, then Microsoft is suggesting using Microsoft PowerApps.

Why can't I save a SharePoint list as a template? ›

Root Cause: We don't get the “Save list as Template” link on the list settings page in sites with custom script disabled. To enable the save list as a template in SharePoint Online, we should enable the custom script for a site!

How do I customize a SharePoint list with power apps? ›

Open your list, select Integrate -> Power Apps -> Customize forms. In Power Apps Studio, select File, and then select See all versions. The Versions page opens in a new browser tab. If you don't see the See all versions button, select Save.

How do I rearrange fields in SharePoint list? ›

On the List or Library Settings page, click the “Column Ordering” link under columns. On the change column ordering page, set the position of columns from drop-down values for the listed columns in the desired order. Once all columns are in the desired order, click the OK button to save the order.

How do I organize my Microsoft lists? ›

Click or tap the three dots in the top right of your list to open the more menu. Then, select Sort by and you'll have the option to organize your list by Importance, Due date, Added to My Day, Alphabetically or Creation date.

How do I rearrange items in Microsoft lists? ›

Reposition a task within a list. To reposition a task within a list, you can drag and drop it. Select and hold the task while you drag it to its new position within the list. Then, release it to drop it into position.

How do I add a custom button to list view? ›

In the App Setup section, Click Customize. Click the drop-down arrow for the object you want to customize. Click Buttons, Links, and Actions. Click New Button or Link.
Populate the fields as follows:
  1. Label: Conga Grid.
  2. Name: crmc_Grid.
  3. Display Type: List Button.
  4. Display Checkboxes (for Multi-Record Selection): Enabled.

How do I change a list view to a Datasheet in SharePoint? ›

Here is how: Open the Site in SharePoint Designer, navigate to the target List/Library, Copy and Paste the “mod-view. aspx” file, give a relevant name to the copied file, say “Datasheet. aspx”. From that page, you can use Datasheet View, which allows editing!

How do I change the buttons on a list view? ›

Navigate to Setup | Object Manager | Lead | List View Button Layout. Edit the List View by selecting the drop-down next to it. Uncheck the New[New] from the Standard Buttons list. Use this list view to add or remove any buttons from the list views.

How do I give custom and create permissions for list views? ›

For Custom Profile:
  1. From Setup, enter Profiles in the Quick Find box, then select Profiles.
  2. Select the Profile of affected user.
  3. Click on Administrative Permissions.
  4. Click on "Edit".
  5. Check "Manage Public List Views" and "Create and Customize List Views".
  6. Save.

How do I change to classic view in SharePoint? ›

Users who wish to view the classic experience while in SharePoint Online may click Return to classic SharePoint in the bottom left corner of the page. To exit the classic experience and return to the modern experience, click Exit classic experience in the bottom left corner of the page.

How do I create a tile view on modern SharePoint lists? ›

How to create a tile view on modern SharePoint list: how do I adapt JSON code found
  1. Navigate to your list.
  2. On the right side of the command bar click on All Items and then Format this View.
  3. Format view: Select Gallery.
  4. Click Advance mode. Paste in JSON code and click Save.

What is Datasheet view SharePoint? ›

SharePoint datasheet view is a quick nifty way to update metadata on multiple items at once. Unfortunately, some of the list and libraries such as picture libraries in SharePoint 2010 doesn't provide datasheet view!

What is the purpose of custom views? ›

You can use a custom view to save specific display settings (such as hidden rows and columns, cell selections, filter settings, and window settings) and print settings (such as page settings, margins, headers and footers, and sheet settings) for a worksheet so that you can quickly apply these settings to that worksheet ...

What is customized view? ›

Custom Views is just a way to make an android developer a painter. When you need to create some custom and reuse the views when it is not provided by the Android Ecosystem. Custom Views can be used as widgets like TextView, EditText etc.

What are SharePoint list views? ›

What is a List View in SharePoint? SharePoint uses views to show list or library data. Whenever a list or library is created by default at least one view got created. For a list, the default view comes as All Items and for a document library, the default view comes as All Documents.


1. SharePoint custom list view (modern experience)
2. How to Customize SharePoint list forms with Power Apps - Beginners Tutorial
(Reza Dorrani)
3. Create Tiles view on modern SharePoint list | Customize SharePoint List View | Using JSON Formatting
(DS TechMirror)
4. Format SharePoint List Views Using Custom JSON
(Lernen Tech)
5. SharePoint List Formatting for Grouped Views
(April Dunnam)
6. SharePoint List View and Column Formatting using OOTB Feature | SharePoint List Formatting.
(Lernen Tech)
Top Articles
Latest Posts
Article information

Author: Golda Nolan II

Last Updated: 02/28/2023

Views: 5581

Rating: 4.8 / 5 (58 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Golda Nolan II

Birthday: 1998-05-14

Address: Suite 369 9754 Roberts Pines, West Benitaburgh, NM 69180-7958

Phone: +522993866487

Job: Sales Executive

Hobby: Worldbuilding, Shopping, Quilting, Cooking, Homebrewing, Leather crafting, Pet

Introduction: My name is Golda Nolan II, I am a thoughtful, clever, cute, jolly, brave, powerful, splendid person who loves writing and wants to share my knowledge and understanding with you.