Forum Discussion

Mike Insch's avatar
Mike Insch
Copper Contributor
Feb 20, 2018

Column formatting not showing when view shown in a List Web Part (Modern Page and List)

I have a list with a JSON Column Formatter applied, the column format works fine when viewing the list directly, however when I'm using the List Web Part (still appears to be a preview part), the column formats are not displayed.

 

Is this a known limitation? Are there any timescales for a fix, or any workarounds available to allow me to embed a list view into a page with multiple other web parts and retain the column formatting from the JSON Formatter?

  • Toeun Chiet's avatar
    Toeun Chiet
    Copper Contributor
    Jun 12, 2018

    Hi Mike,

     

    We are running into the same issue as well when adding a list using JSON green-yellow-red status column directly as a web part. 

     

    Don't if this will meet your requirements but the workaround I've implemented is utilizing Page Viewer (see below for the procedure I went thru), which seems to work fine for now. Hopefully Microsoft will support JSON formatter in web parts in the future.

     

    Procedure

    1. Make note of the URL for your SharePoint list.
    2. Go to your SharePoint page you want to add the web part and select Edit page.
    3. Click on the Insert tab > Web Part > Media and Content > Page Viewer.
    4. In the Page Viewer web part, select Edit Web Part.
    5. In the Page Viewer dialog, make sure Web Page is selected, than enter the URL noted from Step 1 into the field provided.
    6. Click Apply.

    NOTE:  You may need place a fixed height or width (in Appearances section) accordingly on the web part as well.

  • jcgonzalezmartin's avatar
    jcgonzalezmartin
    MVP
    Feb 20, 2018
    Well, IMHO it's not a well known limitation, it's just that the modern List and Document Library WebParts does not support column formatting....column formatting is just something specific (at the moment) of the modern lists and document libraries
  • Deleted's avatar
    Deleted
    Feb 21, 2018

    Did you do it directly in the view or on the column itself? 

    Maybe a workaround could be to use ContentTypes and format the column in there.

    • jcgonzalezmartin's avatar
      jcgonzalezmartin
      MVP
      Feb 21, 2018
      Paul,
      He is talking about the modern list WebPart....I simply think this WebPart just not take into account any customization you have in your modern list
      • Mike Insch's avatar
        Mike Insch
        Copper Contributor
        Feb 21, 2018

        The format is applied directly to the column.  Juan Carlos is right that it's in the Modern List Web Part that the format doesn't show.

         

        We're effectively trying to build a dashboard across several lists / libraries and need to be able to show the formats to clearly highlight certain status items.  It's a shame that the Web Part ignores the formats, as this would save us writing custom code or going with other more complex options like PowerBI.

         

        Any ideas when (or even if) the Modern List Web Part will support column formats?

  • LHMinu's avatar
    LHMinu
    Copper Contributor
    Aug 11, 2019

    Mike Insch Hi!

     

    I am currently working on a SharePoint Online (Modern Page and List), with Column Formatting and View Formatting in some customized lists.

    I am embedding my lists through a WebPart for Viewing List in several Pages. I can see that Column Formatting is consistent between the List and the one displayed in the WebPart.

    However, View Formatting is not consistent, and it depends on the Style and Class formatting implemented for my View.

    @Lincoln DeMaris, sorry for calling out your name, but you seem to be our "go-to person" for getting some estimates. Are there any news for correcting the styling done through the View Formatting?

     

    Thank you in advance!

    • SVaibhav's avatar
      SVaibhav
      Icon for Microsoft rankMicrosoft
      Aug 13, 2019

      LHMinu Hi!

       

      While we acknowledge that there is some mismatch between the formatting behavior of lists when used as web parts (and we are working on it), it'd be best if you can provide us with the JSON being used for view formatting. This will help us in pin pointing the problem specific to your use case and maybe we'll be able to provide you with a workaround till the time the issue is completely resolved.

       

      Regards

      • LHMinu's avatar
        LHMinu
        Copper Contributor
        Aug 13, 2019

        Hi SVaibhav !

         

        Thank you so much for the predisposition.

        My JSON is based on the code displayed on the GitHub for Retail Detail View. However, I removed the reference to the .api for retrieving and displaying locations through a map.

         

        I am using the same structure for displaying text, and the main goal of the view is displaying the Status for Projects. When embedding the list on a WebPart, it shows the same text and the same structured table; however, the formatting and spacing of the text is completely arbitrary (As if the specifications made on the Classes didn't exist).

         

        {
  "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>",
  "debugMode": false,
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": " ms-borderColor-neutralLight"
    },
    "style": {
      "border-top-width": "1px",
      "border-top-style": "solid",
      "width": "100%",
      "padding": "0 0 0 20px",
      "flex-wrap": "wrap",
      "align-items": "flex-start",
      "justify-content": "space-between"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex": "1 0 300px",
          "margin": "10px"
        },
        "children": [
          {
            "elmType": "button",
            "attributes": {
              "class": "ms-fontSize-xl ms-fontColor-themePrimary"
            },
            "style": {
              "border": "0",
              "padding": "0",
              "margin-bottom": "0.5em",
              "background-color": "transparent",
              "cursor": "pointer",
              "line-height": "1.5em",
              "overflow": "hidden",
              "text-align": "left"
            },
            "customRowAction": {
              "action": "defaultClick"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-fontSize-mPlus"
            },
            "style": {
              "line-height": "1.5em"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "class": "ms-fontWeight-bold"
                },
                "txtContent": "Goal: "
              },
              {
                "elmType": "span",
                "txtContent": "[$Goal]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-fontSize-mPlus"
            },
            "style": {
              "line-height": "1.5em"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "class": "ms-fontWeight-bold"
                },
                "txtContent": "Start Date: "
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString[$StartDate]"
              },
              {
                "elmType": "span",
                "attributes": {
                  "class": "ms-fontWeight-bold"
                },
                "txtContent": "  ||  "
              },
              {
                "elmType": "span",
                "attributes": {
                  "class": "ms-fontWeight-bold"
                },
                "txtContent": "Due Date: "
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString[$Due_x0020_Date]"
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex": "0 0 539px",
          "width": "504px",
          "margin": "10px",
          "display": "flex",
          "justify-content": "space-between"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-neutralLighter"
            },
            "style": {
              "flex": "0 0 180px",
              "height": "108px",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "class": " ms-fontSize-mPlus ms-fontWeight-bold"
                },
                "style": {
                  "line-height": "2em"
                },
                "txtContent": "Last Activities"
              },
              {
                "elmType": "span",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-light"
                },
                "style": {
                  "display": "inline-block",
                  "line-height": "1em",
                  "vertical-align": "top",
                  "text-align": "justify",
                  "margin": "5px"
                },
                "txtContent": "[$LastActivities]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-neutralLighter"
            },
            "style": {
              "flex": "0 0 173px",
              "height": "108px",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "class": " ms-fontSize-mPlus ms-fontWeight-bold"
                },
                "style": {
                  "line-height": "2em"
                },
                "txtContent": "Next Activities"
              },
              {
                "elmType": "span",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-light"
                },
                "style": {
                  "display": "inline-block",
                  "line-height": "1em",
                  "vertical-align": "top",
                  "text-align": "justify",
                  "margin": "5px"
                },
                "txtContent": "[$NextActivities]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "=if([$Status] == 'Red', 'ms-bgColor-red', if([$Status] == 'Green', 'ms-bgColor-green', if([$Status] == 'Amber', 'ms-bgColor-yellow', if([$Status] == 'On Hold', 'ms-bgColor-teal', ''))))"
            },
            "style": {
              "flex": "0 0 173px",
              "height": "108px",
              "box-sizing": "border-box",
              "padding": "12px 10px",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": " ms-fontSize-mPlus ms-fontWeight-bold"
                },
                "style": {
                  "line-height": "0.5em"
                },
                "txtContent": "Status"
              },
              {
                "elmType": "div",
                "style": {
                  "color": "#fff",
                  "font-size": "70px",
                  "line-height": "1em"
                },
                "attributes": {
                  "iconName": "=if([$Status] == 'Red', 'StatusCircleErrorX', if([$Status] == 'Green', 'CheckMark', if([$Status] == 'Amber', 'StatusCircleExclamation', if([$Status] == 'On Hold', 'Remove', ''))))"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}
  • Sikareus's avatar
    Sikareus
    Copper Contributor
    Sep 26, 2019

    I have an even more specific question: is support for this planned when you use a 'Project Tasks' list? None of the JSON I've added to columns will show...

    • Sikareus's avatar
      Sikareus
      Copper Contributor
      Sep 26, 2019

      It's like I have to choose between a "regular list" or a task list with the added visual timeline functionality (which people tend to like). :sad:

Resources