Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use a different column as Name column (to click, share, and contextMenu) #593

Open
sparkitect opened this issue Sep 22, 2022 · 2 comments
Open

Use a different column as Name column (to click, share, and contextMenu) #593

sparkitect opened this issue Sep 22, 2022 · 2 comments
Labels
📋 Help Wanted Looking for community assistance

Comments

@sparkitect
Copy link
Contributor

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"
            }
        }
    ]
}
@sparkitect sparkitect added the 📋 Help Wanted Looking for community assistance label Sep 22, 2022
@jaxkookie
Copy link
Contributor

jaxkookie commented Oct 13, 2022 •
edited

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.
menu

{
  "$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"
    }
  }
}

@sparkitect
Copy link
Contributor Author

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 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
📋 Help Wanted Looking for community assistance
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jaxkookie @sparkitect