Forum Discussion

Sonnt-dna's avatar
Sonnt-dna
Copper Contributor
Jul 15, 2025

The issue of embedding window and notification display (customCardProps) in SharePoint JSON

Hi Everyone,

I am facing an issue while using JSON to format and create an embedding window along with a notification (customCardProps) in SharePoint. Specifically, I want the notification “Task assigned successfully” to appear on top of the embedding window when the user clicks the button.

However, despite applying CSS properties such as z-index, position: absolute, and other customizations, the notification is not displaying correctly and is not overlaying the embedding window as expected.

 

Here is the JSON code I am using:

"customCardProps": {
  "formatter": {
    "elmType": "div",
    "style": {
      "padding": "15px",
      "font-size": "14px",
      "background-color": "white",
      "border": "1px solid #ccc",
      "border-radius": "4px",
      "box-shadow": "0 2px 8px rgba(0,0,0,0.1)",
      "z-index": "10000",  
      "max-width": "300px",
      "position": "absolute",  
      "top": "20px",  
      "left": "50%",  
      "transform": "translateX(-50%)"
    },
    "children": [
      {
        "elmType": "div",
        "txtContent": "Task assigned successfully"
      }
    ]
  },
  "openOnEvent": "click",  
  "directionalHint": "rightCenter",
  "isBeakVisible": true
},
"customRowAction": {
  "action": "embed",
  "hideListHeader": true,
  "actionInput": {
    "src": {
      "operator": "+",
      "operands": [
        "https://abcn=",
        "[$ID]"
      ]
    },
    "width": "0",
    "height": "0",
    "directionalHint": "Center",
    "hideFrame": true,
    "theme": "dark",
    "style": {
      "border-radius": "50%",
      "overflow": "hidden",
      "width": "50px",
      "height": "50px",
      "display": "block",
      "margin": "auto",
      "z-index": "9999",  
      "position": "relative"  
    }
  }
}

 

I have tried changing the z-index and position properties but have not achieved the desired result. Does anyone in the community have experience or a solution to solve this issue?

 

Looking forward to your help.

 

Thank you very much!



1 Reply

  • VerivusFS's avatar
    VerivusFS
    Iron Contributor

    Check the compatibility between the SPFx version and the microsoft/sp-notification library. Update the JSON structure of custom card properties to ensure the field names and formats align with the current library version.

Resources