Convert a single line of text column to hyperlink using SharePoint and Microsoft Lists column formatting

Column formatting is a neat feature that allows you to transform the data displayed in a column using a combination of HTML and JSON, making the data look a lot nicer.

By default, lists allow to change the column type, but unfortunately this is not available to all column types and hyperlinks are not supported. Thankfully we now have column formatting and in this article, I will show you how you can easily convert a link stored in plain text into an hyperlink.

single line of text formatting

The idea behind this formatting example happened after creating a new list from an Excel file. The Excel list has a column with clickable links to YouTube videos, however while importing it there is no available option to define the column as a hyperlink.

single line of text formatting

Once imported this is how the list looked like, with all the links created as plain text and not clickable making it difficult to use.

single line of text formatting

If you are facing a similar issue with existing lists or with lists created from Excel files here is a generic solution that will make your links clickable.

  1. Click the arrow next to the Video Link
  2. Form the menu go to Column Settings and then click on Format this column
    single line of text formatting
  3. At the bottom of the formatting pane click in the Advanced mode
  4. Paste the following generic code in the editor
    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "a",
      "attributes": {
        "href": "@currentField",
        "target": "_blank"
      },
      "txtContent": "@currentField"
    }
    

    single line of text formatting

  5. Click Save, this way all your links will become clickable and you will be able to open your links in a new tab.

If you want to replicate the real behavior of SharePoint and Microsoft Lists hyperlink columns where you have the possibility to define a link and a text to be displayed use this code instead, where the text displayed in the link is the value stored in the Title column.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "@currentField",
    "target": "_blank"
  },
  "txtContent": "[$Title]"
}

single line of text formatting


2 Responses to “Convert a single line of text column to hyperlink using SharePoint and Microsoft Lists column formatting”

  1. Peter Heidemann

    February 10, 2021

    Dear João Ferreira,
    I appreciate your blogs and use your very valuable tips. I have a question about the authorization of a column in Lists. it is possible that, for example, a teacher assesses a column and that the student cannot adjust that assessment. The list is a sort of grade center where documents are placed by the student and assessed by a teacher without the student being able to change it.
    Thanks in advance for your answer.
    Greeting
    Peter Heidemann
    The Netherlands

    Reply
    • João Ferreira

      February 10, 2021

      Hi Peter,

      Its not possible to apply permissions to individual columns in the list, for your scenario I see 2 different approached:

      1 – Use a list for the grades and set the permissions for the students to read only – This list can include lookup fields to the main library or a link to the original file in the library
      2 – Once all the document are submitted by the students change the permissions of the members to read only, this way they will be able to see the documents and the grades but not change them.

      Hope this helps, have a nice day 🙂

      Reply

Leave a Reply


I've been working with Microsoft Technologies over the last ten years, mainly focused on creating collaboration and productivity solutions that drive the adoption of Microsoft Modern Workplace.