Get a List View via REST API with custom formatting and display it

Question

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: :

Answer 1

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.