0

I have a List with a View on it that has custom formatting. I am trying to pull the list via REST API and display the items according to that view within a SPFX-webpart with the custom formatting applied.

I have tried to use the PNP SP method for views "renderAsHtml()" but that displays the data as a table and does not use the custom formatting at all.

How would I go about getting the list items by view and applying the custom formatting to them?

Here is an example custom formatting code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "text-align": "left"
    },
    "children": [
      {
        "elmType": "div",
        "style": {},
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "dl-WPList"
            },
            "style": {
              "text-align": "left",
              "display": "list-item",
              "list-style-type": "disc",
              "padding-left": "4px",
              "font-weight": "500",
              "font-size": "16px"
            },
            "children": [
              {
                "elmType": "a",
                "txtContent": "=[$Title]",
                "attributes": {
                  "href": "=if(indexOf([$FileRef], '.url')>0,[$_ShortcutUrl] ,[$FileRef])",
                  "target": "_blank",
                  "class": "customLink"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=if(Number([$LastReviewed]) != 0, '   (' + toLocaleDateString([$LastReviewed]) + ')','' )"
              }
            ]
          }
        ]
      }
    ]
  }
}

This is what PNP SP method "renderAsHtml()" displays and below it is what i am trying to get as final result: : This is what "renderAsHtml()" displays:

desired final result

1
  • 1
    I don't think you can apply JSON formatting inside SPFx web part. If you need to show the list view on SharePoint page, use SharePoint OOTB List web part. In SPFx, you will have to re-create the look and feel using HTML/CSS. Jul 5, 2023 at 14:11

1 Answer 1

0

You can achieve what you want, not using row-formatting.schema.json but using Adaptive Cards Host spfx sample. Use Adaptive Card to pick SharePoint list view to populate and order the data.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.