How to make a button/hyperlink change appearance and become inactive once it has been clicked?

Question

Hello,

I was watching a video from the Microsoft Sharepoint Conference 2019 (How to Start Using the Full Power of SharePoint Lists - SPC19), linked here: https://youtu.be/3pTMXx_ZFgY .

At minute 43, the presenter shows a "customer contact" column which he has formatted to include a button that sends an email, and then once clicked changes from an "active" state of a blue button to an "inactive" state of green text ("Follow up complete").

I'm new to Sharepoint and I can't find the code to make this happen anywhere. I would love to include this functionality in my project if I can.

Can you help me or point me in the right direction write the JSON? Thanks!

Answer 1

Hi @Caoimhe Fitzgerald
You could format the column (test) with this code:

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
  "elmType": "div",  
  "children": [  
    {  
      "elmType": "button",  
      "customRowAction": {  
        "action": "executeFlow",  
        "actionParams": "{\"id\": \"001a3379-8796-4c5c-bcd6-7b77fb0b7ccd\"}"  
      },  
      "attributes": {  
        "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"  
      },  
      "txtContent": "Start the Automate",  
      "style": {  
        "display": "=if([$name]=='sent','none','inherit')"  
      }  
    },  
    {  
      "elmType": "span",  
      "style": {  
        "padding-right": "8px",  
        "display": "=if([$name]=='sent','inherit','none')"  
      },  
      "txtContent": "@currentField"  
    }  
  ]  
}  

This format need to combine with a flow:

Here you also need to change the flow ID in the code "actionParams": "{\"id\": \"001a3379-8796-4c5c-bcd6-7b77fb0b7ccd\"}" according to your flow, you could find your flow ID here:

As a result, you will see a button "Start the Automate" in column "test", then it will send a mail automatically, and the value in column "result" will turn to "sent", and the button "Start the Automate" will turn to "finish":

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.