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

SVaibhav  @Lincoln DeMaris  Custom Row Actions not working on SP Page:

Hi! This is my first time coding or doing View Formatting, so any help would be much appreciated:

I am using both the Custom Row Actions editProps (edit button) and defaultClick (info button) in my formatting. On the list, they both work perfectly. On the SP Page where I am displaying this list view, however, neither button works as it did on the list itself. The editProps does not do anything at all when clicked, and the defaultClick causes a new tab to open up with the item details, as opposed to the right-hand details pane sliding out. Can you please help me with these issues?

Thanks so much!

Marissa

{
  "schema": "<a href="<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>" target="_blank"><a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a</a>>",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "style": {
      "flex-direction": "column",
      "display": "flex",
      "align-items": "flex-start",
      "margin-left": "40px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left",
          "display": "flex",
          "width": "100%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {},
            "children": [
              {
                "elmType": "a",
                "attributes": {
                  "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
                  "href": "[$shopImage1]",
                  "target": "_blank"
                },
                "children": [
                  {
                    "elmType": "img",
                    "style": {
                      "width": "250px",
                      "height": "auto",
                      "align": "top",
                      "display": "block"
                    },
                    "attributes": {
                      "src": "=if([$shopImage1], [$shopImage1], @currentWeb + '/Shared Documents/swap_shop_default.jpg')",
                      "class": "ms-fontSize-su"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "width": "250px"
                },
                "children": [
                  {
                    "elmType": "a",
                    "attributes": {
                      "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
                      "href": "[$shopImage2]",
                      "target": "_blank"
                    },
                    "style": {
                      "display": "=if([$shopImage2], 'inline', 'none')",
                      "width": "25%"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "width": "100%",
                          "height": "auto",
                          "border": "1px solid white",
                          "box-sizing": "border-box"
                        },
                        "attributes": {
                          "src": "[$shopImage2]",
                          "class": "ms-fontSize-su"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "a",
                    "attributes": {
                      "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
                      "href": "[$shopImage3]",
                      "target": "_blank"
                    },
                    "style": {
                      "display": "=if([$shopImage3], 'inline', 'none')",
                      "width": "25%"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "width": "100%",
                          "height": "auto",
                          "border": "1px solid white",
                          "box-sizing": "border-box"
                        },
                        "attributes": {
                          "src": "[$shopImage3]",
                          "class": "ms-fontSize-su"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "a",
                    "attributes": {
                      "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
                      "href": "[$shopImage4]",
                      "target": "_blank"
                    },
                    "style": {
                      "display": "=if([$shopImage4], 'inline', 'none')",
                      "width": "25%"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "width": "100%",
                          "height": "auto",
                          "border": "1px solid white",
                          "box-sizing": "border-box"
                        },
                        "attributes": {
                          "src": "[$shopImage4]",
                          "class": "ms-fontSize-su"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "a",
                    "attributes": {
                      "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
                      "href": "[$shopImage5]",
                      "target": "_blank"
                    },
                    "style": {
                      "display": "=if([$shopImage5], 'inline', 'none')",
                      "width": "25%"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "width": "100%",
                          "height": "auto",
                          "border": "1px solid white",
                          "box-sizing": "border-box"
                        },
                        "attributes": {
                          "src": "[$shopImage5]",
                          "class": "ms-fontSize-su"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "text-align": "left",
              "display": "flex",
              "align-items": "flex-start",
              "flex-direction": "column",
              "flex": "1"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-row-title"
                },
                "txtContent": "[$Title]",
                "style": {
                  "margin-left": "15px"
                }
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-row-listPadding",
                  "display": "=if([$Description], 'block', 'none')"
                },
                "txtContent": "[$Description]",
                "style": {
                  "margin-left": "15px"
                }
              },
              {
                "elmType": "a",
                "attributes": {
                  "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
                  "href": "[$URL]",
                  "target": "_blank"
                },
                "style": {
                  "border": "none",
                  "text-decoration": "none",
                  "background-color": "transparent",
                  "align-items": "center",
                  "flex-direction": "row",
                  "display": "=if([$URL], 'flex', 'none')",
                  "cursor": "pointer",
                  "border-radius": "5px",
                  "text-align": "center",
                  "vertical-align": "middle",
                  "margin": "0px 10px 0px 15px",
                  "padding": "0 13 0 13px"
                },
                "children": [
                  {
                    "elmType": "span",
                    "style": {
                      "padding-right": "4px"
                    },
                    "attributes": {
                      "iconName": "link"
                    }
                  },
                  {
                    "elmType": "span",
                    "style": {
                      "padding-right": "2px",
                      "font-size": "12px"
                    },
                    "txtContent": "[$URL.desc]"
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "padding-left": "15px",
                  "margin-top": "auto",
                  "box-sizing": "border-box",
                  "width": "100%",
                  "white-space": "nowrap"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "='$' + [$Price]",
                    "style": {
                      "padding-right": "5px",
                      "margin": "8px 10px 0px 0px",
                      "font-size": "16px",
                      "color": "green",
                      "font-weight": "700"
                    }
                  },
                  {
                    "elmType": "a",
                    "attributes": {
                      "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
                      "href": {
                        "operator": "+",
                        "operands": [
                          "mailto:",
                          "[$Author.email]",
                          "?subject=Swap Shop Inquiry&body=\r\n---\r\n",
                          "@me",
                          "\r\nSwap Shop link: <a href="<a href="https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=" target="_blank">https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=</a>" target="_blank"><a href="https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=</a" target="_blank">https://timelyo365.sharepoint.com/sites/GuineaPig/testPiclib/Forms/DispForm.aspx?ID=</a</a>>",
                          "[$ID]"
                        ]
                      }
                    },
                    "style": {
                      "border": "none",
                      "text-decoration": "none",
                      "background-color": "transparent",
                      "align-items": "center",
                      "flex-direction": "row",
                      "display": "flex",
                      "cursor": "pointer",
                      "border-radius": "5px",
                      "text-align": "center",
                      "vertical-align": "middle",
                      "margin": "8px 10px 0px 15px",
                      "padding": "0 13 0 13px"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "style": {
                          "padding-right": "8px",
                          "font-size": "16px"
                        },
                        "attributes": {
                          "iconName": "Mail"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "[$Author.title]",
                        "style": {
                          "font-size": "12px",
                          "padding-right": "2px"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "border": "none",
                      "background-color": "transparent",
                      "align-items": "center",
                      "flex-direction": "row",
                      "display": "=if([$Phone], 'flex', 'none')",
                      "border-radius": "5px",
                      "text-align": "center",
                      "vertical-align": "middle",
                      "margin": "8px 10px 0px 15px",
                      "padding": "0 13 0 13px"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "attributes": {
                          "iconName": "phone"
                        },
                        "style": {
                          "padding-right": "6px",
                          "font-size": "14px"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "='(' + substring([$Phone], 0, 3) + ') ' + substring([$Phone], 3, 6) + '-' + substring([$Phone], 6, 10)",
                        "style": {
                          "font-size": "12px"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "margin-left": "auto",
                      "display": "flex"
                    },
                    "children": [
                      {
                        "elmType": "button",
                        "customRowAction": {
                          "action": "share"
                        },
                        "attributes": {
                          "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
                        },
                        "style": {
                          "border": "none",
                          "background-color": "transparent",
                          "align-items": "center",
                          "flex-direction": "row",
                          "display": "flex",
                          "cursor": "pointer",
                          "border-radius": "5px",
                          "text-align": "center",
                          "vertical-align": "middle",
                          "margin": "8px 10px 0px 15px",
                          "padding": "0 13 0 13px"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "attributes": {
                              "iconName": "share"
                            },
                            "style": {
                              "padding-right": "6px",
                              "font-size": "16px"
                            }
                          },
                          {
                            "elmType": "span",
                            "txtContent": "Share",
                            "style": {
                              "font-size": "12px"
                            }
                          }
                        ]
                      },
                      {
                        "elmType": "button",
                        "customRowAction": {
                          "action": "defaultClick"
                        },
                        "attributes": {
                          "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
                        },
                        "style": {
                          "border": "none",
                          "background-color": "transparent",
                          "align-items": "center",
                          "flex-direction": "row",
                          "display": "flex",
                          "cursor": "pointer",
                          "border-radius": "5px",
                          "text-align": "center",
                          "vertical-align": "middle",
                          "margin": "8px 10px 0px 15px",
                          "padding": "0 13 0 13px"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "attributes": {
                              "iconName": "info"
                            },
                            "style": {
                              "padding-right": "6px",
                              "font-size": "16px"
                            }
                          },
                          {
                            "elmType": "span",
                            "txtContent": "Info",
                            "style": {
                              "font-size": "12px"
                            }
                          }
                        ]
                      },
                      {
                        "elmType": "button",
                        "customRowAction": {
                          "action": "editProps"
                        },
                        "attributes": {
                          "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
                        },
                        "style": {
                          "border": "none",
                          "background-color": "transparent",
                          "align-items": "center",
                          "flex-direction": "row",
                          "display": "=if(@me != [$Author.email], 'none', 'flex')",
                          "cursor": "pointer",
                          "border-radius": "5px",
                          "text-align": "center",
                          "vertical-align": "middle",
                          "margin": "8px 10px 0px 15px",
                          "padding": "0 13 0 13px"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "attributes": {
                              "iconName": "edit"
                            },
                            "style": {
                              "padding-right": "6px",
                              "font-size": "16px"
                            }
                          },
                          {
                            "elmType": "span",
                            "txtContent": "Edit",
                            "style": {
                              "font-size": "12px"
                            }
                          }
                        ]
                      },
                      {
                        "elmType": "button",
                        "customRowAction": {
                          "action": "delete"
                        },
                        "attributes": {
                          "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
                        },
                        "style": {
                          "border": "none",
                          "background-color": "transparent",
                          "align-items": "center",
                          "flex-direction": "row",
                          "display": "=if(@me != [$Author.email], 'none', 'flex')",
                          "cursor": "pointer",
                          "border-radius": "5px",
                          "text-align": "center",
                          "vertical-align": "middle",
                          "margin": "8px 10px 0px 15px",
                          "padding": "0 13 0 13px"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "attributes": {
                              "iconName": "delete"
                            },
                            "style": {
                              "padding-right": "6px",
                              "font-size": "16px"
                            }
                          },
                          {
                            "elmType": "span",
                            "txtContent": "Delete",
                            "style": {
                              "font-size": "12px"
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}