Adding Edit/Delete buttons to SP view using “View Formatting”

ViewFormatting

Today in SPDev weekly, @theChrisKent  gave a demo on view formatting, which describes how you can trigger a flow from a list column using view formatting. The details can be found here on his Blog 

I thought we can use similar functionality to add “Edit” and “Delete” buttons in the list using view formatting. I tried my hands on the same and here is how it looks like.

listFormatting

I recall we had to build a similar form to one of my client and had to customize the whole page and used UI grid with buttons and lot of custom code to create separate buttons and then link them using edit form and call rest api’s to delete the items. But with View formatting it’s pretty easy.

You need to follow similar steps mentioned in Chris’s blog and use below JSON object in the column formatting. It’s that simple.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "span",
   "style": {
        "min-width": "250px"
      },
   "children": [
   {
      "elmType": "button",
      "txtContent": "Edit",
      "style": {
        "border": "none",
		"background-color": "#ca5010",  
        "border-color":"#ca5010",
        "height":"32px",          
		"color": "#ffffff",    
		"cursor": "pointer",
        "min-width": "80px"
      },
       "customRowAction": {
        "action": "editProps"
        }
    },
     {
      "elmType": "span",
      "attributes": {
        "iconName": "Separator"
      },
      "style":{
          "height":"12px"
      }
    },
    {
      "elmType": "button",
      "txtContent": "Delete",
      "style": {
        "border": "none",
		"background-color": "#ca5010",  
        "border-color":"#ca5010", 
        "height":"32px",     
		"color": "#ffffff",    
		"cursor": "pointer",
        "min-width": "80px"
      },
       "customRowAction": {
        "action": "delete"
        }
    }
  ]
}

You can imagine the power of JSON schema which you can use to do wonder’s in modern SharePoint.

Thanks to SharePoint community for doing great work.

As they say Sharing is Caring.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.