AnsweredAssumed Answered

How to open a list item in Diag Modal window from Email

Question asked by darrentcs on Dec 20, 2017

I've seen this question asked loads of times and thought I would share my solution on how I accomplished this. I take no kudos for the script. My colleague Zia Uddin used some Diag Modal scripts that have been around on the web for ages and then added some of his own code.

 

So, you have a Nintex workflow that sends an email notification to someone that has to view/approve than item. Common scenario right?
Issue is when you try to manipulate the item link in the body of the email notification action in the workflow to open in Diag modal it just doesn't work  - open in a diag modal window - when clicked on from the generated email. This is because you're trying to open from an app outside of SharePoint. So what to do?

 

To get round the issue, I created a web part page in the site in question. Lets call it 'Tasks' for this demo, and placed it in the site pages library.
I then edited the page and placed a list web part (for a list called 'tasks') where I want to direct the users(s) to. I then added a script editor web part to the page and added the script below to it and saved.
 
 

<script>

function displayLayover(url) {
var options = SP.UI.$create_DialogOptions();
options.url = url;
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
SP.UI.ModalDialog.showModalDialog(options);
return false;
}

function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}

function CloseCallback(result, target)
{
var currentUrl = window.location.href;
currentUrl = currentUrl.substring(0, currentUrl.lastIndexOf('?'));
if (result == SP.UI.DialogResult.OK) {
window.location.href = currentUrl;
}
if (result == SP.UI.DialogResult.cancel) {
window.location.href = currentUrl;
}
}

window.addEventListener('load', function() {
var EntryList = getParameterByName("ListName");
if (EntryList != null)
{
var openID = getParameterByName("openID");
if (openID!=null)
{
var URL = "/Lists/" + EntryList + "/EditForm.aspx?ID="+openID;
displayLayover(URL);
}
}
});

</script>

 

Now, back in your Nintex workflow, navigate to the email notification action and in the body add a link.

 

In the address bar I added the following, being careful that the parameters matched those specified in the script (case correct see -below)

 

ListName and openID

 

 

 

URL I added in the address space of the link, pointing it to the Tasks.aspx page and passing it the internal list name: Tasks as a parameter along with the current item ID as a parameter.

 

{Common:WebUrl}/sitepages/Tasks.aspx?ListName=Tasks&openID={ItemProperty:ID}

Note:

 

Common:WebUrl and ItemProperty:ID can be added by using insert ref and finding under Common and Item Properties tabs. 

Now when the email notification is sent through in Outlook, or whatever mail client you are using, the user will be redirected to your Tasks.aspx page and the edit form for the item will open in a diag modal window!
When closed it will stay on the Tasks.aspx too!


Tip: We built a nice dashboard on our Tasks.aspx page and used this as way to keep the users away from the actual lists in the background. I.E on the list view web part we locked down them creating a new items and such + hid the full toolbar etc.

Note: Try not to have spaces in your list name you are directing the users to.

Outcomes