1

I have a list with with a hyperlink column that contains a hyperlink to a folder associated with the list item. I created a Power Automate Flow that used the SharePoint connecter, "Send HTTP request" to create the folder and the hyperlink to the folder when the item is created. I'd like to use an image or icon instead of a text value for the hyperlink.

Right now I'm using a Unicode folder icon, but I'd rather use a .png. I'm supposing I might be able to use an image column, but I'm not sure how to accomplish it with the HTTP request or with Power Automate. I have a picture library called pic_lib, with a folder icon called folder.png.

I'd like to use the folder.png as the link to the folder that the hyperlink points to.

Below is the "Send HTTP request" I'm using. Can anyone tell me how to alter it to achieve what I want to do?

enter image description here

0

I don't think you can add image as a "description" of hyperlink column. You can either add the "Hyperlink with description text" or "Picture with description text" in "Hyperlink or Picture" column type.

Workaround:

As a workaround to show the folder icon in SharePoint online list view, you can use Column formatting.

  1. Set the (dummy) description text in hyperlink column using Power Automate (Say "Go to Folder").
  2. Then use below one of the JSON codes to format your hyperlink column:

Using Picture:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "=@currentField",
    "target": "_blank",
    "title": "=@currentField.desc"
  },
  "style": {
    "text-decoration": "none",
    "padding-left": "10px"
  },
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "=@currentWeb + '/Shared Documents/folder.png'"
      }
    }
  ]
}

You can pass the URL of picture in src attribute in above JSON.

Output:

enter image description here

Using Fluent UI Icon:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "iconName": "OpenFolderHorizontal",
    "class": "ms-fontColor-themeDark",
    "href": "=@currentField",
    "target": "_blank"
  },
  "style": {
    "font-size": "18px",
    "text-decoration": "none",
    "padding-left": "15px",
    "font-weight": "bold"
  }
}

This is a basic JSON code to achieve what you want, you can apply additional styling to make it look better.

Output:

enter image description here

Note: You can find other predefined icons at Fluent UI website

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.