Category

• Question
• Bug
• Enhancement

Observed Behavior

I have a custom list with column formatting applied to a hyperlink field to change the data from url text to a clickable icon. When using urls via copy link UI in Sharepoint, it does not render the clickable icon. The outcome renders nothing.

I noticed this only happens for urls that start with this format:
https://tenant.sharepoint.com/sites/SiteCollection/:letter:/letter/...

In order to fix this I have to change the url to the following format:
https://tenant.sharepoint.com/sites/SiteCollection/subsite/subsite/lib/doc.txt

Steps to Reproduce

1. On any custom list add the following code to a column formatting on a Hyperlink column

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "elmType": "a",
  "attributes": {
    "iconName": "Certificate",
    "href": "@currentField",
    "title": "@currentField.title"
  }
}

2. Go to any document library. Select document and click copy a link.
3. Use copied link for column defined in step 1
4. Icon does not appear or link

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior
Would expect the column to be colored with the associated field severity color and the associated icon.

Observed Behavior
The field is name is Priority and it is a Choice field with 3 values, Low, Medium, & High. When I insert the following JSON code in to the Column Formatting area none of the list items are displayed. I am using similar code with other Choice fields and don't have a problem. What am I missing?

Thanks in advance for the help.
John

Start of Code

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"debugMode": true,
"elmType": "div",
"attributes": {
"class": "=if(@currentField == 'Normal', 'sp-field-severity--good',
if(@currentField == 'Low', 'sp-field-severity--low',
if(@currentField == 'High','sp-field-severity--blocked', ''))"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(@currentField == 'Normal','CheckMark',
if(@currentField == 'Low', 'Forward',
if(@currentField == 'High','Warning','')"
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}

End of Code

Thanks for your contribution! Sharing is caring.

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

I am trying to set the JSON to change the contents of a calculated cell (counting the total of three other cells) to red when the value is below 4, orange for 5-11 and green 11-15.

Observed Behavior

Try as I might, the colours are inverted (e.g. a high score of 15 is coming up red). I've tried moving the colours and number ranges around the JSON code and have managed to get myself in a complete mess!

Steps to Reproduce

Here is the code I have so far:
{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"color": "white",
"padding-left": "14px",
"background-color": {
"operator": "?",
"operands": [
{
"operator": ">=",
"operands": [
"@currentField",
11
]
},
"#e81123",
{
"operator": "?",
"operands": [
{
"operator": ">=",
"operands": [
"@currentField",
8
]
},
"#ff8c00",
{
"operator": "?",
"operands": [
{
"operator": ">=",
"operands": [
"@currentField",
5
]
},
"#ffb900",
"#107c10"
]
}
]
}
]
}
}
}

documentation update required

sp-dev-list-formatting/column-samples/generic-staticmap/

doesn't seem the api is free anymore

https://developers.google.com/maps/documentation/maps-static/usage-and-billing

$2usd per 1000

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

When I change an item in a list which has a list formatting applied and button elements used (see https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#detailed-syntax-reference), the item should be opened afterwards again if I click on the item.

Observed Behavior

After changing of an item the list is re-rendering with the new information (correct), but the event handler to open the item again was removed. So it's not possible to open the item again without refreshing the page.

Steps to Reproduce

see above

Thank you for your support. Please feel free to contact me for further details.

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

All items fetched in background when scrolling through paged list content in new experience should appear and json format be applied to them

Observed Behavior

With certain page sizes (set via Item limit in list settings) it either showed just first n items and no control to fetch more or it showed first n items, fetched even some more, showing the "Tap to get more items / Searching next 5k items", but when I scrolled certain number of times, the scrollbar jumped right to the beginning and did that whenever I tried to get to the rest of the list items. This was consistent across browsers, on win pc and android phone.

Steps to Reproduce

1. Set up list in new experience with Item limit 10 and say 100+ items to see the dynamic paging. In my case I have 470 items and tried Item limit from 1 to 30 with no luck.
2. Make its view json formatted using row formatter - I used the modified generic tile view sample from this repository.
3. Scroll the tiles to get to the end of the list

Category

• Question

Expected or Desired Behavior

For example, I tried to use the percent-data-bar but mine is green (??) and I prefer in blue version, like in the tutorial screenshots.
How can I change just the background and border colors for sp-field-dataBars class ?

Another example, I use text-conditional-format for the status of my tasks and I want to add a new status in blue background. So I want to use an existing CSS class (sp-field-severity--low ?) and change just the background color, is it possible ?

Thank you for your help. I am a beginner with SharePoint.

Important

I want to show one column Multiple line of text in the list formatting. Right now is showing the HTML and not the rich text.

Category

• Question
• Bug
• Enhancement

Observed Behavior

Steps to Reproduce

Column config.

JSON
{
"elmType": "div",
"style": {
"flex-grow": "1"
},
"children": [
{
"elmType": "span",
"style": {
"display": "block"
},
"attributes": {
"class": "ms-fontWeight-semibold ms-fontSize-m"
},
"txtContent": "Answer:"
},
{
"elmType": "span",
"style": {
"display": "=if([$Answer] == '', 'none', 'block')",
"padding-left": "8px"
},
"txtContent": "=toString([$Answer])",
"attributes": {
"class": "ms-fontSize-s ms-fontWeight-regular ms-fontColor-neutralSecondary"
}
},
{
"elmType": "span",
"style": {
"display": "=if([$Answer] == '', 'block', 'none')",
"padding-left": "8px"
},
"txtContent": "No answer entered",
"attributes": {
"class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-neutralTertiary"
}
}
]
}

• Question
• Bug
• Enhancement

Expected or Desired Behavior

When you add column formatting to one column, this should not affect how other columns in the view are displayed.

Observed Behavior

When you add column formatting to one field that is displayed in the view, calculated fields (with returned data type of date/time) that are displayed in the view lose their local format and are shown as 'yyyy-MM-ddTHH:mm:ssZ'. When you remove the formatting from the field, calculated fields are displayed correctly again. It does not matter what type of field had the formatting set (i have tested it on Date/Time and Person fields) - if at least one column in the view has custom formatting, calculated fields go crazy.
I have tested this on two different tenants with same results.

Steps to Reproduce

Add a calculated column that returns data as Date/Time (I used following formula '=[ColumnName]-20').
Add the calculated column to the view.
Add column formatting to different field (i used following formula: '{ "elmType": "div", "txtContent": { "operator": "toLocaleString()", "operands" : ["@currentField"] }}' for a Date/Time field) and make sure this field has also been added to the view.
Refresh the view, notice how calculated field is displayed.
Remove custom formatting from the field and refresh the view. Notice that calculated field is displayed properly now.

I can not open the JSON file attached to the list.
However, I can open it by changing the extension to. ".txt"

Category

• [* ] Question
• Bug
• Enhancement

Expected or Desired Behavior

I want to set the background colour of a status column based on the values in two calculated columns in the list. The calculated columns are set to output in Date/Time format (date only).

The calculated columns are "Warning Date" and "Expiry Date" and are based on a Date/Time column called "BaseDate"
The formula for "Warning Date" is =[BaseDate]+2
The formula for "Expiry Date" is =[BaseDate]+5

The Idea is that if Expiry Date is less than or equal to now the status background should be set to Red, else, if the Warning Date is less than or equal to now the status background should be set to Amber, otherwise the status background should be set to Green.

Here is the column formatting code for the status column. If I use this code with actual date columns instead of calculated fields it works fine but with calculated fields the status is always Green. Can anyone tell me how to make this work with calculated dates please?

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json ",
    "elmType": "div",
    "txtContent": "",
    "style": {
        "background-color": {
            "operator": "?",
            "operands": [
                {
                    "operator": "<=",
                    "operands": [
                        "[$Expiry_x0020_Date]",
                        "@now"
                        ]
                },
                "#ff4d4d",
                {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": "<=",
                            "operands": [
                                "[$Warning_x0020_Date]",
                                "@now"
                                ]
                        },
                        "#ffb84d",
                        "#70db70"
                        ]
                }
            ]
        }
    }
}

Office ui fabric class css not applying correctly on list view webpart.
For eg :

But when checked on list allitems page it works.

Category

• Question
• Bug
• [*] Enhancement

Observed Behavior
Formatting does not show when list is inserted as a web part into a Sharepoint page

Expected or Desired Behavior
Column formatting shows for any view on the sharepoint page for the given list. But it should also show where that list is inserted as a web part in new Sharepoint experience.

Category

• Question
• Bug
• [x ] Enhancement

https://msdn.microsoft.com/en-us/library/office/dn906146.aspx

Currently links can only start with http.. Would it be possible to allow the use of Office URI prefixes?

Would be great to be able to set conditional rules to open a document directly for viewing/editing or to start a new document from template etc..

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

Be able to adjust visible decimal places via the SharePoint column settings (or by adding to the JSON) when using the percentage version of the number-data-bar template (no code has been changed in the template)

Observed Behavior

The percentage version of the number-data-bar found at https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/number-data-bar adds many trailing zeroes to the displayed text percentage when used on a calculated column that override the SharePoint column settings for number of decimal places.

Steps to Reproduce

Create a calculated list column and apply the formatting JSON. Some values will round to a whole number but most have 8+ trailing zeroes.
I am very new at column formatting and JSON, so if there is a simple way to add this in via edits to JSON code I would be greatly appreciative!

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

Use dynamic hyperlinks to enable stacked one click filtering

We use this code example to create one click filters in the list on some key columns. For example:

{
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "style": {
                "padding-right": "8px",
                "color": "#000000"
            },
            "txtContent": "@currentField.lookupValue"
        },
        {
            "elmType": "a",
            "attributes": {
                "iconName": "Filter",
                "class": "sp-field-quickAction",
                "href": {
                    "operator": "+",
                    "operands": [
                        "https://contoso.com/sites/files/Forms/[**VIEWNAME**].aspx?useFiltersInViewXml=1&FilterField1=[**COLUMNNAMEHERE**]&FilterValue1=",
                        "@currentField.lookupValue",
                        "&FilterType1=Lookup"
                    ]
                }
            }
        }
    ]
}

As expected, this doesn't let us stack filters - i.e. it goes back to the original view if another column is clicked to filter. I think this can be overcome if I can add:

&FilterField1=[**COLUMNNAMEHERE**]&FilterValue1=",
"@currentField.lookupValue",
"&FilterType1=Lookup"

to the current URL instead of a hardcoded URL as I currently do. There is no documentation to obtain the current URL, is this possible?

Category

• Question
• [X ] Bug
• Enhancement

Expected or Desired Behavior

It should be possible to edit a list item using the info pane when a SharePoint View Formatting is applied without loosing the original selection each time a field is edited.

Observed Behavior

When editing a field using the info pane, the entire list is refreshed when a SharePoint View Formatting is applied. This makes it very cumbersoms to edit an item since you loose your original selection.

Steps to Reproduce

Apply the sample "person-currentuser-rowclass" on a list containing a few columns. Select an item in the list and edit a field using the info pane. When leaving the field, the list is refreshed and the selection is lost.

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

Date field not showing in bulletin board example.

Observed Behavior

I am formatting list view using this code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideListHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "button",
    "customRowAction": {
      "action": "defaultClick"
    },
    "attributes": {
      "class": "ms-bgColor-white ms-bgColor-themeLight--hover"
    },
    "style": {
      "width": "100%",
      "margin": "5px 0",
      "padding": 0,
      "border": "none",
      "cursor": "pointer"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-borderColor-themePrimary ms-bgColor-themePrimary"
        },
        "style": {
          "min-width": "220px",
          "display": "flex",
          "border-width": "3px",
          "border-style": "solid",
          "box-sizing": "border-box",
          "align-items": "center"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "iconName": "=if([$Category] == 'New Feature', 'LightningBolt', if([$Category] == 'Deployment', 'installtodrive', if([$Category] == 'Holiday', 'clearnight', if([$Category] == 'Bug Fix', 'bugsolid', 'Tag')))",
              "class": "ms-fontSize-su ms-fontWeight-regular  ms-fontColor-white",
              "title": "[$Category]"
            },
            "style": {
              "flex": "none",
              "padding": "12px",
              "padding-left": "18px",
              "height": "42px"
            }
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "text-align": "left",
              "max-width": "140px"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-white",
                  "title": "=toLocaleDateString([$end])"
                },
                "style": {
                  "margin-right": "12px",
                  "overflow": "hidden",
                  "white-space": "nowrap"
                },
                "txtContent": "=toLocaleDateString([$end])"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-white",
                  "title": "[$Category]"
                },
                "style": {
                  "margin-right": "12px",
                  "overflow": "hidden",
                  "white-space": "nowrap"
                },
                "txtContent": "[$Category]"
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-l"
        },
        "style": {
          "border-width": "3px",
          "border-style": "solid",
          "box-sizing": "border-box",
          "width": "100%",
          "text-align": "left",
          "padding": "21px 12px",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Title]",
            "style": {
              "height": "24px"
            },
            "attributes": {
              "title": "[$Title]"
            }
          }
        ]
      }
    ]
  }
}

& only icon, category, and title are displayed.

Steps to Reproduce

Use above mentioned code to see if it allows date field to be visible

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

The phrase "Conditional formatting based on a number range" doesn't accurately represent what's happening. It formats the column based on whether a column value is greater than or equal to a number.

A range would require two arguments, start and end.

Suggestion

• Change the wording of the existing sample, and the help document https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

• Add a new sample to show a true range value match such as:

"operator": "&&", "operands": [ { "operator": ">", "operands" : [ "[$Gallery_x0020_Deadline]", { "operator": "+", "operands": [ "@now", 25920000 ] } ] }, { "operator": "<=", "operands": [ "[$Gallery_x0020_Deadline]", { "operator": "+", "operands": [ "@now", 86400000 ] } ] } ]

Category

• Question
• Bug
• Enhancement

There are times where we'd like to apply some custom CSS to a column, which is possible, but not in any sort of extensive way. I can see why that might be, but it does feel like a limitation.

Here's a specific use case. We have a column for Gender, and would like to be able to add an icon and potentially change the color. Think something like the gender icons in Font Awesome, maybe with blue for boys and pink for girls. We have gender columns in a lot of lists in heath care, as an example.

To do this, we could add a background-image for the icon and set the icon color. However, we'd need to be sure that Font Awesome was loaded in the page. This applies to any icon we might want to use which isn't in Office UI Fabric, which only covers certain things.

Another approach would be to use a CSS-only approach, something like this example. The nice thing about this approach is it wouldn't rely on any external dependencies. However, I don't think there's a good way to add the CSS.

What's the thinking here? I'd love to be able to put a gender example into the samples here, as I think it's a nice visual, leaving all political correctness out of the discussion.

SharePoint is displaying date in 'dd/mm/yy' format. I want to change it to 'dd mmm yyyy'. how can I do it using column formatting?

Important

Use the following form to submit an issue only if it's related to samples in this repo. If you have an issue related to the SharePoint Framework or its documentation, please submit the issue at https://github.com/SharePoint/sp-dev-docs/issues/new. This will help us respond to your issue faster.

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

If you are reporting a bug, please describe the expected behavior. If you are suggesting an enhancement please describe thoroughly the enhancement, how it can be achieved, and expected benefit.

Observed Behavior

If you are reporting a bug, please describe the behavior you expected to occur when performing the action. If you are making a suggestion, you can delete this section.

Steps to Reproduce

If you are reporting a bug please describe the steps to reproduce the bug in sufficient detail to allow testing. Only way to fix things properly, is to have sufficient details to reproduce it. If you are making a suggestion, you can delete this section.

Submission Guidelines

Delete this section after reading

• All suggestions or bugs are welcome, please let us know what's on your mind.
• If you are reporting an issue around any of the samples, please ensure that you have clear reference on the sample and possibly code file, which should be fixed.
• Remember to include sufficient details and context.
• If you have multiple suggestions or bugs please submit them in separate bugs so we can track resolution.

Thanks for your contribution! Sharing is caring.

I noticed that when I change the column formatting of the Name filed in a document library the link behavior of the items breaks.

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

• Question
• Bug
• Enhancement

I notice that all the samples set "debugMode": true,. At this juncture, perhaps that doesn't matter a lot, but since people will be taking the samples and potentially using them with little changes (or understanding in some cases), should debugMode be false?

A corollary to this would be that the doc should explain what debugMode does in more detail, probably with an example or two.

Category

• [ x] Question
• Bug
• Enhancement

I have color formatting working based on text vales in a column, is there anyway to get the whole row to color in a list not just the column cell?

Thank you very much
Doug

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

Reviewing the JSON Schema: http://columnformatting.sharepointpnp.com/columnFormattingSchema.json indicates that elm.attributes.additionalproperties is false and there is no definition for the iconName, rel, or title attributes despite being listed in the documentation. So, these attributes shouldn't technically be allowed (although they work of course).

Observed Behavior

Add an iconName (or title or rel) attribute to your markup and it will work but if you validate your JSON against the schema it will be marked as invalid.

Steps to Reproduce

Using the following sample JSON from the documentation:

{
    "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "style": {
                "padding-right": "8px"
            },
            "txtContent": "@currentField.title"
        },
        {
            "elmType": "a",
            "attributes": {
                "iconName": "Mail",
                "class": "sp-field-quickActions",
                "href": {
                    "operator": "+",
                    "operands": [
                        "mailto:",
                        "@currentField.email",
                        "?subject=Task status&body=Hey, how is your task coming along?.\r\n---\r\n",
                        "@currentField.title",
                        "\r\nClick this link for more info. http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=",
                        "[$ID]"
                    ]
                }
            }
        }
    ]
}

This works great on an actual column but validating it against the schema using a tool like VS Code results in a problem: Property iconName is not allowed.

Suggested Fix

This is of course early days for the column formatting, but it would be good to have an updated schema file. Here it is with the added attributes:

{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "title": "CustomtFormatter JSON",
    "description": "CustomFormatter renderer for SharePoint lists",
    "definitions": {
        "customAction": {
            "type": "object",
            "additionalProperties": false,
            "title": "Action object",
            "description": "Action object for a custom action button",
            "properties": {
                "action": {
                    "description": "Name of the action that the custom action button will execute",
                    "enum": [
                        "execFlow"
                    ]
                },
                "actionParams": {
                    "description": "Parameters for the custom action",
                    "anyOf": [
                        {
                            "$ref": "#/definitions/expression"
                        },
                        {
                            "type": "string"
                        }
                    ]
                }
            }
        },
        "expression": {
            "type": "object",
            "additionalProperties": false,
            "title": "Expression object JSON",
            "description": "Expression object for CustomFormatter JSON",
            "properties": {
                "operator": {
                    "description": "Operator for this expression",
                    "enum": [
                        "+",
                        "-",
                        "*",
                        "/",
                        "==",
                        "!=",
                        ">",
                        "<",
                        ">=",
                        "<=",
                        "||",
                        "&&",
                        ":",
                        "toString()",
                        "Number()",
                        "Date()",
                        "cos",
                        "sin"
                    ]
                },
                "operands": {
                    "description": "Operands for this expression",
                    "type": "array",
                    "items": {
                        "anyOf": [
                            {
                                "type": "string"
                            },
                            {
                                "type": "boolean"
                            },
                            {
                                "type": "number"
                            },
                            {
                                "type": "object",
                                "$ref": "#/definitions/expression"
                            }
                        ]
                    }
                }
            },
            "required": [
                "operator",
                "operands"
            ]
        },
        "elm": {
            "type": "object",
            "additionalProperties": false,
            "properties": {
                "$schema": {
                    "description": "schema of the JSON",
                    "type": "string"
                },
                "debugMode": {
                    "description": "Is this JSON in debug mode?",
                    "type": "boolean"
                },
                "elmType": {
                    "description": "The type of element to create",
                    "enum": [
                        "div",
                        "button",
                        "span",
                        "a",
                        "img",
                        "svg",
                        "path"
                    ]
                },
                "children": {
                    "description": "Children elements",
                    "type": "array",
                    "items": {
                        "type": "object",
                        "$ref": "#/definitions/elm"
                    }
                },
                "txtContent": {
                    "anyOf": [
                        {
                            "$ref": "#/definitions/expression"
                        },
                        {
                            "type": "string"
                        }
                    ]
                },
                "style": {
                    "description": "Specifies the style object for this element",
                    "patternProperties": {
                        "^[a-z]+(?:-[a-z]+)?$": {
                            "description": "Specifies style attributes for this element",
                            "anyOf": [
                                {
                                    "$ref": "#/definitions/expression"
                                },
                                {
                                    "type": "string"
                                }
                            ]
                        }
                    }
                },
                "customRowAction": {
                    "anyOf": [
                        {
                            "$ref": "#/definitions/customAction"
                        }
                    ]
                },
                "attributes": {
                    "type": "object",
                    "description": "Additional attributes to be added to elmType",
                    "properties": {
                        "href": {
                            "description": "Specifies the href attribute",
                            "anyOf": [
                                {
                                    "$ref": "#/definitions/expression"
                                },
                                {
                                    "type": "string"
                                }
                            ]
                        },
                        "src": {
                            "description": "Specifies the src attribute",
                            "anyOf": [
                                {
                                    "$ref": "#/definitions/expression"
                                },
                                {
                                    "type": "string"
                                }
                            ]
                        },
                        "class": {
                            "description": "Specifies the class attribute",
                            "anyOf": [
                                {
                                    "$ref": "#/definitions/expression"
                                },
                                {
                                    "type": "string"
                                }
                            ]
                        },
                        "target": {
                            "description": "Specifies the target attribute, used primarily for <a> element types.",
                            "anyOf": [
                                {
                                    "$ref": "#/definitions/expression"
                                },
                                {
                                    "type": "string"
                                }
                            ]
                        },
                        "role": {
                            "description": "Specifies the role attribute, used accessibility.",
                            "anyOf": [
                                {
                                    "$ref": "#/definitions/expression"
                                },
                                {
                                    "type": "string"
                                }
                            ]
                        },
                        "d": {
                            "description": "Specifies the d attribute. Used primarily for svg path elements",
                            "anyOf": [
                                {
                                    "$ref": "#/definitions/expression"
                                },
                                {
                                    "type": "string"
                                }
                            ]
                        },
                        "iconName": {
                            "description": "Name of the Office UI Fabric icon to display",
                            "anyOf": [
                                {
                                    "$ref": "#/definitions/expression"
                                },
                                {
                                    "type": "string"
                                }
                            ]
                        },
                        "rel": {
                            "description": "Specifies the relationship between the current document and the linked document, used primarily for <a> element types.",
                            "anyOf": [
                                {
                                    "$ref": "#/definitions/expression"
                                },
                                {
                                    "type": "string"
                                }
                            ]
                        },
                        "title": {
                            "description": "Specified extra information about the element, generally shown as tooltip text on element hover.",
                            "anyOf": [
                                {
                                    "$ref": "#/definitions/expression"
                                },
                                {
                                    "type": "string"
                                }
                            ]
                        }
                    },
                    "patternProperties": {
                        "^aria\\-[a-z]+$": {
                            "description": "Specifies aria- attributes for the element",
                            "anyOf": [
                                {
                                    "$ref": "#/definitions/expression"
                                },
                                {
                                    "type": "string"
                                }
                            ]
                        }
                    },
                    "additionalProperties": false
                }
            },
            "required": [
                "elmType"
            ]
        }
    },
    "$ref": "#/definitions/elm"
}

Category

• Question
• Bug
• Enhancement

I created a list with the 4 columns indicated (title, icon, url, and newtab). I tried referencing both an image name and image url in the icon space but neither option helps to present the icon. What am I doing wrong?

Category

• Question

I would like to suggest a clear reference for the customRowAction key.
By searching this repo, I found the action parameter takes these three values:

• editProps - opens the item edit form
• executeFlow - runs flow
• defaultClick - opens the item view form

Are there any other allowed values?

@VesaJuvonen In the number-pct-piechart example, 100% is not displayed correctly. There is still a sliver of unfilled pie left when the data is 100% (the entire pie should be filled). Please see the attached pic. I too far removed from algebra to try to fix it.

Important

Unable to use ID column in column formatting.
Error Message : Failure: Cannot read property 'valueOf' of null

Category

Bug

Expected or Desired Behavior

ID column to provide value for usage as other column like Title.

Observed Behavior

Error Message : Failure: Cannot read property 'valueOf' of null

Steps to Reproduce

Add the below Json in Column Formatting in New a modern SP list field

{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"debugMode": true,
"elmType": "a",
"txtContent": "Some text",
"attributes": {
"target": "_blank",
"href": {
"operator": "+",
"operands": [
"https://tenant.sharepoint.com/sites/devsite/",
"[$ID]"
]
}
}
}

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

Yes/No column to define if a hyperlink open on a new tab on the generic-tile-format sample.
"target": "=if([$NewTab] == 'Yes', '_blank', '')" should set the target to _blank if column is set to "Yes"

Observed Behavior

Returned value is a boolean instead of the "Yes" string, so condition always fails.
Condition works if comparing against a boolean value
"target": "=if([$OpenNewTab] == true, '_blank', '')"

Steps to Reproduce

Create new list and fields as provided on instructions.
Add sample links
Add row formatting code provided
Click on a link set to open on a new tab

Category

• [ *] Question
• Bug
• Enhancement

Expected or Desired Behavior

What I want is for the field I apply the json to, to show "6 CheckMark". So the word checkmark will show up instead of the icon next to the 6..

Observed Behavior

I took the code from the "Conditional formatting based on the value in a text or choice field (advanced)" which shows an icon whether a project is done, in progress, etc, but I wanted to change it from being an icon to the actual text. My changes cause only 6 to show

Steps to Reproduce

MY CODE BELOW - I simply changed iconName to txtContent under the "attributes" portion.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",


  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "txtContent": "=if(@currentField == '6', 'CheckMark', if(@currentField == 'In progress', 'Forward', if(@currentField == 'In review', 'Error', if(@currentField == 'Has issues', 'Warning', 'ErrorBadge'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Does anyone have any suggestions on how to make this work?

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

When document is a draft version this row formatting should always be applied. Json config:
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"additionalRowClass": "=if([$_Level] == '2', 'sp-field-severity--warning', '')"
}

Observed Behavior

When the document has just been updated, the row formatting is applied, but after a screen refresh, it is not.

Steps to Reproduce

Set the document library versioning to draft. Apply the row formatting config to the library. Add a new document or update it to get a draft version. Result: The row formatting will be applied. Refresh the screen and it will not be applied even if the document _level is still 2.

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

Would we be able to get an example of the SVG elmType working? I have attempted to use it but almost all element types and property names needed to construct the SVG are not allowed by the specification.

For example:

• viewBox is not an allowed attribute, but required to create an SVG properly
• using txtContent to fill in the entire contents of the SVG wraps the contents with double quotes, making it fail
• fill is not an allowed attribute, making colouring the SVG very difficult.

Important

Use the following form to submit an issue only if it's related to samples in this repo. If you have an issue related to the SharePoint Framework or its documentation, please submit the issue at https://github.com/SharePoint/sp-dev-docs/issues/new. This will help us respond to your issue faster.

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

• [* ] Question
• [ *] Bug
• Enhancement

Expected or Desired Behavior

Is there a way to use View Formatting with blank values. I tried [$DueDate]==''but no success.

Steps to Reproduce

Applied this json to a list where there are empty values in the DueDate column

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
   "additionalRowClass": "=if([$DueDate] <= @now, 'sp-field-severity--severeWarning', ''"
}

Thanks for your contribution! Sharing is caring.

https://stackoverflow.com/questions/49392815/sharepoint-column-formatting-json-currentfield-lookupvalue-throws-error-in-c

I've got a SharePoint List with the column "Status - Overall (lookup)" which type is "Lookup". It gets information from another list and there can be only 5 values: "Red", "Amber", "Green", "Gray" or blank value.

I applied conditional column formatting to the column "Status - Overall (lookup)" according to the article: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Here's JSON code which was pasted into "Column Formatting" setting of the List Column:

{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"debugMode": true,
"elmType": "div",
"attributes": {
"class": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField.lookupValue"
]
},
"Green"
]
},
"sp-field-severity--good",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField.lookupValue"
]
},
"Gray" ]
},
"sp-field-severity--low",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField.lookupValue"
]
},
"Amber"
]
},
"sp-field-severity--warning",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField.lookupValue"
]
},
"Red"
]
},
"sp-field-severity--severeWarning",
"sp-field-severity--blocked"
]
}
]
}
]
}
]
}
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField.lookupValue"
]
},
"Green"
]
},
"CheckMark",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField.lookupValue"
]
},
"Amber"
]
},
"Forward",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField.lookupValue"
]
},
"Gray"
]
},
"Error",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField.lookupValue"
]
},
"Red"
]
},
"Warning",
"ErrorBadge"
]
}
]
}
]
}
]
}
}
},
{
"elmType": "span",
"txtContent": "@currentField.lookupValue"
}
]}

This JSON works fine for all lookup values except the blank value which displays the following error:

(column-internal-name).lookupValue was not found on the data object.

https://i.stack.imgur.com/OJ7TW.jpg

Is there a way to fix that?

• Question
• Bug
• Enhancement

Re: bulletin-board-format

How do I use my own icons?

Dear War Horse,

Very minor note on the Contact List view - in the instructions you say that most of the fields are optional - however I noticed today that they need to exist or the view is blank!

Cheers

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

When I use JSON list view formatting, the list loads a parent DIV in batches of 10 that you cannot control. So if you have 4 tiles across, you get 3 rows but the last row only has 2 items and 2 empty spots.

This is related to issue #108

I was able to hack some CSS to make the parent display in FLEX mode since float:left was breaking the paging and only allowing the first 10 items to come back. Flex allows all of them but I still have this parent div row issue every 10 items. I want my cards to stack like they use to in Display Templates for search, but I cannot use those in SPO.

Observed Behavior

If you are reporting a bug, please describe the behavior you expected to occur when performing the action. If you are making a suggestion, you can delete this section.

Steps to Reproduce

Create a JSON view with more than 10 items, format your JSON with a float:left attribute on the first div element. Only 10 items are returned and the list breaks on document ready (though during page load the scrollbar loads all 100 items on the page if you scroll down fast enough you can see them, then they disappear).

IF you apply Flex display via CSS to ms-List-page, you can wrap the items but every row of 10 does not look aesthetically pleasing if you don't have a number evenly divisible by 10 in the rows.

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

Using the following code, I would expect to be able to edit the items properties by opening the edit form via a custom button, given that "defaultClick" opens the display form:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Edit item",
  "customRowAction": {
    "action": "editItemProps"
  }
}

Observed Behavior

Clicking the generated button from the code above does nothing. Running it in debug mode produces no output in the console either. Am I missing something here?

Steps to Reproduce

Paste the above into the column formatting section of a field

Category

• Question
• [x ] Bug
• Enhancement

Expected or Desired Behavior

Display the Fabric Icon when using the Icon name in a field called Icon

Observed Behavior

Fabric Icon not displayed

Steps to Reproduce

Create a sample list with the required column identified for the generic-tile-format sample
Create an item using Fabric UI Icon name
Copy/Paste the sample json into the Format view box
Preview the results or save

The bug in in the section for displaying the icon. It is pulling an unknown field.
{
"elmType": "div",
"attributes": {
"iconName": "[$j9js]",
"class": "ms-fontSize-su"
}
$j9js needs to be replaced with $Icon
Icon was identified as the field name in the sample specifications.

Category

Enhancement

Expected or Desired Behavior

It might be possible to use fields that are not being displayed in the current view.
I tried to use a field that was not visible and formatting could not be applied.

Important

Use the following form to submit an issue only if it's related to samples in this repo. If you have an issue related to the SharePoint Framework or its documentation, please submit the issue at https://github.com/SharePoint/sp-dev-docs/issues/new. This will help us respond to your issue faster.

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

Q1
How can I use
"width": "=if([$DueDate] <= @now, '100%', (1 - Number([$DueDate] - @now) / Number([$DueDate] - [$StartDate])) * 100 + '%')"
if my column name as Expiry Date?

Q2
how to identify the date is empty or null, if the user not provided the value in Expiry Date column, the column cannot display any contant with below code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "position": "relative"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "position": "absolute",
        "left": "8px"
      },
      "attributes": {
        "class": "=if([$Status] == 'Completed', 'ms-fontColor-green ms-fontWeight-semibold', 'ms-fontColor-neutralSecondary')",
        "iconName": "=if(@currentField == 'Completed','CheckMark', if(@currentField == 'Processing', 'Forward', if(@currentField == 'Cancelled', 'Error', if(@currentField == 'Pending','Warning','')"
      }
    },
    {
      "elmType": "div",
      "attributes": {
        "class": "=if([$Status] == 'Processing', if($Expiry_x0020_Date] == '', '', if([$Expiry_x0020_Date] <= @now, 'sp-field-severity--severeWarning', if(1 - Number([$Expiry_x0020_Date] - @now) / Number([$Expiry_x0020_Date] - [$Effective_x0020_Date]) >= 0.7, 'sp-field-severity--warning', 'sp-field-severity--good'))), '')"
      },
      "style": {
        "min-height": "inherit",
		"width": "=if([$Expiry_x0020_Date] <= @now, '100%', (1 - Number([$Expiry_x0020_Date] - @now) / Number([$Expiry_x0020_Date] - [$Effective_x0020_Date])) * 100 + '%')"
      }
    }
  ]
}

refernce: https://github.com/SharePoint/sp-dev-list-formatting/blob/master/column-samples/date-range-rag/date-range-rag.json

Thanks for your contribution! Sharing is caring.

Question

In list view formatting, is there any option to enable multi item select option(like the option in SharePoint OOB View). I am not seeing any reference which provide this option. Not sure if this feature is supported? Any hints would be a great help.

Thanks!
Ravi

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

Icon from Fabric set should be displayed

Observed Behavior

Icon from Fabric set is not displayed

Steps to Reproduce

Create New list, enter the fabric icon set icon names in the Title column and apply the following formatting

{
    "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
    "debugMode": true,
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "style": {
                "float": "right",
                "font-size": "200%",
                "display": "inline-block",
                "padding": "0 4px"
            },
            "attributes": {
                "iconName": "@currentField"
            }
        },
        {
            "elmType": "span",
            "txtContent": "@currentField"
        }
    ]
}

Some icons are displayed, some are not - it doesn't look like SharePoint Online has the full set of Fabric icons available (out of the 1435 icons, about half don't display).

All examples revolve around @currentField.

Add example how to display data from another field, e.g.

{
    "elmType": "div",
    "txtContent": "[$otherFieldInternalName]"
}

Where can a list of JSON attributes such as sp-field-severity--good, sp-field-severity--low, etc. and the the iconName attributes be found? Any good or complete documentation on using JSON in SharePoint Onlline?

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

When I reference to a Date/Time field in column oder view formatting (like "txtContent": "[$Created]"), I expect to see the date/time in local format (in this case the Europe format: DD.MM.YYYY).

Observed Behavior

List field shows "Invalid Date". Also when I use toLocaleDateString().

Steps to Reproduce

Reference to a Date/Time field in row oder view formatting by "[$FieldName]". "@currentField" works as expected.

Thank you for your support!

Hi,

Where am i going wrong, new to JSON Coding

Im trying to achieve the following:

• If Due Date is greater than today (ie. yesterday, two days ago etc) highlight row as red
• If Due Date is equal to Today highlight row as Amber

{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"debugMode": true,
"elmType": "div",
"attributes": {
"class": {
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"@currentField",
70
]
},
"sp-field-severity--warning",
""
]
}
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": {
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"@currentField",
70
]
},
"Error",
""
]
}
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

Text-wrapping within a column.

Observed Behavior

The text-wrapping code sample is used extensively in our Office 365 SharePoint libraries for the Name column (filenames), it worked fine on Friday 16 Feb, and now returns blank.

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

Column formatting shows for any view on the sharepoint page for the given list. But it should also show where that list is inserted as a web part in new Sharepoint experience.

Observed Behavior

Formatting does not show when list is inserted as a web part into a Sharepoint page

Suggestion

• The option to "show column formatting" could be added on the "edit web part" sidebar, on a list web part inserted into a Sharepoint page.

• Even more preferable, bind column formatting to a list view, rather than the list itself