List-Formatting
List-Formatting copied to clipboard
pnp
Use a different column as Name column (to click, share, and contextMenu)
What Kind of Sample (view or column format)
column format
Sample Description (what should it do)
In a document library, make a different column act similar to the Name column, with click to open, with "Share" and "More" (context menu) icons.
Are you Willing to Help?
Yes, see below.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "button",
"txtContent": "=if(length(@currentField) == 0, [$FileLeafRef], @currentField)",
"customRowAction": {
"action": "defaultClick"
},
"attributes": {
"class": "ms-Link"
},
"style": {
"margin-right": "30px",
"border": "none",
"background-color": "transparent",
"text-align": "left",
"overflow": "hidden",
"text-overflow": "ellipsis",
"display": "inline-block",
"max-width": "100%",
"white-space": "pre"
}
},
{
"elmType": "span",
"style": {
"display": "inline-block",
"position": "absolute",
"right": "28px",
"font-size": "16px",
"cursor": "pointer"
},
"attributes": {
"iconName": "Share",
"title": "Share",
"class": "ms-fontColor-neutralLight ms-fontColor-neutralPrimary--hover"
},
"customRowAction": {
"action": "share"
}
},
{
"elmType": "span",
"style": {
"display": "inline-block",
"position": "absolute",
"right": "0",
"font-size": "16px",
"cursor": "pointer"
},
"attributes": {
"iconName": "MoreVertical",
"title": "More",
"class": "ms-fontColor-neutralLight ms-fontColor-neutralPrimary--hover"
},
"customRowAction": {
"action": "openContextMenu"
}
}
]
}
what kind of help are you looking for? I was able to make a new menu and load the popular items as displayed in the image. I was able to duplicate the vertical ellipse and make it a click event to display. I did not like the hover event, so I changed it to click.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"font-size": "10pt",
"color": "#2c2a29"
},
"attributes": {
"title": "Click to Show Actions"
},
"children": [
{
"elmType": "div"
},
{
"elmType": "span",
"style": {
"white-space": "nowrap",
"overflow": "hidden",
"text-overflow": "ellipsis",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none"
},
"txtContent": "@currentField"
},
{
"elmType": "span",
"style": {
"font-size": "16pt",
"display": "flex",
"height": "100%",
"flex-wrap": "nowrap",
"margin-left": "auto",
"position": "relative",
"z-index": "-1"
},
"attributes": {
"iconName": "MoreVertical",
"class": "ms-bgColor-gray50--hover"
}
}
],
"customCardProps": {
"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": "a",
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none",
"color": "#2c2a29"
},
"attributes": {
"target": "_blank",
"data-interception": "off",
"href": "='https://tenant.sharepoint.com/sites/DOME/wfsvc/b84e5e4d722b4e12a1cb11002ff3b12f/WFInitForm.aspx?List=' + '%7B' + 'fbe1b1c1-b4ac-435a-a5e6-59ece8e09cc3' + '%7D' + '&ID=' + [$ID] + '&WF4=1&TemplateID=' + '%7B' + 'F51A1842-6B05-4C9B-AA32-B53A79E099A4' + '%7D' +'&WF4=1'",
"title": "Process Document Workflow"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "5px 5px 5px 5px",
"margin": "5px 5px 5px 5px"
},
"attributes": {
"class": "ms-bgColor-success--hover ms-fontColor-black--hover"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "5px",
"color": "#84BD00"
},
"attributes": {
"iconName": "ProcessingRun"
}
},
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "9px",
"color": "#2c2a29"
},
"txtContent": "Process Document"
}
]
}
]
},
{
"elmType": "a",
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none",
"color": "#2c2a29"
},
"attributes": {
"target": "_blank",
"data-interception": "off",
"title": "Archive Document Workflow",
"href": "='https://tenant.sharepoint.com/sites/DOME/wfsvc/c432fedf299a4adb96a9edef0eb123eb/WFInitForm.aspx?List=' + '%7B' + 'fbe1b1c1-b4ac-435a-a5e6-59ece8e09cc3' + '%7D' + '&ID=' + [$ID] + '&WF4=1&TemplateID=' + '%7B' + 'C95A2C72-70EA-43E5-9CAD-1CB7315BEB6D' + '%7D' +'&WF4=1'"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "5px 5px 5px 5px",
"margin": "5px 5px 5px 5px"
},
"attributes": {
"class": "ms-bgColor-success--hover ms-fontColor-black--hover"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "5px",
"color": "#84BD00"
},
"attributes": {
"iconName": "Archive"
}
},
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "9px",
"color": "#2c2a29"
},
"txtContent": "Archive Document"
}
]
}
]
},
{
"elmType": "a",
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none",
"color": "#2c2a29"
},
"attributes": {
"target": "_blank",
"data-interception": "off",
"title": "Terminate Workflows",
"href": "='https://tenant.sharepoint.com/sites/DOME/wfsvc/8871bc6c1da0490092b68688edeb5f13/WFInitForm.aspx?List=' + '%7B' + 'fbe1b1c1-b4ac-435a-a5e6-59ece8e09cc3' + '%7D' + '&ID=' + [$ID] + '&WF4=1&TemplateID=' + '%7B' + '743931E1-66EF-4C4A-B716-D14A63F90BEF' + '%7D' +'&WF4=1'"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "5px 5px 5px 5px",
"margin": "5px 5px 5px 5px",
"border-bottom": "1px solid #c0c0c0"
},
"attributes": {
"class": "ms-bgColor-success--hover ms-fontColor-black--hover"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "5px",
"color": "#84BD00"
},
"attributes": {
"iconName": "ProcessingCancel"
}
},
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "9px",
"color": "#2c2a29"
},
"txtContent": "Terminate Workflows"
}
]
}
]
},
{
"elmType": "a",
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none"
},
"attributes": {
"target": "_blank",
"data-interception": "off",
"href": "='https://tenant.sharepoint.com/:x:/r/sites/DOME/_layouts/15/Doc.aspx?sourcedoc='+[$UniqueId]+'&file='+@currentField+'&action=default&mobileredirect=true'",
"title": "Open in app"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "5px 5px 5px 5px",
"margin": "5px 5px 5px 5px"
},
"attributes": {
"class": "ms-bgColor-success--hover ms-fontColor-black--hover"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "5px",
"color": "#2c2a29"
},
"attributes": {
"iconName": "OpenFile"
}
},
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "9px",
"color": "#2c2a29"
},
"attributes": {
"class": "ms-ContextualMenu-itemText"
},
"txtContent": "Open"
}
]
}
]
},
{
"elmType": "a",
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none"
},
"attributes": {
"target": "_blank",
"data-interception": "off",
"href": "='https://tenant.sharepoint.com/:x:/r/sites/DOME/_layouts/15/Doc.aspx?sourcedoc='+[$UniqueId]+'&file='+@currentField+'&action=view&mobileredirect=true'",
"title": "View Only"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "5px 5px 5px 5px",
"margin": "5px 5px 5px 5px"
},
"attributes": {
"class": "ms-bgColor-success--hover ms-fontColor-black--hover"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "5px",
"color": "#2c2a29"
},
"attributes": {
"iconName": "ReviewResponseSolid"
}
},
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "9px",
"color": "#2c2a29"
},
"attributes": {
"class": "ms-ContextualMenu-itemText"
},
"txtContent": "Review"
}
]
}
]
},
{
"elmType": "a",
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none",
"color": "#2c2a29"
},
"attributes": {
"target": "_blank",
"data-interception": "off",
"href": "[$FileRef]",
"title": "Edit item"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "5px 5px 5px 5px",
"margin": "5px 5px 5px 5px"
},
"attributes": {
"class": "ms-bgColor-success--hover ms-fontColor-black--hover"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "5px",
"color": "#2c2a29"
},
"attributes": {
"iconName": "Edit"
}
},
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "9px",
"color": "#2c2a29"
},
"txtContent": "Edit"
}
]
}
]
},
{
"elmType": "a",
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none"
},
"attributes": {
"target": "_blank",
"data-interception": "off",
"href": "='https://tenant.sharepoint.com/sites/DOME/Draft_Documents_EN/Forms/EditForm.aspx?ID='+[$ID]",
"title": "Properties"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "5px 5px 5px 5px",
"margin": "5px 5px 5px 5px"
},
"attributes": {
"class": "ms-bgColor-success--hover ms-fontColor-black--hover"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "5px",
"color": "#2c2a29"
},
"attributes": {
"iconName": "OfficeFormsLogo"
}
},
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "9px",
"color": "#2c2a29"
},
"attributes": {
"class": "ms-ContextualMenu-itemText"
},
"txtContent": "Edit Properties"
}
]
}
]
},
{
"elmType": "a",
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none",
"color": "#2c2a29"
},
"attributes": {
"data-interception": "off",
"title": "Delete item"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "5px 5px 5px 5px",
"margin": "5px 5px 5px 5px"
},
"attributes": {
"class": "ms-bgColor-success--hover ms-fontColor-black--hover"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "5px",
"color": "#2c2a29"
},
"attributes": {
"iconName": "trash"
}
},
{
"elmType": "span",
"txtContent": "Delete",
"style": {
"font-weight": "600",
"padding-left": "9px",
"color": "#2c2a29"
},
"customRowAction": {
"action": "delete"
}
}
]
}
]
},
{
"elmType": "a",
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none",
"color": "#2c2a29"
},
"attributes": {
"target": "_blank",
"data-interception": "off",
"href": "=@currentWeb + '/_layouts/15/versions.aspx?List=' + '%7B' + 'fbe1b1c1-b4ac-435a-a5e6-59ece8e09cc3' + '%7D' + '&ID=' + [$ID]",
"title": "Version history"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "5px 5px 5px 5px",
"margin": "5px 5px 5px 5px",
"border-bottom": "1px solid #c0c0c0"
},
"attributes": {
"class": "ms-bgColor-success--hover ms-fontColor-black--hover"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "5px",
"color": "#2c2a29"
},
"attributes": {
"iconName": "History"
}
},
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "9px",
"color": "#2c2a29"
},
"txtContent": "Version history"
}
]
}
]
},
{
"elmType": "a",
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none",
"color": "#2c2a29"
},
"attributes": {
"target": "_blank",
"data-interception": "off",
"href": "=@currentWeb + '/_layouts/15/SubNew.aspx?List=' + '%7B' + 'fbe1b1c1-b4ac-435a-a5e6-59ece8e09cc3' + '%7D' + '&ID=' + [$ID]",
"title": "Alerts"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "5px 5px 5px 5px",
"margin": "5px 5px 5px 5px"
},
"attributes": {
"class": "ms-bgColor-success--hover ms-fontColor-black--hover"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "5px",
"color": "#2c2a29"
},
"attributes": {
"iconName": "AlarmClock"
}
},
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "9px",
"color": "#2c2a29"
},
"txtContent": "Alerts"
}
]
}
]
},
{
"elmType": "a",
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none",
"color": "#2c2a29"
},
"attributes": {
"target": "_blank",
"data-interception": "off",
"href": "=@currentWeb + '/_layouts/15/workflow.aspx?List=' + '%7B' + 'fbe1b1c1-b4ac-435a-a5e6-59ece8e09cc3' + '%7D' + '&ID=' + [$ID]",
"title": "Workflows"
},
"children": [
{
"elmType": "div",
"style": {
"padding": "5px 5px 5px 5px",
"margin": "5px 5px 5px 5px"
},
"attributes": {
"class": "ms-bgColor-success--hover ms-fontColor-black--hover"
},
"children": [
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "5px",
"color": "#2c2a29"
},
"attributes": {
"iconName": "Workflow"
}
},
{
"elmType": "span",
"style": {
"font-weight": "600",
"padding-left": "9px",
"color": "#2c2a29"
},
"txtContent": "Workflows"
}
]
}
]
},
{
"elmType": "div",
"style": {
"font-size": "10px",
"font-weight": "600",
"text-align": "center",
"margin": "0px",
"padding": "0px"
},
"txtContent": ""
}
]
}
]
}
]
},
"openOnEvent": "click",
"directionalHint": "rightCenter",
"isBeakVisible": true,
"beakStyle": {
"backgroundColor": "#002855"
}
}
}
wasn't really looking for help; given that the submitting a sample page says 'coming soon' I chose to suggest a sample instead.
Your solution to build a whole new context menu (rather than using the built-in one) is interesting 👍