View formattingSharePoint Online

Links to Search Page

This sample demonstrates displaying links to the search page. When you open the search page, it displays the search results where the query registered in the Query column of the item has been executed.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Aug 15, 2023

Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "width": 300,
  "height": 120,
  "hideSelection": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "margin-bottom": "15px",
        "display": "flex",
        "align-items": "center"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "@group.fieldData",
          "style": {
            "font-weight": "bold"
          },
          "attributes": {
            "class": "ms-font-l"
          }
        }
      ]
    }
  },
  "formatter": {
    "elmType": "div",
    "style": {
      "width": "95%",
      "height": "95%",
      "border": "1px solid",
      "border-radius": "6px",
      "box-shadow": "0 1px 6px 0 rgba(0,0,0,0.1)",
      "display": "flex",
      "flex-direction": "column"
    },
    "attributes": {
      "class": "ms-fontColor-neutralTertiaryAlt"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "row",
          "align-items": "center",
          "width": "100%",
          "height": "65%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "28%",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "center",
                  "width": "50px",
                  "height": "50px",
                  "border-radius": "6px",
                  "font-size": "30px"
                },
                "attributes": {
                  "iconName": "=if([$Icon],[$Icon],'Page')",
                  "class": "ms-bgColor-neutralLighter ms-fontColor-themePrimary"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "width": "50%",
              "height": "85%",
              "display": "flex",
              "align-items": "center",
              "overflow": "hidden"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "[$Title]",
                "style": {
                  "font-size": "15px",
                  "font-weight": "bold",
                  "word-wrap": "break-word",
                  "width": "100%"
                },
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "margin-left": "10px"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "padding": "5px",
                  "border-radius": "6px"
                },
                "attributes": {
                  "iconName": "Info",
                  "class": "ms-bgColor-themeLighter--hover ms-fontColor-neutralPrimary ms-font-l"
                },
                "customCardProps": {
                  "openOnEvent": "hover",
                  "isBeakVisible": true,
                  "formatter": {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "flex-direction": "column",
                      "align-items": "flex-start",
                      "padding": "10px 20px",
                      "max-width": "300px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "Query",
                        "style": {
                          "font-weight": "bold",
                          "margin-bottom": "3px"
                        }
                      },
                      {
                        "elmType": "div",
                        "txtContent": "[$Query]",
                        "style": {
                          "width": "100%",
                          "word-wrap": "break-word"
                        }
                      }
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "95%",
          "height": "20%",
          "display": "flex",
          "flex-direction": "row",
          "justify-content": "space-around",
          "align-items": "center"
        },
        "children": [
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "a",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "text-decoration": "none",
                  "border-radius": "6px",
                  "padding": "3px 10px"
                },
                "attributes": {
                  "href": "=substring(@currentWeb,0,indexOf(@currentWeb,'sharepoint.com'))+'sharepoint.com/_layouts/15/sharepoint.aspx?v=search&q='+[$Query]",
                  "class": "ms-fontColor-themePrimary ms-bgColor-themeLighter--hover",
                  "target": "_blank",
                  "title": "Search Tenant"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Search"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "Tenant",
                    "style": {
                      "margin-left": "5px"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "a",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "text-decoration": "none",
                  "border-radius": "6px",
                  "padding": "3px 10px"
                },
                "attributes": {
                  "href": "=@currentWeb+'/_layouts/15/search.aspx/siteall?q='+[$Query]",
                  "class": "ms-fontColor-themePrimary ms-bgColor-themeLighter--hover",
                  "target": "_blank",
                  "title": "Search This Site"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Search"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "This Site",
                    "style": {
                      "margin-left": "5px"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "span",
                "style": {
                  "padding": "5px",
                  "border-radius": "6px",
                  "cursor": "pointer"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Favorites": "=if(indexOf([$Favorites.email],@me)>-1,removeFrom([$Favorites.email],@me),appendTo([$Favorites.email],@me))"
                  }
                },
                "attributes": {
                  "iconName": "=if(indexOf([$Favorites.email],@me)>-1,'FavoriteStarFill','FavoriteStar')",
                  "class": "ms-fontColor-themePrimary ms-bgColor-themeLighter--hover",
                  "title": "=if(indexOf([$Favorites.email],@me)>-1,'Remove to My Favorites','Add to My Favorites')"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "span",
                "style": {
                  "padding": "5px",
                  "border-radius": "6px",
                  "cursor": "pointer"
                },
                "customRowAction": {
                  "action": "defaultClick"
                },
                "attributes": {
                  "iconName": "OpenPane",
                  "class": "ms-fontColor-themePrimary ms-bgColor-themeLighter--hover",
                  "title": "Open the List Form"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "width": 300,
  "height": 120,
  "hideSelection": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "margin-bottom": "15px",
        "display": "flex",
        "align-items": "center"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "@group.fieldData",
          "style": {
            "font-weight": "bold"
          },
          "attributes": {
            "class": "ms-font-l"
          }
        }
      ]
    }
  },
  "formatter": {
    "elmType": "div",
    "style": {
      "width": "95%",
      "height": "95%",
      "border": "1px solid",
      "border-radius": "6px",
      "box-shadow": "0 1px 6px 0 rgba(0,0,0,0.1)",
      "display": "flex",
      "flex-direction": "column"
    },
    "attributes": {
      "class": "ms-fontColor-neutralTertiaryAlt"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "row",
          "align-items": "center",
          "width": "100%",
          "height": "65%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "28%",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "center",
                  "width": "50px",
                  "height": "50px",
                  "border-radius": "6px",
                  "font-size": "30px"
                },
                "attributes": {
                  "iconName": "=if([$Icon],[$Icon],'Page')",
                  "class": "ms-bgColor-neutralLighter ms-fontColor-themePrimary"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "width": "50%",
              "height": "85%",
              "display": "flex",
              "align-items": "center",
              "overflow": "hidden"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "[$Title]",
                "style": {
                  "font-size": "15px",
                  "font-weight": "bold",
                  "word-wrap": "break-word",
                  "width": "100%"
                },
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "margin-left": "10px"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "padding": "5px",
                  "border-radius": "6px"
                },
                "attributes": {
                  "iconName": "Info",
                  "class": "ms-bgColor-themeLighter--hover ms-fontColor-neutralPrimary ms-font-l"
                },
                "customCardProps": {
                  "openOnEvent": "hover",
                  "isBeakVisible": true,
                  "formatter": {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "flex-direction": "column",
                      "align-items": "flex-start",
                      "padding": "10px 20px",
                      "max-width": "300px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "Query",
                        "style": {
                          "font-weight": "bold",
                          "margin-bottom": "3px"
                        }
                      },
                      {
                        "elmType": "div",
                        "txtContent": "[$Query]",
                        "style": {
                          "width": "100%",
                          "word-wrap": "break-word"
                        }
                      }
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "95%",
          "height": "20%",
          "display": "flex",
          "flex-direction": "row",
          "justify-content": "space-around",
          "align-items": "center"
        },
        "children": [
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "a",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "text-decoration": "none",
                  "border-radius": "6px",
                  "padding": "3px 10px"
                },
                "attributes": {
                  "href": "=substring(@currentWeb,0,indexOf(@currentWeb,'sharepoint.com'))+'sharepoint.com/_layouts/15/sharepoint.aspx?v=search&q='+[$Query]",
                  "class": "ms-fontColor-themePrimary ms-bgColor-themeLighter--hover",
                  "target": "_blank",
                  "title": "Search Tenant"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Search"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "Tenant",
                    "style": {
                      "margin-left": "5px"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "a",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "text-decoration": "none",
                  "border-radius": "6px",
                  "padding": "3px 10px"
                },
                "attributes": {
                  "href": "=@currentWeb+'/_layouts/15/search.aspx/siteall?q='+[$Query]",
                  "class": "ms-fontColor-themePrimary ms-bgColor-themeLighter--hover",
                  "target": "_blank",
                  "title": "Search This Site"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Search"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "This Site",
                    "style": {
                      "margin-left": "5px"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "span",
                "style": {
                  "padding": "5px",
                  "border-radius": "6px",
                  "cursor": "pointer"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Favorites": "=if(indexOf([$Favorites.email],@me)>-1,removeFrom([$Favorites.email],@me),appendTo([$Favorites.email],@me))"
                  }
                },
                "attributes": {
                  "iconName": "=if(indexOf([$Favorites.email],@me)>-1,'FavoriteStarFill','FavoriteStar')",
                  "class": "ms-fontColor-themePrimary ms-bgColor-themeLighter--hover",
                  "title": "=if(indexOf([$Favorites.email],@me)>-1,'Remove to My Favorites','Add to My Favorites')"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "span",
                "style": {
                  "padding": "5px",
                  "border-radius": "6px",
                  "cursor": "pointer"
                },
                "customRowAction": {
                  "action": "defaultClick"
                },
                "attributes": {
                  "iconName": "OpenPane",
                  "class": "ms-fontColor-themePrimary ms-bgColor-themeLighter--hover",
                  "title": "Open the List Form"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

This sample demonstrates displaying links to the search page. When you open the search page, it displays the search results where the query registered in the Query column of the item has been executed. Also, there are two types of links, each with a different search scope. One is for the entire tenant, and the other is for within the site.

You can also add search keywords on the search page to further refine your search results.

In addition, there is a favorite feature using the setValue action.

In addition to a view that shows all items, it is useful to create a view that displays only the items you have added to your favorites.

View requirements

Type	Internal Name	Required
Single line of text	Title	Yes
Single line of text	Query	Yes
Single line of text or Choice	Category	Yes
Single line of text	Icon	Yes
Multi-Select Person	Favorites

Set the icon name of Fluent UI Icons in the Icon column.
You need to use Gallery view grouped by Category column

Sample Data

You can view sample data (CSV file).
When using the Excel import and CSV import functions, the internal names of the columns are "field_" + "sequential number" like field_1, field_2. And these internal names of columns are not used in the sample JSON. Therefore, please note that the sample JSON cannot be used as it is when using the Excel import and CSV import functions.
As of August 15, 2023, the gallery view is not available when exporting from Excel to SharePoint. Please note this as well.
Related Link: Export an Excel table to SharePoint: gallery view layout not available · Issue #8811 · SharePoint/sp-dev-docs
If you want to import the sample data into your list, I recommend downloading the CSV file of the sample data, opening it in Excel, copying a range of all the data, and pasting it in using Edit Grid View.

Sample

Solution	Author(s)
search-page-link-tiles.json	Tetsuya Kawahara

Version history

Version	Date	Comments
1.0	August 15, 2023	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

This sample was inspired by Ai Hirano's post.
The following documents describe the managed property and the search query.
- Manage the search schema in SharePoint | Microsoft Learn
- Keyword Query Language (KQL) syntax reference | Microsoft Learn
SharePoint Search Query Tool allows you to see what values are set for which managed properties, which is very helpful when building a query.
Using PnP Modern Search, you can place search-related web parts on the page.

Get this format

How to use this sample

Summary

View requirements

Sample Data

Sample

Version history

Disclaimer

Additional notes

More formats like this

Key Dates Timeline Checklist

Sports Card

Credit / Loyalty Card