SharePoint Custom Column Formatting: Display Button on Row Hover

Question

Problem: When the formatting of the default column in a list/library is customised ([$Title]/[$FileLeafRef]), the menu and sharing buttons disappear.

Question: Is it possible to recreate these buttons with JSON formatting so that the buttons become visible only when hovering on the row (or when the item is selected), as per the OOB formatting?

Half of the solution to display the buttons when the item is selected:

"style": { "visibility": "=if( @isSelected == true, 'visible', 'hidden' )" }

Unfortunately, there is no @rowHover special value :-(

Is there a button or --hover class I can use to display the buttons on row hover? Or is there another JSON trick?

This would be great, to avoid the view looking cluttered with buttons that are always visible. An unsatisfactory work-around is to use feint font colours that become darker on button hover, but I'm hoping for something better.

Answer 1

Hi @DB365-3161 ,

According to my research and testing, unfortunately, there is currently no way to display the button when the row is hovered.

I can only use the following JSON code to display a button when select the item, and here is my test result:

{  
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
    "elmType": "div",  
    "children": [  
        {  
            "elmType": "span",  
            "style": {  
                "padding-right": "8px"  
            },  
            "txtContent": "[$Title]"  
        },  
        {  
             "elmType": "button",    
        "customRowAction": {            
      "action": "share"    
             },    
            "attributes": {        
                "title": "Share Item"  
             },    
            "style": {    
               "border": "none",    
               "background-color": "transparent",    
               "cursor": "pointer"    
             },   
             "children": [    
              {    
                 "elmType": "span",    
                 "attributes": {    
                    "iconName": "Share"  
                  },  
  "style": {   
 "display": "=if( @isSelected == true, 'flex', 'none' )"  
 }  
               }    
             ]    
        }  
    ]  
}  

I recommend you can create a feedback on this issue. Many features of our current products are designed and upgraded based on customers’ feedback. With requirements like this increase, the problem may well be released in the future.

feedback: https://feedbackportal.microsoft.com/feedback/

Thanks for your understanding and support.

---

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.

---

Answer 2

Hi, @Tong Zhang_MSFT .

Thanks for your answer. It is as I suspected.

Note an error in your proposed solution: display should be set to flex/block/etc. It probably works because the formatter is ignoring the invalid "dispaly" value.

"style": {
"display": "=if( @isSelected == true, 'flex', 'none' )"
}