Context Menu | List Formatting Gallery

Context Menu

Shared by Larry Pfaff, Watana
Updated Feb 17, 2025

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "flex", "justify-content": "space-between" }, "children": [ { "elmType": "div", "txtContent": "@currentField", "style": { "font-size": "11pt", "white-space": "nowrap", "overflow": "hidden", "text-overflow": "ellipsis" } }, { "elmType": "div", "attributes": { "iconName": "moreVertical", "class": "ms-fontColor-red--hover ms-font-l" }, "style": { "cursor": "pointer", "padding": "2px" }, "customCardProps": { "directionalHint": "rightCenter", "openOnEvent": "click", "isBeakVisible": true, "beakStyle": { "backgroundColor": "lightGray" }, "formatter": { "elmType": "div", "children": [ { "elmType": "div", "attributes": { "class": "ms-borderColor-ThemeLight" }, "style": { "border": "1px solid darkblue" }, "children": [ { "elmType": "div", "children": [ { "elmType": "div", "children": [ { "elmType": "div", "txtContent": "='ID '+[$ID]", "attributes": { "class": "ms-bgColor-themePrimary ms-fontColor-themeLighter" }, "style": { "font-weight": "600", "text-align": "center", "padding-bottom": "3px", "margin-bottom": "5px", "border-bottom": "1px solid darkblue" } } ] }, { "elmType": "div", "attributes": { "class": "ms-bgColor-themeLighter--hover ms-fontColor-black--hover" }, "style": { "margin": "5px", "padding": "5px", "cursor": "pointer" }, "customRowAction": { "action": "defaultClick" }, "children": [ { "elmType": "span", "attributes": { "iconName": "OpenInNewWindow" }, "style": { "margin-left": "5px", "font-weight": "600" } }, { "elmType": "span", "txtContent": "Open", "style": { "margin-left": "9px", "font-weight": "600" } } ] }, { "elmType": "div", "attributes": { "class": "ms-bgColor-themeLighter--hover ms-fontColor-black--hover" }, "style": { "margin": "5px", "padding": "5px", "cursor": "pointer" }, "customRowAction": { "action": "editProps" }, "children": [ { "elmType": "span", "attributes": { "iconName": "Edit" }, "style": { "margin-left": "5px", "font-weight": "600" } }, { "elmType": "span", "txtContent": "Edit", "style": { "margin-left": "9px", "font-weight": "600" } } ] }, { "elmType": "div", "attributes": { "class": "ms-bgColor-themeLighter--hover ms-fontColor-black--hover" }, "style": { "margin": "5px", "padding": "5px", "cursor": "pointer" }, "customRowAction": { "action": "delete" }, "children": [ { "elmType": "span", "attributes": { "iconName": "Delete" }, "style": { "margin-left": "5px", "font-weight": "600" } }, { "elmType": "span", "txtContent": "Delete", "style": { "margin-left": "9px", "font-weight": "600" } } ] } ] } ] } ] } } } ] }

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "color": "#2c2a29" }, "children": [ { "elmType": "span", "style": { "font-size": "10pt", "width": "95%", "cursor": "pointer", "display": "inline-block" }, "txtContent": "@currentField", "attributes": { "class": "ms-Link", "title": "@currentField" }, "customRowAction": { "action": "defaultClick" } }, { "elmType": "span", "style": { "font-size": "16pt", "cursor": "pointer", "padding": "2px" }, "attributes": { "iconName": "MoreVertical", "class": "ms-bgColor-gray50--hover", "title": "Click to Show Actions" }, "customCardProps": { "openOnEvent": "click", "directionalHint": "rightCenter", "isBeakVisible": true, "beakStyle": { "backgroundColor": "#002855" }, "formatter": { "elmType": "div", "children": [ { "elmType": "div", "style": { "border": "1px solid #002855" }, "children": [ { "elmType": "div", "children": [ { "elmType": "div", "children": [ { "elmType": "div", "style": { "font-size": "12pt", "color": "#ffffff", "font-weight": "600", "text-align": "center", "padding-bottom": "5px", "margin-bottom": "5px", "border-bottom": "1px solid #002855", "background-color": "#002855" }, "txtContent": "Item Menu" } ] }, { "elmType": "div", "style": { "margin": "5px", "padding": "5px", "color": "#2c2a29", "cursor": "pointer", "display": "flex", "align-items": "center" }, "attributes": { "class": "ms-bgColor-success--hover ms-fontColor-black--hover" }, "customRowAction": { "action": "defaultClick" }, "children": [ { "elmType": "span", "style": { "margin-left": "5px", "font-weight": "600" }, "attributes": { "iconName": "OpenFile", "title": "='Item ID: ' + [$ID]" } }, { "elmType": "span", "style": { "margin-left": "9px", "font-weight": "600" }, "attributes": { "title": "='Item ID: ' + [$ID]" }, "txtContent": "Open" } ] }, { "elmType": "div", "style": { "margin": "5px", "padding": "5px", "color": "#2c2a29", "cursor": "pointer", "display": "flex", "align-items": "center" }, "attributes": { "class": "ms-bgColor-success--hover ms-fontColor-black--hover" }, "customRowAction": { "action": "editProps" }, "children": [ { "elmType": "span", "style": { "margin-left": "5px", "font-weight": "600" }, "attributes": { "iconName": "Edit", "title": "='Item ID: ' + [$ID]" } }, { "elmType": "span", "style": { "margin-left": "9px", "font-weight": "600" }, "attributes": { "title": "='Item ID: ' + [$ID]" }, "txtContent": "Edit" } ] }, { "elmType": "div", "style": { "border-bottom": "1px solid #c0c0c0", "margin": "0px 5px" } }, { "elmType": "a", "style": { "margin": "5px", "padding": "5px", "color": "#2c2a29", "cursor": "pointer", "display": "flex", "align-items": "center", "text-decoration": "none" }, "attributes": { "target": "_blank", "data-interception": "off", "href": "=@currentWeb + '/_layouts/15/versions.aspx?List=' + '%7B' + '__LIST ID__' + '%7D' + '&ID=' + [$ID]", "title": "Version history", "class": "ms-bgColor-success--hover ms-fontColor-black--hover" }, "children": [ { "elmType": "span", "style": { "margin-left": "5px", "font-weight": "600" }, "attributes": { "iconName": "History" } }, { "elmType": "span", "style": { "margin-left": "9px", "font-weight": "600" }, "txtContent": "Version history" } ] }, { "elmType": "div", "style": { "border-bottom": "1px solid #c0c0c0", "margin": "0px 5px" } }, { "elmType": "a", "style": { "margin": "5px", "padding": "5px", "color": "#2c2a29", "cursor": "pointer", "display": "flex", "align-items": "center", "text-decoration": "none" }, "attributes": { "target": "_blank", "data-interception": "off", "href": "=@currentWeb + '/_layouts/15/SubNew.aspx?List=' + '%7B' + '__LIST ID__' + '%7D' + '&ID=' + [$ID]", "title": "Alerts", "class": "ms-bgColor-success--hover ms-fontColor-black--hover" }, "children": [ { "elmType": "span", "style": { "margin-left": "5px", "font-weight": "600" }, "attributes": { "iconName": "AlarmClock" } }, { "elmType": "span", "style": { "margin-left": "9px", "font-weight": "600" }, "txtContent": "Alerts" } ] }, { "elmType": "div", "style": { "margin": "5px", "padding": "5px", "color": "#2c2a29", "cursor": "pointer", "display": "flex", "align-items": "center" }, "attributes": { "class": "ms-bgColor-success--hover ms-fontColor-black--hover" }, "customRowAction": { "action": "executeFlow", "actionParams": "{\"id\": \"__FLOW ID__\"}" }, "children": [ { "elmType": "span", "style": { "margin-left": "5px", "font-weight": "600" }, "attributes": { "iconName": "Flow" } }, { "elmType": "span", "style": { "margin-left": "9px", "font-weight": "600" }, "txtContent": "Flow Name" } ] }, { "elmType": "div", "style": { "border-bottom": "1px solid #c0c0c0", "margin": "0px 5px" } }, { "elmType": "a", "style": { "margin": "5px", "padding": "5px", "color": "#2c2a29", "cursor": "pointer", "display": "flex", "align-items": "center", "text-decoration": "none" }, "attributes": { "target": "_blank", "data-interception": "off", "href": "=substring([$FileRef],0,lastIndexOf([$FileRef],'/'))", "title": "Default View", "class": "ms-bgColor-success--hover ms-fontColor-black--hover" }, "children": [ { "elmType": "span", "style": { "margin-left": "5px", "font-weight": "600" }, "attributes": { "iconName": "PageList" } }, { "elmType": "span", "style": { "margin-left": "9px", "font-weight": "600" }, "txtContent": "View" } ] } ] } ] } ] } } } ] }

From the contributor

How to use this sample

Summary

The sample is a simple version of the current context menu. It allows you to customize the menu options and link to the most user of visited links. You can add links to Flows, web pages, or other items specific the the item it is on. It can be added to any customizable field, but adding it to the Title field helps eliminate confusion.

Setting Up for Sample Usage

To use this sample, you need to modify __LIST ID__ and __FLOW ID__ in generic-context-menu.json according to your environment. __LIST ID__" is specified on lines 178 and 224, and __FLOW ID__ is specified on line 264.

For __LIST ID__, set the value between %7B and %7D after List= in the URL of the list settings screen.
For __FLOW ID__, get the flow identifier from the flow screen you want to execute and set that. (Reference: Advanced formatting concepts - Create a button to launch a Flow)

View requirements

This format can be applied to any column type.

Sample

Solution	Author(s)
generic-context-menu.json	Larry Pfaff
generic-context-menu-minimal.json	Watana

Version history

Version	Date	Comments
1.0	April 2, 2024	Initial release
1.1	February 17, 2025	Added generic-context-menu-minimal.json

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.

Get this format

How to use this sample

Summary

Setting Up for Sample Usage

View requirements

Sample

Version history

Disclaimer

More formats like this

Missing Information Callout

Publishing Status

File Preview Callout with the embed Action