SOLVED

Unable to format document library Title field with JSON

Copper Contributor

I can set the JSON for the title field, Preview works, Save works, but as soon as I Cancel the formatting pane, the formatting disappears.  Re-opening the formatting pane shows no contents.  It appears to be isolated to the Title. I can apply the same formatting to other columns and it persists. I also tried to put the formatting in through the List Settings -> Column -> Column format and it disappears from there too.

4 Replies

Hi @tiredoldcoder,

 

Can you please post the JSON you are using for the field?  I was able to reproduce this exact behavior and seems buggy to me.  

 

Format the Title, and paste this JSON just to bold it for example:

 

{     "$schema":"http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",   
    "elmType":"div",        
        "style":{  
               "font-weight":"bold" 
             },         "txtContent":"@currentField"
}

 

Click Save, it shows.  Click the X to close the format dialog, the formatting disappears.  I do the exact same thing to a different column like Name, click the X and the formatting sticks.  If you edit the library and put it in Title, it does indeed remove it as saving it.  Its like they don't want you to save it.

 

I'd like someone else to validate.  Is the Title field locked or something underneath that prevents this from working?

best response confirmed by tiredoldcoder (Copper Contributor)
Solution

Hello @tiredoldcoder ,

 

I don't believe the Name/Title column is supported.

 

From Use column formatting to customize SharePoint:

Supported column types

The following column types support column formatting:

  • Single line of text
  • Number
  • Choice
  • Person or Group
  • Yes/No
  • Hyperlink
  • Picture
  • Date/Time
  • Lookup
  • Title (in Lists)

The following are not currently supported:

  • Managed Metadata
  • Filename (in Document Libraries)
  • Calculated
  • Retention Label
  • Currency

I hope this helps.

 

Norm

 

For the sake of closing the loop, my work-around was to create another field and use JSON formatting to populate it (vice use a calculation field, though I assume that would have worked too). Of note, the pseudo column cannot be blank or null - I just defaulted it to be "*".  The below JSON makes all my "Final" documents display in bold text, everything else is indented to set them apart.

 

{
"elmType": "div",
"txtContent": "=[$Title]",
"attributes": {},
"style": {
"font-weight": "=if([$IsFinal], 'bold', '')",
"padding-left": "=if([$IsFinal], '0em', '2em')"
},
"customRowAction": {},
"children": []
}

 

Thanks to all for your input!

@tiredoldcoder I think this is a bug in the interface. I've had my formatting vanish after closing the formatting pane. On refreshing the page my formatting comes back and is now available to edit again.

It gets even more interesting if you're working on a List with multiple formatted views... 

This is how I'm formatting my Document Library: 

{
  "schema": "<a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a>",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "a",
    "attributes": {
      "href": "[$FileRef]",
      "title": "[$FileLeafRef]",
      "target": "=if([$NewTab] == true, '_blank', '')",
      "class": "ms-bgColor-themePrimary ms-bgColor-themeDark--hover ms-fontColor-neutralLighterAlt"
    },
    "style": {
      "float": "left",
      "position": "relative",
      "text-decoration": "none",
      "width": "100%",
      "margin-top": "5px"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {},
        "style": {
          "display": "flex",
          "min-width": "100%",
          "min-height": "40px",
          "-webkit-font-smoothing": "antialiased",
          "font-size": "14px",
          "font-weight": "400",
          "box-sizing": "border-box",
          "cursor": "pointer",
          "user-select": "none",
          "outline": "transparent",
          "border-width": "1px",
          "border-style": "solid",
          "border-color": "transparent",
          "border-image": "initial",
          "text-decoration": "none",
          "border-radius": "0px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "left",
              "display": "flex",
              "min-width": "60%",
              "min-height": "40px",
              "box-sizing": "border-box",
              "align-items": "center"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "=if([$File_x0020_Type] == 'docx', 'wordDocument', if([$File_x0020_Type] == 'xlsx', 'ExcelDocument', if([$File_x0020_Type] == 'pptx', 'PowerPointDocument', if([$File_x0020_Type] == 'pdf', 'PDF', if([$File_x0020_Type] == 'jpg' || [$File_x0020_Type] == 'png' || [$File_x0020_Type] == 'gif', 'FileImage', if([$File_x0020_Type] == 'mp4' || [$File_x0020_Type] == 'avi' || [$File_x0020_Type] == 'mov', 'MSNVideos', if([$File_x0020_Type] == 'zip', 'ZipFolder','Unknown')))))))"
                },
                "style": {
                  "flex": "none",
                  "line-height": "100%",
                  "font-weight": "normal",
                  "font-size": "2rem",
                  "margin": "5px 5px 5px 10px"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "flex": "none",
                  "line-height": "100%",
                  "font-weight": "600",
                  "margin": "5px 5px 5px 10px"
                },
                "txtContent": "=if([$Title] == '', '[$FileLeafRef]', '[$Title]')"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-white"
            },
            "style": {
              "flex": "none",
              "text-align": "left",
              "box-sizing": "border-box",
              "align-items": "center",
              "display": "=if([$Description] == '', 'none', 'flex')",
              "min-width": "40%",
              "min-height": "40px"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-black"
                },
                "style": {
                  "width": "100%",
                  "line-height": "100%",
                  "font-weight": "600",
                  "font-size": "11px",
                  "margin": "5px"
                },
                "txtContent": "[$Description]"
              }
            ]
          }
        ]
      }
    ]
  }
}

 T. 

 

1 best response

Accepted Solutions
best response confirmed by tiredoldcoder (Copper Contributor)
Solution

Hello @tiredoldcoder ,

 

I don't believe the Name/Title column is supported.

 

From Use column formatting to customize SharePoint:

Supported column types

The following column types support column formatting:

  • Single line of text
  • Number
  • Choice
  • Person or Group
  • Yes/No
  • Hyperlink
  • Picture
  • Date/Time
  • Lookup
  • Title (in Lists)

The following are not currently supported:

  • Managed Metadata
  • Filename (in Document Libraries)
  • Calculated
  • Retention Label
  • Currency

I hope this helps.

 

Norm

 

View solution in original post