Open modal dialog using javascript stripped from code
-
15-01-2021 - |
Pregunta
Sorry for the Newbie question, but I don't see a relevant answer in searching.
I have a SP Online site with a sub-site for Human Resources (HR). I created a custom list for employee feedback for them. It's a very simple list with only 2 fields, EmpName (single line text) and EmpComment (multi-line text). I user PowerApps to create separate forms for Display, Edit and Create. I modified the Create form so it only shows the 2 relevant fields while hiding the other information (such as create date, modify date, etc.) I saved and published the PowerApp forms and it works fine as a (normal) callout process.
For privacy concerns, we don't want the (non-HR) employees accessing the entire list. I have a new page for this test site and I added a Content Editor web part, then edited the Source Code to call a javascript function like so:
<a onclick="javascript:SP.UI.ModalDialog.showModalDialog("http://HR/Lists/Feedback/NewItem.aspx");return false;" href="">Leave New Feedback</a>
I swear this used to work in previous versions, but now SP strips out the relevant markup -- the error is "Warning: Some of your markup was stripped out. Try using the Embed command." So I edited the page again and tried to embed the link, but it still gets stripped. I'm sure there is a simple explanation, but (frankly) my sharepoint is a little rusty.
How can I get this entry form to pop-up as a modal dialog from a link on the page?
Thanks, Glenn
Solución
Try placing the modal in a separate function in JS and call that function onclick. Give this a try instead:
EDIT for CEWP use a txt file and reference it in the CEWP. Store your txt file in the Site Assets Library. Give this a try:
<script type="text/javascript" src="https://yoursite/SiteAssets/jquery-1.xx.x.js"></script>
<a href="#" onclick="javascript:showModal()">Leave Feedback</a>
<script type="text/javascript">
$(function() {
showModal() {
var options = {
url: "http://HR/Lists/Feedback/NewItem.aspx",
allowMaxSize: true,
showClose: true
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
return true; //you want the PostBack after Save
}
});
</script>
This is what I use for Modal Dialogs on my pages.