none
How to open an email client with “To” and “Subject” line populate from fields in SharePoint list current open item using JavaScript. RRS feed

Answers

  • Hi,

    For display form page, we need modify the "getEmailFromPeoplePicker" function of code as below:

    function getEmailFromPeoplePicker(title) {	 	
    	var username=$("td>h4.inheritFontFamily:contains('"+title+"')").closest("td").next().text();
    	var usernames=username.split(';');
    	var userEmails=new Array();
    	for(var i=0;i<usernames.length;i++){
    		var requestUri = _spPageContextInfo.webAbsoluteUrl+"/_api/Web/SiteUserInfoList/items?$select=EMail&$filter=Title eq '"+usernames[i].trim()+"'";
    		var userEmail;
    		//execute AJAX request
    		$.ajax({
    			url: requestUri,
    			type: "GET",
    			async: false,
    			headers: { "ACCEPT": "application/json;odata=verbose" },
    			success: function (data) {			
    				userEmails.push(data.d.results[0].EMail);
    			},
    			error: function () {
    				//alert("Failed to get details");                
    			}
    		});
    	}	
    	return userEmails.toString().replace(",",";");
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    • Marked as answer by Titi F Monday, March 19, 2018 11:54 AM
    Monday, March 19, 2018 8:26 AM
    Moderator

All replies

  • Hello,

    Below Code works :

    <HTML xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
    <TITLE>MailTo</TITLE>
    <script type="text/javascript">
        function SendMail()
        {
            location.href = "mailto:?subject=Test&body=Test";
        }
    </script>
    </HEAD>
    <BODY>
    <A href="#" onclick="SendMail()">Email</A>
    </BODY>
    </HTML>
    Related thread

    https://social.technet.microsoft.com/Forums/sharepoint/en-US/a8e7af23-849a-48e1-8092-e46846aa292a/open-outlook-email-form-with-announcement-title-and-content-as-mail-subject-and-body-respectively-in?forum=sharepointgeneralprevious


    Tryitout in w3schools

    https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_mailto


    Ramakrishnan


    Please remember to mark the replies as answers if they helped.


    Thursday, March 1, 2018 2:24 PM
  • Hello Ramakrishnan

    Thanks for the reply.  I already make the email client  open with static "To" and "Subject" lines like on the HTML Code you posted.

    But what I want is to populate fields of a current open SharePoint list item on the "To" and "Subject" line of the email client.

    For instance, if the current open list item has a field named Manager with the value of "ManagerOne", I want to populate  this "ManagerOne" on the "To" line of the email client when a user hits the "Send Email" link in the current open item page.

    In other words, I want the value on "To" and "Subject " line of the email client to be dynamic or be changed based on the field value of the current sharepoint list item where the users hit the "Send Email" link.

    Please help!

    Thursday, March 1, 2018 6:43 PM
  • Hello,

    Please use the below code to construct the code from SharePoint list item edit form.

    Please note the type and change the code based on  your field type.

    Manager - person or group field

    subject - single line of text

    comments - single line of text

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    
    		function SendMail()
    		{
    			var emailID = getEmailFromPeoplePicker('Manager');
    			var subject = getSubject('subject');
    			var body = getBody('comments');
    			location.href = "mailto:"+emailID+"?subject="+subject+"&body="+body;
    		}
    		
    		function getSubject(subject)
    		{
    			return $('input[title="'+subject+'"]').val();
    		}
    		
    		function getBody(body)
    		{
    			return $('input[title="'+body+'"]').val();
    		}
    		
    		function getEmailFromPeoplePicker(title) {
    			//Get the people picker field
    			var ppDiv = $("div[title='" + title + "']")[0];
    			//cast the object as type PeoplePicker
    			var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[ppDiv.id];
    		 
    			//Get list of users from field (assuming 1 in this case)
    			var userList = peoplePicker.GetAllUserInfo();
    			var userInfo = userList[0];
    			var userEmail;
    		 
    			//The description field contains the login info without the lookup extras.  In new forms this 
    			//field can be undefined depending on the field being checked.  Only check if userInfo is
    			//initialized.
    			if(userInfo != null)
    			{
    				userEmail = userInfo.EntityData.Email;
    			}
    		 
    			return userEmail;
    		}
    	
    </script>
    
    <a href="#" onclick="SendMail()">Email</a>



    Ramakrishnan


    Please remember to mark the replies as answers if they helped.

    • Proposed as answer by LinyusMVP Thursday, March 8, 2018 1:50 AM
    Friday, March 2, 2018 6:05 AM
  • Hello Ramakrishnan,

    Thanks a lot!!!

    The "Email" link works perfect on  a default SharePoint list but it doesn't work on lists customized by InfoPath designer. I used script editor web part to insert the html code.

    Please advise.




    • Edited by Titi F Monday, March 5, 2018 5:59 PM
    Monday, March 5, 2018 5:58 PM
  • Hi,

    The code below for your reference:

    <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    function SendMail(){
    	var emailID = getEmailFromPeoplePicker('Manager');
    	var subject = getSubject('Subject');	 
    	location.href = "mailto:"+emailID+"?subject="+subject;
    }
    
    function getSubject(subject){
    	return $("td>h4.inheritFontFamily:contains('"+subject+"')").closest("tr").find("input").val();
    }
    function getEmailFromPeoplePicker(title) {	 	
    	var username=$("td>h4.inheritFontFamily:contains('"+title+"')").closest("tr").find("input[id$='_FormControl0__customcontrol1_HiddenEntityKey']").val()
    	var requestUri = _spPageContextInfo.webAbsoluteUrl+"/_api/Web/SiteUserInfoList/items?$select=EMail&$filter=Name eq '"+username+"'";
    	var userEmail;
    	//execute AJAX request
    	$.ajax({
    		url: requestUri,
    		type: "GET",
    		async: false,
    		headers: { "ACCEPT": "application/json;odata=verbose" },
    		success: function (data) {			
    			userEmail=data.d.results[0].EMail;
    		},
    		error: function () {
    			//alert("Failed to get details");                
    		}
    	});
    	return userEmail;
    }
    </script>
    <a href="#" onclick="SendMail()">Email</a>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Wednesday, March 7, 2018 7:31 AM
    Moderator
  • Hello Dennis,

    Thanks a lot!!!

    The script you posted works perfectly in case of displaying only one field on “To” line and another one field on “Subject” line of an email client.

    What I want is to display more than one field on both “To” and “Subject” lines. But I can’t apply it using your script.

    I have created additional variables (for the additional fields that I want to be displayed on the email client) in “SendMail” function and concatenated the fields like this:

    location.href = "mailto:"+emailID+S+emailID2+"?subject="+subject+S2+subject2

    Where “S” and "S2 are ; and -

    When I do this I got “Undifined” on both TO and SUBJECT lines of the email client.

    Please see the code block below for your reference.

    Would you tell me what did I missed?

    <html>
    <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    function SendMail(){
    	var emailID = getEmailFromPeoplePicker('Manager');
    	var emailID2 = getEmailFromPeoplePicker('Manager2');
        var S =";";
        var S2 ="-";
    	var subject = getSubject('Subject');	
    	var subject2 = getSubject('ProjectName'); 
    	
    	location.href = "mailto:"+emailID+S+emailID2+"?subject="+subject+S2+subject2;
    }
    
    function getSubject(subject){
    	return $("td>h4.inheritFontFamily:contains('"+subject+"')").closest("tr").find("input").val();
    }
    function getSubject(subject2){
    	return $("td>h4.inheritFontFamily:contains('"+subject2+"')").closest("tr").find("input").val();
    }
    
    function getEmailFromPeoplePicker(title) {	 	
    	var username=$("td>h4.inheritFontFamily:contains('"+title+"')").closest("tr").find("input[id$='_FormControl0__customcontrol1_HiddenEntityKey']").val()
    	var requestUri = _spPageContextInfo.webAbsoluteUrl+"/_api/Web/SiteUserInfoList/items?$select=EMail&$filter=Name eq '"+username+"'";
    	var userEmail;
    	//execute AJAX request
    	$.ajax({
    		url: requestUri,
    		type: "GET",
    		async: false,
    		headers: { "ACCEPT": "application/json;odata=verbose" },
    		success: function (data) {			
    			userEmail=data.d.results[0].EMail;
    		},
    		error: function () {
    			//alert("Failed to get details");                
    		}
    	});
    	return userEmail;
    }
    </script>
    <a href="#" onclick="SendMail()">Email</a>
    </html>
    

    Appreciate your help!

    Wednesday, March 7, 2018 4:34 PM
  • Hi,

    Please provide the screenshots about the edit form page for further research.

    I suggest you use IE F12 developer tools to debug the code above and check the values.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Thursday, March 8, 2018 6:18 AM
    Moderator
  • Hi,

    Please see the screenshot of one of the list items edit form page.

    And please see the screen shot of my outlook page that I got when I click the "Email" link on the edit form.

    I don't understand when you say "I suggest you use IE F12 developer tools to debug the code above and check the values." Could you tell me how?

    Thanks a lot for your help!!

    [Edited]

    I don't know why but this what I figured out or what is happening:

    When I have only one people picker field on the form, it works perfectly. But when I have more than one People picker field on the list form, I got the "Undefined" on the "To" line of my email client although I am using the same script with the one having one people picker field. That is I used the below code block for both cases but I am getting "Undefined" on the "To" when I have more than one people picker field on my form.

    <html>
    <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    function SendMail(){
    	var emailID = getEmailFromPeoplePicker('Manager');
    	var subject = getSubject('Subject');	 
    	location.href = "mailto:"+emailID+"?subject="+subject;
    }
    
    function getSubject(subject){
    	return $("td>h4.inheritFontFamily:contains('"+subject+"')").closest("tr").find("input").val();
    }
    function getEmailFromPeoplePicker(title) {	 	
    	var username=$("td>h4.inheritFontFamily:contains('"+title+"')").closest("tr").find("input[id$='_FormControl0__customcontrol1_HiddenEntityKey']").val()
    	var requestUri = _spPageContextInfo.webAbsoluteUrl+"/_api/Web/SiteUserInfoList/items?$select=EMail&$filter=Name eq '"+username+"'";
    	var userEmail;
    	//execute AJAX request
    	$.ajax({
    		url: requestUri,
    		type: "GET",
    		async: false,
    		headers: { "ACCEPT": "application/json;odata=verbose" },
    		success: function (data) {			
    			userEmail=data.d.results[0].EMail;
    		},
    		error: function () {
    			//alert("Failed to get details");                
    		}
    	});
    	return userEmail;
    }
    </script>
    <a href="#" onclick="SendMail()">Email</a>
    </html>
    Please help!


    • Edited by Titi F Thursday, March 8, 2018 8:05 PM
    Thursday, March 8, 2018 2:30 PM
  • Hi,

    I modify the code to make the multiple people selected.

    <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    function SendMail(){
    	var emailIDs = getEmailFromPeoplePicker('Manager');
    	var subject = getSubject('Subject');
    	var subject2 = getSubject('ProjectName');
    	location.href = "mailto:"+emailIDs+"?subject="+subject+"-"+subject2;
    }
    
    function getSubject(subject){
    	return $("td>h4.inheritFontFamily:contains('"+subject+"')").closest("tr").find("input").val();
    }
    function getEmailFromPeoplePicker(title) {	 	
    	var username=$("td>h4.inheritFontFamily:contains('"+title+"')").closest("tr").find("div[title='People Picker']").text();
    	var usernames=username.split(';');
    	var userEmails=new Array();
    	for(var i=0;i<usernames.length;i++){
    		var requestUri = _spPageContextInfo.webAbsoluteUrl+"/_api/Web/SiteUserInfoList/items?$select=EMail&$filter=Title eq '"+usernames[i].trim()+"'";
    		var userEmail;
    		//execute AJAX request
    		$.ajax({
    			url: requestUri,
    			type: "GET",
    			async: false,
    			headers: { "ACCEPT": "application/json;odata=verbose" },
    			success: function (data) {			
    				userEmails.push(data.d.results[0].EMail);
    			},
    			error: function () {
    				//alert("Failed to get details");                
    			}
    		});
    	}	
    	return userEmails.toString().replace(",",";");
    }
    </script>
    <a href="#" onclick="SendMail()">Email</a>

    To learn how to debug JavaScript code using IE developer tools, the following article for your reference:

    https://msdn.microsoft.com/en-us/library/dd565625%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Friday, March 9, 2018 8:11 AM
    Moderator
  • Hi Dennis,

    Thanks for the script above but I am facing one issue. Here is the detail:

    The “subject” line of the email client displays only “Subject2” value while “Subject1” field value is displayed as “undefined”. Please see the image below.

    Could you tell me what I did wrong on the below script? I can display all my three people picker fields on the “To” line, the only problem is I can’t populate the value of “Subject1”, rather it is displaying “undefined”

    <html>
    
    <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    function SendMail(){
    	var emailIDs = getEmailFromPeoplePicker('Manager1');
    	var emailIDs2 = getEmailFromPeoplePicker('Manager2');
    	var emailIDs3 = getEmailFromPeoplePicker('Manager3');
    	var subject1 = getSubject('Subject1');
    	var subject2 = getSubject('Subject2');
    	location.href = "mailto:"+emailIDs+";"+emailIDs2+";"+emailIDs3+"?subject="+subject1+"-"+subject2;
    }
    
    function getSubject(subject){
    	return $("td>h4.inheritFontFamily:contains('"+subject+"')").closest("tr").find("input").val();
    }
    function getEmailFromPeoplePicker(title) {	 	
    	var username=$("td>h4.inheritFontFamily:contains('"+title+"')").closest("tr").find("div[title='People Picker']").text();
    	var usernames=username.split(';');
    	var userEmails=new Array();
    	for(var i=0;i<usernames.length;i++){
    		var requestUri = _spPageContextInfo.webAbsoluteUrl+"/_api/Web/SiteUserInfoList/items?$select=EMail&$filter=Title eq '"+usernames[i].trim()+"'";
    		var userEmail;
    		//execute AJAX request
    		$.ajax({
    			url: requestUri,
    			type: "GET",
    			async: false,
    			headers: { "ACCEPT": "application/json;odata=verbose" },
    			success: function (data) {			
    				userEmails.push(data.d.results[0].EMail);
    			},
    			error: function () {
    				//alert("Failed to get details");                
    			}
    		});
    	}	
    	return userEmails.toString().replace(",",";");
    }
    </script>
    <a href="#" onclick="SendMail()">Email</a>
    </html>

    Appreciate your help!!!

    [Edited]

    From what I figured out, The "getSubject" Method is not reading/retrieving a "Title" field. And I am wondering if the Method we use for getting "Title" of an item might be different than "getSubject".

    Any idea please?




    • Edited by Titi F Thursday, March 15, 2018 8:36 PM
    Thursday, March 15, 2018 1:38 PM
  • Hi,

    I can't see the field 'Subject1' in your screenshot above, please check the HTML code using IE F12.

    Press F12 in the page and select the HTML elements.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Friday, March 16, 2018 9:02 AM
    Moderator
  • Hi Dennis,

    I figured out why it is not working and now everything works perfectly when I insert the script on Edit view of an item.

    The only  problem I am facing now is  when I Insert the Script on Display view, it doesn't pop up the people picker fields on Email client though the other text box fields are displayed as expected.

    Any thought?


    • Edited by Titi F Friday, March 16, 2018 5:12 PM
    Friday, March 16, 2018 5:08 PM
  • Hi,

    For display form page, we need modify the "getEmailFromPeoplePicker" function of code as below:

    function getEmailFromPeoplePicker(title) {	 	
    	var username=$("td>h4.inheritFontFamily:contains('"+title+"')").closest("td").next().text();
    	var usernames=username.split(';');
    	var userEmails=new Array();
    	for(var i=0;i<usernames.length;i++){
    		var requestUri = _spPageContextInfo.webAbsoluteUrl+"/_api/Web/SiteUserInfoList/items?$select=EMail&$filter=Title eq '"+usernames[i].trim()+"'";
    		var userEmail;
    		//execute AJAX request
    		$.ajax({
    			url: requestUri,
    			type: "GET",
    			async: false,
    			headers: { "ACCEPT": "application/json;odata=verbose" },
    			success: function (data) {			
    				userEmails.push(data.d.results[0].EMail);
    			},
    			error: function () {
    				//alert("Failed to get details");                
    			}
    		});
    	}	
    	return userEmails.toString().replace(",",";");
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    • Marked as answer by Titi F Monday, March 19, 2018 11:54 AM
    Monday, March 19, 2018 8:26 AM
    Moderator
  • Hi Dennis,

    It works perfectly. Thanks a lot for all your help.

    Monday, March 19, 2018 11:57 AM
  • What if there are spaces in the fields? Instead of the Manager Field, mine is labeled User Requesting Assistance

    Lee Mossolle

    Thursday, August 22, 2019 5:04 PM