I have been following some tutorial videos by @DavideBarranca using the sp-dialog.
I can get it to close the dialog using his examples in the video when using Manifest 4 but not with Manifest 5.
Has something changed in Manifest 5 ?
I have been following some tutorial videos by @DavideBarranca using the sp-dialog.
I can get it to close the dialog using his examples in the video when using Manifest 4 but not with Manifest 5.
Has something changed in Manifest 5 ?
After further testing, I can get the SP-Dialog to work if it is not opened from a Flyout Menu
With Manifest 5, I can get the SP-Dialog to open from a Flyout Menu but pressing the Close button does nothing.
Using Manifest 4 works as expected.
This is the code in the Flyout Menu
invokeMenu(id) {
const {
menuItems
} = entrypoints.getPanel("vanilla");
switch (id) {
case "about":
// About();
document.querySelector("#dialog").setAttribute("open");
break;
}
This is my HTML code
<sp-dialog id="dialog">
<sp-body slot="description">
Welcome to my dialog
</sp-body>
<sp-button-group slot="buttongroup">
<sp-button variant="primary" onclick="document.querySelector('#dialog').removeAttribute('open')">
Close
</sp-button>
</sp-button-group>
</sp-dialog>
What if you open it with document.querySelector("#dialog").uxpShowModal()
?
And close with document.querySelector("#dialog").close()
I am unable to show the Dialog using the above. Do I need to declare something to use uxpShowModal()
Thinking it may be my Manifest, I put my code into the Kitchen Sink and it still doesn’t work.
Maybe @kerrishotts can throw some light on this one.
From a Flyout Menu:
Programmatically Dialog Works
SP-Dialog Opens but doesn’t close
Not that I’m aware of
Actually I’m using plain dialog
instead of sp-dialog
, but would need to test it for sure on manifest v5 later
Manifest V5 explicitly disallows executing code as strings by default – this includes inline event handlers. (You can enable this, but it’s intended only for debugging files with source maps.)
You should add an event handler explicilty using addEventListener
or onclick
in your JS code.
(That v4 allowed this in Ps was technically an accident, but we can’t go disable it in v4 w/o breaking plugins that took advantage of it. But the intent is that code should not be executed from “strings” and v5 makes that the default state.)
So, for this case:
document.querySelector("#dialog sp-button[variant=primary]").onclick=
() => document.querySelector('#dialog').removeAttribute('open');
// OR
document.querySelector("#dialog sp-button[variant=primary]").addEventListener("click",
() => document.querySelector('#dialog').removeAttribute('open'));
And then the click will work.
(I’m just now realizing that our blog post on the changes in Ps w/ manifest v5 doesn’t include this little nugget. Thought we’d covered everything, but apparently not! I guess a new blog post & doc update is in order…)
Thanks @kerrishotts both ways tested and working now
Are there any other nuggets we should be aware about before using Manifest V5.