How to add custom URL to Modern SharePoint List

 

In this article, I will show you how to add a custom link to SharePoint Modern List thanks to the new SharePoint List View Formatting.  Earlier If we want to do this kind of task we need to add JSLink JavaScript.

So following code will show you how to do it

{

   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",

   "elmType": "a",

   "txtContent": "@currentField.desc",

   "attributes": {

      "href": "@currentField",

      "target": "_blank"

   }

}

If you are gone through the code snippet it is adding "a href "HTML tag to SharePoint List. It represents the above JSON to HTML it will look like as follows

<a href='@currentField' target='_blank'>@currentField.desc</a>

in elmType it will define the tag to which we are asked to add an element to the list view. Then the txtContent text is the Link text that shows to you. @currentField.desc is return the value of the field. finally, in the attributes section, it defines the <a> tag attributes. In this scenario, it adds the href and target attributes.

In this post, I have explaining how to add current list item link to the modern SharePoint list view if you need to add a static URL need to replace textContent and href in the attribute section.