If you need to add custom buttons as below to open SharePoint Online forms from list items (with the same behaviour as if you opened them using the out-of-the-box options), you can add them easily by using list formatting JSON, as below:

The main point here is to add a customRowAction element to a JSON template. This row action will allow you to call several list item out-of-the-box actions from the custom button/HTML element. For the edit button (launches a list form in edit mode) you can use the ‘edit action, and for the view one (launches a list form in display only mode) you can use the defaultClick action.
To use those buttons you need simply to add a ‘dummy’ column to your SharePoint list/view to work as a placeholder for the buttons (I normally use a calculated column so it never appear in forms), and then you can reuse the below as JSON template for the columns, for each button:
Edit
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "editProps"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Edit"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "Edit"
}
]
}
View
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "View"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "View"
}
]
}
When clicking the buttons, the list view form will be opened:

Hope the templates are helpful!
[…] Source link […]