SOLVED

SharePoint list and Galery view with links to filtered sub list

Copper Contributor

Hi, 

I've created an SharePoint list of programs and have a separate list of projects, where each project refers to a program (it has a lookup column to a program list). 

I have found an inspirational article about cascade lists (Working with Cascading Lists in SharePoint and Power Apps) and I changed the format of the Title of the program on my list, so when you click on it, it will open the list of projects filtered by the program. But this works only for the List view, not a Galery (Tiles) view. 

 

Here is the column format I used on the Title column of the program list. 

 

 

 

 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "txtContent": "[$Title]",
      "attributes": {
        "target": "_top",
        "href": {
          "operator": "+",
          "operands": [
            "https://company.sharepoint.com/teams/ProjectManagement/Lists/Projects/GroupedByProgram.aspx?viewid=a5d9b369%2Df9db%2D498b%2Dbd43%2Df339dd030bd1&?FilterField1=Program%5Fname&FilterValue1=",
            "[$Title]",
            "&FilterType1=Lookup"
          ]
        }
      }
    }
  ]
}

 

 

 

 

 

 

How to make it possible on the Gallery (Tile) view of programs, so when the user clicks on the tile it will not open the view/edit of the specific program. Instead, it will open the project list filtered by the program. 

 

I was experimenting a bit with the JSON Format View of the Gallery (Tile) view. I have replaced the section 

 

 

 

 

    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation"
        },
        "customRowAction": {
          "action": "defaultClick"
        }

 

 

 

 

To the one 

 

 

 

 

  "children": [
    {
      "elmType": "a",
      "txtContent": "[$Title]",
      "attributes": {
        "target": "_top",
        "href": {
          "operator": "+",
          "operands": [
            "https://company.sharepoint.com/teams/ProjectManagement/Lists/Projects/GroupedByProgram.aspx?viewid=a5d9b369%2Df9db%2D498b%2Dbd43%2Df339dd030bd1&?FilterField1=Program%5Fname&FilterValue1=",
            "[$Title]",
            "&FilterType1=Lookup"
          ]
        }
      }
    },

 

 

 

 

This only showed me the Program name on the left side of each Tile which was clickable and open the list of projects filtered by the program name. But is not the experience I wanted. 

 

Do you have any tips on what to change in JSON format of the JSON Format View of Gallery (Tile) view so when the user clicks the tile it will open the filtered project list?

 

/Mike

12 Replies

@mziemba Can you provide current complete JSON available in gallery view (advanced mode)? 

 

I will provide you updated JSON which will work for your requirements.


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Hi @ganeshsanap 

Here it comes:

 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 911,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!ProgramID.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "=if ([$ProgramID.displayValue] == '', '–', [$ProgramID.displayValue])",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$ProgramID.displayValue] == '', '–', [$ProgramID.displayValue])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Title.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Program_owner.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Program_owner]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Program_owner]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Program_owner]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Program_owner]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Program_owner]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Program_owner]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Program_owner]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Program_owner.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Sponsor.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Sponsor]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Sponsor]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Sponsor]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Sponsor]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Sponsor]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Sponsor]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Sponsor]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Sponsor.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Senior_Users.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Senior_Users]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Senior_Users]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Senior_Users]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Senior_Users]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Senior_Users]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Senior_Users]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Senior_Users]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Senior_Users.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Project_Change_Authority.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Project_Change_Authority]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Project_Change_Authority]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Project_Change_Authority]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Project_Change_Authority]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Project_Change_Authority]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Project_Change_Authority]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Project_Change_Authority]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Project_Change_Authority.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Team_Managers.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Team_Managers]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Team_Managers]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Team_Managers]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Team_Managers]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Team_Managers]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Team_Managers]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Team_Managers]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Team_Managers.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Program_Manager.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Program_Manager]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Program_Manager]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Program_Manager]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Program_Manager]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Program_Manager]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Program_Manager]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Program_Manager]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Program_Manager.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Program_type.DisplayName]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-content "
                },
                "children": [
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Program_type]) == 0, '–', '')"
                  },
                  {
                    "forEach": "lookupIterator in [$Program_type]",
                    "elmType": "a",
                    "attributes": {
                      "target": "_blank",
                      "class": "ms-fontColor-neutralPrimary sp-card-urlContent sp-card-lookupInlineValues sp-card-keyboard-focusable ",
                      "href": {
                        "operator": "+",
                        "operands": [
                          "&ID=",
                          "[$lookupIterator.lookupId]"
                        ]
                      }
                    },
                    "txtContent": "[$lookupIterator.lookupValue]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!KPI_Overall.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$KPI_Overall]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$KPI_Overall] == '', '–', [$KPI_Overall])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!KPI_Progress.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$KPI_Progress]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$KPI_Progress] == '', '–', [$KPI_Progress])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!KPI_Resources.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$KPI_Resources]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$KPI_Resources] == '', '–', [$KPI_Resources])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!KPI_Economy.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$KPI_Economy]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$KPI_Economy] == '', '–', [$KPI_Economy])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!KPI_Risk.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$KPI_Risk]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$KPI_Risk] == '', '–', [$KPI_Risk])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!KPI_Gains.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$KPI_Gains]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$KPI_Gains] == '', '–', [$KPI_Gains])"
              }
            ]
          }
        ]
      }
    ]
  }
}

Here is what is on the screen 

mziemba_0-1663677340967.png

 

 

@mziemba Try using this JSON: 

 

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
    "height": 911,
    "width": 254,
    "hideSelection": false,
    "fillHorizontally": true,
    "formatter": {
        "elmType": "div",
        "attributes": {
            "class": "sp-card-container"
        },
        "children": [
            {
                "elmType": "a",
                "attributes": {
                    "target": "_top",
                    "href": {
                        "operator": "+",
                        "operands": [
                            "https://company.sharepoint.com/teams/ProjectManagement/Lists/Projects/GroupedByProgram.aspx?viewid=a5d9b369%2Df9db%2D498b%2Dbd43%2Df339dd030bd1&?FilterField1=Program%5Fname&FilterValue1=",
                            "[$Title]",
                            "&FilterType1=Lookup"
                        ]
                    }
                },
                "children": [
                    {
                        "elmType": "div",
                        "attributes": {
                            "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
                        },
                        "children": [
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-displayColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!ProgramID.DisplayName]"
                                    },
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "title": "=if ([$ProgramID.displayValue] == '', '–', [$ProgramID.displayValue])",
                                            "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                                            "role": "heading",
                                            "aria-level": "3"
                                        },
                                        "txtContent": "=if ([$ProgramID.displayValue] == '', '–', [$ProgramID.displayValue])"
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-displayColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!Title.DisplayName]"
                                    },
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "title": "[$Title]",
                                            "class": "ms-fontColor-neutralPrimary sp-card-content "
                                        },
                                        "txtContent": "=if ([$Title] == '', '–', [$Title])"
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-previewColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!Program_owner.DisplayName]"
                                    },
                                    {
                                        "elmType": "div",
                                        "style": {
                                            "display": "flex"
                                        },
                                        "children": [
                                            {
                                                "elmType": "p",
                                                "attributes": {
                                                    "class": "sp-card-userEmptyText"
                                                },
                                                "txtContent": "=if(length([$Program_owner]) == 0, '–', '')"
                                            },
                                            {
                                                "forEach": "personIterator in [$Program_owner]",
                                                "elmType": "a",
                                                "attributes": {
                                                    "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                                                },
                                                "style": {
                                                    "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                                                },
                                                "children": [
                                                    {
                                                        "elmType": "img",
                                                        "defaultHoverField": "[$personIterator]",
                                                        "attributes": {
                                                            "src": "=getUserImage([$personIterator.email], 'S')",
                                                            "title": "[$personIterator.title]",
                                                            "class": "sp-card-userThumbnail"
                                                        },
                                                        "style": {
                                                            "display": "=if(length([$Program_owner]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                                                        }
                                                    },
                                                    {
                                                        "elmType": "div",
                                                        "attributes": {
                                                            "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                                                        },
                                                        "style": {
                                                            "display": "=if(length([$Program_owner]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                                                        },
                                                        "customCardProps": {
                                                            "formatter": {
                                                                "elmType": "div",
                                                                "attributes": {
                                                                    "class": "sp-card-personCallout"
                                                                },
                                                                "children": [
                                                                    {
                                                                        "forEach": "personIterator in [$Program_owner]",
                                                                        "elmType": "div",
                                                                        "attributes": {
                                                                            "class": "sp-card-userContainer sp-card-userCustomCard"
                                                                        },
                                                                        "style": {
                                                                            "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                                                        },
                                                                        "children": [
                                                                            {
                                                                                "elmType": "img",
                                                                                "defaultHoverField": "[$personIterator]",
                                                                                "attributes": {
                                                                                    "src": "=getUserImage([$personIterator.email], 'S')",
                                                                                    "title": "[$personIterator.title]",
                                                                                    "class": "sp-card-userThumbnail"
                                                                                }
                                                                            }
                                                                        ]
                                                                    }
                                                                ]
                                                            },
                                                            "openOnEvent": "hover"
                                                        },
                                                        "children": [
                                                            {
                                                                "elmType": "span",
                                                                "txtContent": "='+' + toString(length([$Program_owner]) - (4))"
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "elmType": "div",
                                                "attributes": {
                                                    "class": "sp-card-userTitle"
                                                },
                                                "style": {
                                                    "display": "=if(length([$Program_owner]) == 1, '', 'none')"
                                                },
                                                "defaultHoverField": "[$personIterator]",
                                                "txtContent": "[$Program_owner.title]"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-previewColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!Sponsor.DisplayName]"
                                    },
                                    {
                                        "elmType": "div",
                                        "style": {
                                            "display": "flex"
                                        },
                                        "children": [
                                            {
                                                "elmType": "p",
                                                "attributes": {
                                                    "class": "sp-card-userEmptyText"
                                                },
                                                "txtContent": "=if(length([$Sponsor]) == 0, '–', '')"
                                            },
                                            {
                                                "forEach": "personIterator in [$Sponsor]",
                                                "elmType": "a",
                                                "attributes": {
                                                    "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                                                },
                                                "style": {
                                                    "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                                                },
                                                "children": [
                                                    {
                                                        "elmType": "img",
                                                        "defaultHoverField": "[$personIterator]",
                                                        "attributes": {
                                                            "src": "=getUserImage([$personIterator.email], 'S')",
                                                            "title": "[$personIterator.title]",
                                                            "class": "sp-card-userThumbnail"
                                                        },
                                                        "style": {
                                                            "display": "=if(length([$Sponsor]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                                                        }
                                                    },
                                                    {
                                                        "elmType": "div",
                                                        "attributes": {
                                                            "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                                                        },
                                                        "style": {
                                                            "display": "=if(length([$Sponsor]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                                                        },
                                                        "customCardProps": {
                                                            "formatter": {
                                                                "elmType": "div",
                                                                "attributes": {
                                                                    "class": "sp-card-personCallout"
                                                                },
                                                                "children": [
                                                                    {
                                                                        "forEach": "personIterator in [$Sponsor]",
                                                                        "elmType": "div",
                                                                        "attributes": {
                                                                            "class": "sp-card-userContainer sp-card-userCustomCard"
                                                                        },
                                                                        "style": {
                                                                            "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                                                        },
                                                                        "children": [
                                                                            {
                                                                                "elmType": "img",
                                                                                "defaultHoverField": "[$personIterator]",
                                                                                "attributes": {
                                                                                    "src": "=getUserImage([$personIterator.email], 'S')",
                                                                                    "title": "[$personIterator.title]",
                                                                                    "class": "sp-card-userThumbnail"
                                                                                }
                                                                            }
                                                                        ]
                                                                    }
                                                                ]
                                                            },
                                                            "openOnEvent": "hover"
                                                        },
                                                        "children": [
                                                            {
                                                                "elmType": "span",
                                                                "txtContent": "='+' + toString(length([$Sponsor]) - (4))"
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "elmType": "div",
                                                "attributes": {
                                                    "class": "sp-card-userTitle"
                                                },
                                                "style": {
                                                    "display": "=if(length([$Sponsor]) == 1, '', 'none')"
                                                },
                                                "defaultHoverField": "[$personIterator]",
                                                "txtContent": "[$Sponsor.title]"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-previewColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!Senior_Users.DisplayName]"
                                    },
                                    {
                                        "elmType": "div",
                                        "style": {
                                            "display": "flex"
                                        },
                                        "children": [
                                            {
                                                "elmType": "p",
                                                "attributes": {
                                                    "class": "sp-card-userEmptyText"
                                                },
                                                "txtContent": "=if(length([$Senior_Users]) == 0, '–', '')"
                                            },
                                            {
                                                "forEach": "personIterator in [$Senior_Users]",
                                                "elmType": "a",
                                                "attributes": {
                                                    "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                                                },
                                                "style": {
                                                    "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                                                },
                                                "children": [
                                                    {
                                                        "elmType": "img",
                                                        "defaultHoverField": "[$personIterator]",
                                                        "attributes": {
                                                            "src": "=getUserImage([$personIterator.email], 'S')",
                                                            "title": "[$personIterator.title]",
                                                            "class": "sp-card-userThumbnail"
                                                        },
                                                        "style": {
                                                            "display": "=if(length([$Senior_Users]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                                                        }
                                                    },
                                                    {
                                                        "elmType": "div",
                                                        "attributes": {
                                                            "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                                                        },
                                                        "style": {
                                                            "display": "=if(length([$Senior_Users]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                                                        },
                                                        "customCardProps": {
                                                            "formatter": {
                                                                "elmType": "div",
                                                                "attributes": {
                                                                    "class": "sp-card-personCallout"
                                                                },
                                                                "children": [
                                                                    {
                                                                        "forEach": "personIterator in [$Senior_Users]",
                                                                        "elmType": "div",
                                                                        "attributes": {
                                                                            "class": "sp-card-userContainer sp-card-userCustomCard"
                                                                        },
                                                                        "style": {
                                                                            "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                                                        },
                                                                        "children": [
                                                                            {
                                                                                "elmType": "img",
                                                                                "defaultHoverField": "[$personIterator]",
                                                                                "attributes": {
                                                                                    "src": "=getUserImage([$personIterator.email], 'S')",
                                                                                    "title": "[$personIterator.title]",
                                                                                    "class": "sp-card-userThumbnail"
                                                                                }
                                                                            }
                                                                        ]
                                                                    }
                                                                ]
                                                            },
                                                            "openOnEvent": "hover"
                                                        },
                                                        "children": [
                                                            {
                                                                "elmType": "span",
                                                                "txtContent": "='+' + toString(length([$Senior_Users]) - (4))"
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "elmType": "div",
                                                "attributes": {
                                                    "class": "sp-card-userTitle"
                                                },
                                                "style": {
                                                    "display": "=if(length([$Senior_Users]) == 1, '', 'none')"
                                                },
                                                "defaultHoverField": "[$personIterator]",
                                                "txtContent": "[$Senior_Users.title]"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-previewColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!Project_Change_Authority.DisplayName]"
                                    },
                                    {
                                        "elmType": "div",
                                        "style": {
                                            "display": "flex"
                                        },
                                        "children": [
                                            {
                                                "elmType": "p",
                                                "attributes": {
                                                    "class": "sp-card-userEmptyText"
                                                },
                                                "txtContent": "=if(length([$Project_Change_Authority]) == 0, '–', '')"
                                            },
                                            {
                                                "forEach": "personIterator in [$Project_Change_Authority]",
                                                "elmType": "a",
                                                "attributes": {
                                                    "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                                                },
                                                "style": {
                                                    "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                                                },
                                                "children": [
                                                    {
                                                        "elmType": "img",
                                                        "defaultHoverField": "[$personIterator]",
                                                        "attributes": {
                                                            "src": "=getUserImage([$personIterator.email], 'S')",
                                                            "title": "[$personIterator.title]",
                                                            "class": "sp-card-userThumbnail"
                                                        },
                                                        "style": {
                                                            "display": "=if(length([$Project_Change_Authority]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                                                        }
                                                    },
                                                    {
                                                        "elmType": "div",
                                                        "attributes": {
                                                            "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                                                        },
                                                        "style": {
                                                            "display": "=if(length([$Project_Change_Authority]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                                                        },
                                                        "customCardProps": {
                                                            "formatter": {
                                                                "elmType": "div",
                                                                "attributes": {
                                                                    "class": "sp-card-personCallout"
                                                                },
                                                                "children": [
                                                                    {
                                                                        "forEach": "personIterator in [$Project_Change_Authority]",
                                                                        "elmType": "div",
                                                                        "attributes": {
                                                                            "class": "sp-card-userContainer sp-card-userCustomCard"
                                                                        },
                                                                        "style": {
                                                                            "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                                                        },
                                                                        "children": [
                                                                            {
                                                                                "elmType": "img",
                                                                                "defaultHoverField": "[$personIterator]",
                                                                                "attributes": {
                                                                                    "src": "=getUserImage([$personIterator.email], 'S')",
                                                                                    "title": "[$personIterator.title]",
                                                                                    "class": "sp-card-userThumbnail"
                                                                                }
                                                                            }
                                                                        ]
                                                                    }
                                                                ]
                                                            },
                                                            "openOnEvent": "hover"
                                                        },
                                                        "children": [
                                                            {
                                                                "elmType": "span",
                                                                "txtContent": "='+' + toString(length([$Project_Change_Authority]) - (4))"
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "elmType": "div",
                                                "attributes": {
                                                    "class": "sp-card-userTitle"
                                                },
                                                "style": {
                                                    "display": "=if(length([$Project_Change_Authority]) == 1, '', 'none')"
                                                },
                                                "defaultHoverField": "[$personIterator]",
                                                "txtContent": "[$Project_Change_Authority.title]"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-previewColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!Team_Managers.DisplayName]"
                                    },
                                    {
                                        "elmType": "div",
                                        "style": {
                                            "display": "flex"
                                        },
                                        "children": [
                                            {
                                                "elmType": "p",
                                                "attributes": {
                                                    "class": "sp-card-userEmptyText"
                                                },
                                                "txtContent": "=if(length([$Team_Managers]) == 0, '–', '')"
                                            },
                                            {
                                                "forEach": "personIterator in [$Team_Managers]",
                                                "elmType": "a",
                                                "attributes": {
                                                    "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                                                },
                                                "style": {
                                                    "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                                                },
                                                "children": [
                                                    {
                                                        "elmType": "img",
                                                        "defaultHoverField": "[$personIterator]",
                                                        "attributes": {
                                                            "src": "=getUserImage([$personIterator.email], 'S')",
                                                            "title": "[$personIterator.title]",
                                                            "class": "sp-card-userThumbnail"
                                                        },
                                                        "style": {
                                                            "display": "=if(length([$Team_Managers]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                                                        }
                                                    },
                                                    {
                                                        "elmType": "div",
                                                        "attributes": {
                                                            "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                                                        },
                                                        "style": {
                                                            "display": "=if(length([$Team_Managers]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                                                        },
                                                        "customCardProps": {
                                                            "formatter": {
                                                                "elmType": "div",
                                                                "attributes": {
                                                                    "class": "sp-card-personCallout"
                                                                },
                                                                "children": [
                                                                    {
                                                                        "forEach": "personIterator in [$Team_Managers]",
                                                                        "elmType": "div",
                                                                        "attributes": {
                                                                            "class": "sp-card-userContainer sp-card-userCustomCard"
                                                                        },
                                                                        "style": {
                                                                            "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                                                        },
                                                                        "children": [
                                                                            {
                                                                                "elmType": "img",
                                                                                "defaultHoverField": "[$personIterator]",
                                                                                "attributes": {
                                                                                    "src": "=getUserImage([$personIterator.email], 'S')",
                                                                                    "title": "[$personIterator.title]",
                                                                                    "class": "sp-card-userThumbnail"
                                                                                }
                                                                            }
                                                                        ]
                                                                    }
                                                                ]
                                                            },
                                                            "openOnEvent": "hover"
                                                        },
                                                        "children": [
                                                            {
                                                                "elmType": "span",
                                                                "txtContent": "='+' + toString(length([$Team_Managers]) - (4))"
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "elmType": "div",
                                                "attributes": {
                                                    "class": "sp-card-userTitle"
                                                },
                                                "style": {
                                                    "display": "=if(length([$Team_Managers]) == 1, '', 'none')"
                                                },
                                                "defaultHoverField": "[$personIterator]",
                                                "txtContent": "[$Team_Managers.title]"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-previewColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!Program_Manager.DisplayName]"
                                    },
                                    {
                                        "elmType": "div",
                                        "style": {
                                            "display": "flex"
                                        },
                                        "children": [
                                            {
                                                "elmType": "p",
                                                "attributes": {
                                                    "class": "sp-card-userEmptyText"
                                                },
                                                "txtContent": "=if(length([$Program_Manager]) == 0, '–', '')"
                                            },
                                            {
                                                "forEach": "personIterator in [$Program_Manager]",
                                                "elmType": "a",
                                                "attributes": {
                                                    "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                                                },
                                                "style": {
                                                    "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                                                },
                                                "children": [
                                                    {
                                                        "elmType": "img",
                                                        "defaultHoverField": "[$personIterator]",
                                                        "attributes": {
                                                            "src": "=getUserImage([$personIterator.email], 'S')",
                                                            "title": "[$personIterator.title]",
                                                            "class": "sp-card-userThumbnail"
                                                        },
                                                        "style": {
                                                            "display": "=if(length([$Program_Manager]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                                                        }
                                                    },
                                                    {
                                                        "elmType": "div",
                                                        "attributes": {
                                                            "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                                                        },
                                                        "style": {
                                                            "display": "=if(length([$Program_Manager]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                                                        },
                                                        "customCardProps": {
                                                            "formatter": {
                                                                "elmType": "div",
                                                                "attributes": {
                                                                    "class": "sp-card-personCallout"
                                                                },
                                                                "children": [
                                                                    {
                                                                        "forEach": "personIterator in [$Program_Manager]",
                                                                        "elmType": "div",
                                                                        "attributes": {
                                                                            "class": "sp-card-userContainer sp-card-userCustomCard"
                                                                        },
                                                                        "style": {
                                                                            "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                                                        },
                                                                        "children": [
                                                                            {
                                                                                "elmType": "img",
                                                                                "defaultHoverField": "[$personIterator]",
                                                                                "attributes": {
                                                                                    "src": "=getUserImage([$personIterator.email], 'S')",
                                                                                    "title": "[$personIterator.title]",
                                                                                    "class": "sp-card-userThumbnail"
                                                                                }
                                                                            }
                                                                        ]
                                                                    }
                                                                ]
                                                            },
                                                            "openOnEvent": "hover"
                                                        },
                                                        "children": [
                                                            {
                                                                "elmType": "span",
                                                                "txtContent": "='+' + toString(length([$Program_Manager]) - (4))"
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "elmType": "div",
                                                "attributes": {
                                                    "class": "sp-card-userTitle"
                                                },
                                                "style": {
                                                    "display": "=if(length([$Program_Manager]) == 1, '', 'none')"
                                                },
                                                "defaultHoverField": "[$personIterator]",
                                                "txtContent": "[$Program_Manager.title]"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-displayColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!Program_type.DisplayName]"
                                    },
                                    {
                                        "elmType": "div",
                                        "attributes": {
                                            "class": "sp-card-content "
                                        },
                                        "children": [
                                            {
                                                "elmType": "p",
                                                "txtContent": "=if(length([$Program_type]) == 0, '–', '')"
                                            },
                                            {
                                                "forEach": "lookupIterator in [$Program_type]",
                                                "elmType": "a",
                                                "attributes": {
                                                    "target": "_blank",
                                                    "class": "ms-fontColor-neutralPrimary sp-card-urlContent sp-card-lookupInlineValues sp-card-keyboard-focusable ",
                                                    "href": {
                                                        "operator": "+",
                                                        "operands": [
                                                            "&ID=",
                                                            "[$lookupIterator.lookupId]"
                                                        ]
                                                    }
                                                },
                                                "txtContent": "[$lookupIterator.lookupValue]"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-displayColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!KPI_Overall.DisplayName]"
                                    },
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "title": "[$KPI_Overall]",
                                            "class": "ms-fontColor-neutralPrimary sp-card-content "
                                        },
                                        "txtContent": "=if ([$KPI_Overall] == '', '–', [$KPI_Overall])"
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-displayColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!KPI_Progress.DisplayName]"
                                    },
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "title": "[$KPI_Progress]",
                                            "class": "ms-fontColor-neutralPrimary sp-card-content "
                                        },
                                        "txtContent": "=if ([$KPI_Progress] == '', '–', [$KPI_Progress])"
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-displayColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!KPI_Resources.DisplayName]"
                                    },
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "title": "[$KPI_Resources]",
                                            "class": "ms-fontColor-neutralPrimary sp-card-content "
                                        },
                                        "txtContent": "=if ([$KPI_Resources] == '', '–', [$KPI_Resources])"
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-displayColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!KPI_Economy.DisplayName]"
                                    },
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "title": "[$KPI_Economy]",
                                            "class": "ms-fontColor-neutralPrimary sp-card-content "
                                        },
                                        "txtContent": "=if ([$KPI_Economy] == '', '–', [$KPI_Economy])"
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-displayColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!KPI_Risk.DisplayName]"
                                    },
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "title": "[$KPI_Risk]",
                                            "class": "ms-fontColor-neutralPrimary sp-card-content "
                                        },
                                        "txtContent": "=if ([$KPI_Risk] == '', '–', [$KPI_Risk])"
                                    }
                                ]
                            },
                            {
                                "elmType": "div",
                                "attributes": {
                                    "class": "sp-card-lastTextColumnContainer"
                                },
                                "children": [
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "class": "ms-fontColor-neutralSecondary sp-card-label"
                                        },
                                        "txtContent": "[!KPI_Gains.DisplayName]"
                                    },
                                    {
                                        "elmType": "p",
                                        "attributes": {
                                            "title": "[$KPI_Gains]",
                                            "class": "ms-fontColor-neutralPrimary sp-card-content "
                                        },
                                        "txtContent": "=if ([$KPI_Gains] == '', '–', [$KPI_Gains])"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Thank you for the sample JSON code.
It generally turns some filed names into a link that opens the subsite.
However, can we make a whole tile act as a link to the subsite?
When you create a Galery view and click on any space on the tile, the properties of the list record show up. Why can't we simply change this behavior to open the sub list?

@mziemba Can you using this JSON and see if it works for you: 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 911,
  "width": 254,
  "hideSelection": true,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "a",
    "attributes": {
      "class": "sp-card-container",
      "target": "_top",
      "href": {
            "operator": "+",
            "operands": [
                "https://company.sharepoint.com/teams/ProjectManagement/Lists/Projects/GroupedByProgram.aspx?viewid=a5d9b369%2Df9db%2D498b%2Dbd43%2Df339dd030bd1&?FilterField1=Program%5Fname&FilterValue1=",
                "[$Title]",
                "&FilterType1=Lookup"
            ]
        }
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!ProgramID.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "=if ([$ProgramID.displayValue] == '', '–', [$ProgramID.displayValue])",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$ProgramID.displayValue] == '', '–', [$ProgramID.displayValue])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Title.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Program_owner.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Program_owner]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Program_owner]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Program_owner]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Program_owner]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Program_owner]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Program_owner]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Program_owner]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Program_owner.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Sponsor.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Sponsor]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Sponsor]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Sponsor]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Sponsor]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Sponsor]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Sponsor]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Sponsor]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Sponsor.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Senior_Users.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Senior_Users]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Senior_Users]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Senior_Users]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Senior_Users]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Senior_Users]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Senior_Users]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Senior_Users]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Senior_Users.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Project_Change_Authority.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Project_Change_Authority]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Project_Change_Authority]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Project_Change_Authority]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Project_Change_Authority]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Project_Change_Authority]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Project_Change_Authority]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Project_Change_Authority]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Project_Change_Authority.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Team_Managers.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Team_Managers]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Team_Managers]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Team_Managers]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Team_Managers]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Team_Managers]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Team_Managers]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Team_Managers]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Team_Managers.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Program_Manager.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Program_Manager]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Program_Manager]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Program_Manager]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Program_Manager]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Program_Manager]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Program_Manager]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Program_Manager]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Program_Manager.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Program_type.DisplayName]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-content "
                },
                "children": [
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Program_type]) == 0, '–', '')"
                  },
                  {
                    "forEach": "lookupIterator in [$Program_type]",
                    "elmType": "a",
                    "attributes": {
                      "target": "_blank",
                      "class": "ms-fontColor-neutralPrimary sp-card-urlContent sp-card-lookupInlineValues sp-card-keyboard-focusable ",
                      "href": {
                        "operator": "+",
                        "operands": [
                          "&ID=",
                          "[$lookupIterator.lookupId]"
                        ]
                      }
                    },
                    "txtContent": "[$lookupIterator.lookupValue]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!KPI_Overall.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$KPI_Overall]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$KPI_Overall] == '', '–', [$KPI_Overall])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!KPI_Progress.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$KPI_Progress]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$KPI_Progress] == '', '–', [$KPI_Progress])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!KPI_Resources.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$KPI_Resources]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$KPI_Resources] == '', '–', [$KPI_Resources])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!KPI_Economy.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$KPI_Economy]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$KPI_Economy] == '', '–', [$KPI_Economy])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!KPI_Risk.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$KPI_Risk]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$KPI_Risk] == '', '–', [$KPI_Risk])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!KPI_Gains.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$KPI_Gains]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$KPI_Gains] == '', '–', [$KPI_Gains])"
              }
            ]
          }
        ]
      }
    ]
  }
}

 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

@ganeshsanap 

Now all my tiles are not visible but I can see the hand cursor when hover over the empty space and when clicking it takes me to the list. 

So now how to make them visible again?

 

mziemba_0-1663693199576.png

 

@mziemba I think there is some problem with my above JSON. Please remove the above JSON and use your initial JSON you provided above.

 

I will try to reproduce same scenario as yours tomorrow and will provide working JSON. I was not having all the columns in my list same as your columns. So, I was not able to reproduce the exact same JSON as yours earlier.


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

@ganeshsanap you can provide a JSON based on your setup. I can try it out on my side and if works I can add all columns later. 

@Michal_Z @mziemba 

 

For my setup, below JSON code works for me: 

 

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
    "height": 73,
    "width": 254,
    "hideSelection": true,
    "fillHorizontally": true,
    "formatter": {
        "elmType": "a",
        "style": {
            "text-decoration": "none"
        },
        "attributes": {
            "class": "sp-card-container",
            "target": "_top",
            "href": "='https://company.sharepoint.com/teams/ProjectManagement/Lists/Projects/GroupedByProgram.aspx?viewid=a5d9b369%2Df9db%2D498b%2Dbd43%2Df339dd030bd1&?FilterField1=Program%5Fname&FilterValue1=' + [$Title] + '&FilterType1=Lookup'"
        },
        "children": [
            {
                "elmType": "div",
                "style": {
                    "background-color": "lightblue"
                },
                "attributes": {
                    "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
                },
                "children": [
                    {
                        "elmType": "div",
                        "attributes": {
                            "class": "sp-card-lastTextColumnContainer"
                        },
                        "children": [
                            {
                                "elmType": "p",
                                "attributes": {
                                    "class": "ms-fontColor-neutralSecondary sp-card-label"
                                },
                                "txtContent": "[!Title.DisplayName]"
                            },
                            {
                                "elmType": "p",
                                "attributes": {
                                    "title": "[$Title]",
                                    "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                                    "role": "heading",
                                    "aria-level": "3"
                                },
                                "txtContent": "=if ([$Title] == '', '–', [$Title])"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

 

Output

ganeshsanap_0-1663738058492.png


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

@ganeshsanap Thank you for your help so far. 

The title only works like a charm. 

But when I try to add the rest of the fields I run into the empty screen like before. 

Can you paste an example of the JSON format with at least two properties in the tile, please? I.e. Title and additional fields like date or ID.

 

I will be trying to get it to work on my end as well. 

 

best response confirmed by mziemba (Copper Contributor)
Solution

@Michal_Z Below JSON works for multiple fields: 

 

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
    "height": 123,
    "width": 254,
    "hideSelection": true,
    "fillHorizontally": true,
    "formatter": {
        "elmType": "div",
        "attributes": {
            "class": "sp-card-container"
        },
        "children": [
            {
                "elmType": "a",
                "style": {
                    "text-decoration": "none"
                },
                "attributes": {
                    "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer",
                    "target": "_top",
                    "href": "='https://company.sharepoint.com/teams/ProjectManagement/Lists/Projects/GroupedByProgram.aspx?viewid=a5d9b369%2Df9db%2D498b%2Dbd43%2Df339dd030bd1&?FilterField1=Program%5Fname&FilterValue1=' + [$Title] + '&FilterType1=Lookup'"
                },
                "children": [
                    {
                        "elmType": "div",
                        "attributes": {
                            "class": "sp-card-displayColumnContainer"
                        },
                        "children": [
                            {
                                "elmType": "p",
                                "attributes": {
                                    "class": "ms-fontColor-neutralSecondary sp-card-label"
                                },
                                "txtContent": "[!Title.DisplayName]"
                            },
                            {
                                "elmType": "p",
                                "attributes": {
                                    "title": "[$Title]",
                                    "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                                    "role": "heading",
                                    "aria-level": "3"
                                },
                                "txtContent": "=if ([$Title] == '', '–', [$Title])"
                            }
                        ]
                    },
                    {
                        "elmType": "div",
                        "attributes": {
                            "class": "sp-card-lastTextColumnContainer"
                        },
                        "children": [
                            {
                                "elmType": "p",
                                "attributes": {
                                    "class": "ms-fontColor-neutralSecondary sp-card-label"
                                },
                                "txtContent": "[!URL.DisplayName]"
                            },
                            {
                                "elmType": "p",
                                "attributes": {
                                    "title": "[$URL]",
                                    "class": "ms-fontColor-neutralPrimary sp-card-content "
                                },
                                "txtContent": "=if ([$URL] == '', '–', [$URL])"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Hi @ganeshsanap 

Thank you for the sample. 

Based on that I was able to make it work on my list. 

Here is the working JSON file if anyone is curious. 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 660,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation",
          "target": "_top",
          "href": "='https://company.sharepoint.com/teams/ProjectManagement/Lists/Projects/GroupedByProgram.aspx?viewid=a5d9b369%2Df9db%2D498b%2Dbd43%2Df339dd030bd1&?FilterField1=Program%5Fname&FilterValue1=' + [$Title] + '&FilterType1=Lookup'"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Program_owner.DisplayName]"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "class": "sp-card-userEmptyText"
                    },
                    "txtContent": "=if(length([$Program_owner]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Program_owner]",
                    "elmType": "a",
                    "attributes": {
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
                    },
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$personIterator]",
                        "attributes": {
                          "src": "=getUserImage([$personIterator.email], 'S')",
                          "title": "[$personIterator.title]",
                          "class": "sp-card-userThumbnail"
                        },
                        "style": {
                          "display": "=if(length([$Program_owner]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
                        }
                      },
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
                        },
                        "style": {
                          "display": "=if(length([$Program_owner]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
                        },
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "attributes": {
                              "class": "sp-card-personCallout"
                            },
                            "children": [
                              {
                                "forEach": "personIterator in [$Program_owner]",
                                "elmType": "div",
                                "attributes": {
                                  "class": "sp-card-userContainer sp-card-userCustomCard"
                                },
                                "style": {
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
                                },
                                "children": [
                                  {
                                    "elmType": "img",
                                    "defaultHoverField": "[$personIterator]",
                                    "attributes": {
                                      "src": "=getUserImage([$personIterator.email], 'S')",
                                      "title": "[$personIterator.title]",
                                      "class": "sp-card-userThumbnail"
                                    }
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "txtContent": "='+' + toString(length([$Program_owner]) - (4))"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "sp-card-userTitle"
                    },
                    "style": {
                      "display": "=if(length([$Program_owner]) == 1, '', 'none')"
                    },
                    "defaultHoverField": "[$personIterator]",
                    "txtContent": "[$Program_owner.title]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!ProgramID.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "=if ([$ProgramID.displayValue] == '', '–', [$ProgramID.displayValue])",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$ProgramID.displayValue] == '', '–', [$ProgramID.displayValue])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Title.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Sponsor.DisplayName]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-userContent ",
                  "title": "[$Sponsor.title]"
                },
                "children": [
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Sponsor]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Sponsor]",
                    "elmType": "p",
                    "defaultHoverField": "[$personIterator]",
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 1, 'none', '')"
                    },
                    "txtContent": "[$personIterator.title]"
                  },
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Sponsor]) > 1, ',  +' + (length([$Sponsor]) - 1) , '')"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Senior_Users.DisplayName]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-userContent ",
                  "title": "[$Senior_Users.title]"
                },
                "children": [
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Senior_Users]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Senior_Users]",
                    "elmType": "p",
                    "defaultHoverField": "[$personIterator]",
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 1, 'none', '')"
                    },
                    "txtContent": "[$personIterator.title]"
                  },
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Senior_Users]) > 1, ',  +' + (length([$Senior_Users]) - 1) , '')"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Project_Change_Authority.DisplayName]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-userContent ",
                  "title": "[$Project_Change_Authority.title]"
                },
                "children": [
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Project_Change_Authority]) == 0, '–', '')"
                  },
                  {
                    "forEach": "personIterator in [$Project_Change_Authority]",
                    "elmType": "p",
                    "defaultHoverField": "[$personIterator]",
                    "style": {
                      "display": "=if(loopIndex('personIterator') >= 1, 'none', '')"
                    },
                    "txtContent": "[$personIterator.title]"
                  },
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Project_Change_Authority]) > 1, ',  +' + (length([$Project_Change_Authority]) - 1) , '')"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Program_type.DisplayName]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-content "
                },
                "children": [
                  {
                    "elmType": "p",
                    "txtContent": "=if(length([$Program_type]) == 0, '–', '')"
                  },
                  {
                    "forEach": "lookupIterator in [$Program_type]",
                    "elmType": "a",
                    "attributes": {
                      "target": "_blank",
                      "class": "ms-fontColor-neutralPrimary sp-card-urlContent sp-card-lookupInlineValues sp-card-keyboard-focusable ",
                      "href": {
                        "operator": "+",
                        "operands": [
                          "&ID=",
                          "[$lookupIterator.lookupId]"
                        ]
                      }
                    },
                    "txtContent": "[$lookupIterator.lookupValue]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "box-sizing": "border-box",
                  "padding": "4px 8px 5px 8px",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis",
                  "display": "flex",
                  "border-radius": "16px",
                  "height": "24px",
                  "align-items": "center",
                  "white-space": "nowrap",
                  "margin": "4px 4px 4px 4px",
                  "width": "70px",
                  "justify-content": "center"
                },
                "attributes": {
                  "class": {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$KPI_Overall]",
                          "Green"
                        ]
                      },
                      "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont",
                      {
                        "operator": ":",
                        "operands": [
                          {
                            "operator": "==",
                            "operands": [
                              "[$KPI_Overall]",
                              "Yellow"
                            ]
                          },
                          "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
                          {
                            "operator": ":",
                            "operands": [
                              {
                                "operator": "==",
                                "operands": [
                                  "[$KPI_Overall]",
                                  "Red"
                                ]
                              },
                              "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont",
                              "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                            ]
                          }
                        ]
                      }
                    ]
                  }
                },
                "txtContent": "Overall"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "box-sizing": "border-box",
                  "padding": "4px 8px 5px 8px",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis",
                  "display": "flex",
                  "border-radius": "16px",
                  "height": "24px",
                  "align-items": "center",
                  "white-space": "nowrap",
                  "margin": "4px 4px 4px 4px",
                  "width": "70px",
                  "justify-content": "center"
                },
                "attributes": {
                  "class": {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$KPI_Progress]",
                          "Green"
                        ]
                      },
                      "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont",
                      {
                        "operator": ":",
                        "operands": [
                          {
                            "operator": "==",
                            "operands": [
                              "[$KPI_Progress]",
                              "Yellow"
                            ]
                          },
                          "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
                          {
                            "operator": ":",
                            "operands": [
                              {
                                "operator": "==",
                                "operands": [
                                  "[$KPI_Progress]",
                                  "Red"
                                ]
                              },
                              "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont",
                              "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                            ]
                          }
                        ]
                      }
                    ]
                  }
                },
                "txtContent": "Progress"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "box-sizing": "border-box",
                  "padding": "4px 8px 5px 8px",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis",
                  "display": "flex",
                  "border-radius": "16px",
                  "height": "24px",
                  "align-items": "center",
                  "white-space": "nowrap",
                  "margin": "4px 4px 4px 4px",
                  "width": "70px",
                  "justify-content": "center"
                },
                "attributes": {
                  "class": {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$KPI_Resources]",
                          "Green"
                        ]
                      },
                      "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont",
                      {
                        "operator": ":",
                        "operands": [
                          {
                            "operator": "==",
                            "operands": [
                              "[$KPI_Resources]",
                              "Yellow"
                            ]
                          },
                          "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
                          {
                            "operator": ":",
                            "operands": [
                              {
                                "operator": "==",
                                "operands": [
                                  "[$KPI_Resources]",
                                  "Red"
                                ]
                              },
                              "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont",
                              "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                            ]
                          }
                        ]
                      }
                    ]
                  }
                },
                "txtContent": "Resources"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "box-sizing": "border-box",
                  "padding": "4px 8px 5px 8px",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis",
                  "display": "flex",
                  "border-radius": "16px",
                  "height": "24px",
                  "align-items": "center",
                  "white-space": "nowrap",
                  "margin": "4px 4px 4px 4px",
                  "width": "70px",
                  "justify-content": "center"
                },
                "attributes": {
                  "class": {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$KPI_Economy]",
                          "Green"
                        ]
                      },
                      "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont",
                      {
                        "operator": ":",
                        "operands": [
                          {
                            "operator": "==",
                            "operands": [
                              "[$KPI_Economy]",
                              "Yellow"
                            ]
                          },
                          "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
                          {
                            "operator": ":",
                            "operands": [
                              {
                                "operator": "==",
                                "operands": [
                                  "[$KPI_Economy]",
                                  "Red"
                                ]
                              },
                              "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont",
                              "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                            ]
                          }
                        ]
                      }
                    ]
                  }
                },
                "txtContent": "Economy"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "box-sizing": "border-box",
                  "padding": "4px 8px 5px 8px",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis",
                  "display": "flex",
                  "border-radius": "16px",
                  "height": "24px",
                  "align-items": "center",
                  "white-space": "nowrap",
                  "margin": "4px 4px 4px 4px",
                  "width": "70px",
                  "justify-content": "center"
                },
                "attributes": {
                  "class": {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$KPI_Risk]",
                          "Green"
                        ]
                      },
                      "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont",
                      {
                        "operator": ":",
                        "operands": [
                          {
                            "operator": "==",
                            "operands": [
                              "[$KPI_Risk]",
                              "Yellow"
                            ]
                          },
                          "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
                          {
                            "operator": ":",
                            "operands": [
                              {
                                "operator": "==",
                                "operands": [
                                  "[$KPI_Risk]",
                                  "Red"
                                ]
                              },
                              "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont",
                              "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                            ]
                          }
                        ]
                      }
                    ]
                  }
                },
                "txtContent": "Risk"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "box-sizing": "border-box",
                  "padding": "4px 8px 5px 8px",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis",
                  "display": "flex",
                  "border-radius": "16px",
                  "height": "24px",
                  "align-items": "center",
                  "white-space": "nowrap",
                  "margin": "4px 4px 4px 4px",
                  "width": "70px",
                  "justify-content": "center"
                },
                "attributes": {
                  "class": {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$KPI_Gains]",
                          "Green"
                        ]
                      },
                      "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont",
                      {
                        "operator": ":",
                        "operands": [
                          {
                            "operator": "==",
                            "operands": [
                              "[$KPI_Gains]",
                              "Yellow"
                            ]
                          },
                          "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
                          {
                            "operator": ":",
                            "operands": [
                              {
                                "operator": "==",
                                "operands": [
                                  "[$KPI_Gains]",
                                  "Red"
                                ]
                              },
                              "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont",
                              "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                            ]
                          }
                        ]
                      }
                    ]
                  }
                },
                "txtContent": "Gains"
              }
            ]
          }
        ]
      }
    ]
  }
}
1 best response

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

@Michal_Z Below JSON works for multiple fields: 

 

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
    "height": 123,
    "width": 254,
    "hideSelection": true,
    "fillHorizontally": true,
    "formatter": {
        "elmType": "div",
        "attributes": {
            "class": "sp-card-container"
        },
        "children": [
            {
                "elmType": "a",
                "style": {
                    "text-decoration": "none"
                },
                "attributes": {
                    "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer",
                    "target": "_top",
                    "href": "='https://company.sharepoint.com/teams/ProjectManagement/Lists/Projects/GroupedByProgram.aspx?viewid=a5d9b369%2Df9db%2D498b%2Dbd43%2Df339dd030bd1&?FilterField1=Program%5Fname&FilterValue1=' + [$Title] + '&FilterType1=Lookup'"
                },
                "children": [
                    {
                        "elmType": "div",
                        "attributes": {
                            "class": "sp-card-displayColumnContainer"
                        },
                        "children": [
                            {
                                "elmType": "p",
                                "attributes": {
                                    "class": "ms-fontColor-neutralSecondary sp-card-label"
                                },
                                "txtContent": "[!Title.DisplayName]"
                            },
                            {
                                "elmType": "p",
                                "attributes": {
                                    "title": "[$Title]",
                                    "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                                    "role": "heading",
                                    "aria-level": "3"
                                },
                                "txtContent": "=if ([$Title] == '', '–', [$Title])"
                            }
                        ]
                    },
                    {
                        "elmType": "div",
                        "attributes": {
                            "class": "sp-card-lastTextColumnContainer"
                        },
                        "children": [
                            {
                                "elmType": "p",
                                "attributes": {
                                    "class": "ms-fontColor-neutralSecondary sp-card-label"
                                },
                                "txtContent": "[!URL.DisplayName]"
                            },
                            {
                                "elmType": "p",
                                "attributes": {
                                    "title": "[$URL]",
                                    "class": "ms-fontColor-neutralPrimary sp-card-content "
                                },
                                "txtContent": "=if ([$URL] == '', '–', [$URL])"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

View solution in original post