Blog about anything related to my learnings
  • About
  • posts
bluesky
Blog about anything related to my learnings
POSTS

Column formatting allows you to have inbuilt buttons within sharePoint columns

Assumes URL_Folder contains a usable URL string (or hyperlink field that resolves as a string). If your column is a Hyperlink type and the link doesn’t open, see the “Hyperlink column note” section below.

Great — starting from your exact button formatter, the simplest way to show “Folder exists” when URL_Folder is populated is to wrap everything in a parent div and conditionally show either:

the button (when URL_Folder is empty), or a green “Folder exists” pill (when URL_Folder is not empty)

Below is a ready-to-paste formatter that keeps your current styling and adds the second state.

Column Formatting

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "align-items": "center"
  },
  "children": [
    {
      "elmType": "button",
      "customRowAction": {
        "action": "executeFlow",
        "actionParams": "{\"id\":\"v1/1e1eb60d-cbe5-4899-9f3e-4bc8c5906ed7/72003966-3250-400b-8f86-bdb2ca7d018e\", \"headerText\":\"Create Staff folder \",\"runFlowButtonText\":\"Create Staff Folder\"}"
      },
      "attributes": {
        "title": "Create Staff Folder",
        "aria-label": "Create Staff Folder"
      },
      "style": {
        "display": "=if([$URL_Folder]!='','none','flex')",
        "align-items": "center",
        "gap": "8px",
        "padding": "8px 12px",
        "border": "1px solid rgba(0,0,0,0.1)",
        "border-radius": "999px",
        "background-color": "#0078d4",
        "color": "#ffffff",
        "font-weight": "600",
        "cursor": "pointer",
        "box-shadow": "0 1px 2px rgba(0,0,0,0.12)",
        "outline": "none",
        "transition": "all 0.15s ease"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "FolderOpen"
          },
          "style": {
            "font-size": "16px",
            "line-height": "16px"
          }
        },
        {
          "elmType": "span",
          "txtContent": "Create Folder",
          "style": {
            "white-space": "nowrap"
          }
        }
      ],
      "hoverStyle": {
        "background-color": "#106ebe",
        "border": "1px solid rgba(0,0,0,0.15)",
        "box-shadow": "0 2px 6px rgba(0,0,0,0.18)"
      }
    },
    {
      "elmType": "a",
      "attributes": {
        "href": "[$URL_Folder]",
        "target": "_blank",
        "title": "Open Folder"
      },
      "style": {
        "display": "=if([$URL_Folder]=='','none','inline-flex')",
        "align-items": "center",
        "gap": "8px",
        "padding": "8px 12px",
        "border": "1px solid rgba(16, 124, 16, 0.25)",
        "border-radius": "999px",
        "background-color": "rgba(16, 124, 16, 0.08)",
        "color": "#107c10",
        "font-weight": "600",
        "text-decoration": "none",
        "white-space": "nowrap",
        "cursor": "pointer"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "OpenInNewWindow"
          },
          "style": {
            "font-size": "16px",
            "line-height": "16px"
          }
        },
        {
          "elmType": "span",
          "txtContent": "Open Folder"
        }
      ],
      "hoverStyle": {
        "background-color": "rgba(16, 124, 16, 0.14)",
        "border": "1px solid rgba(16, 124, 16, 0.35)"
      }
    }
  ]
}
    © Blog about anything related to my learnings 2026
    bluesky