Forum Discussion
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!