In some scenarios, we may create the SharePoint portal. Our Customer may have some other partners, they may have some other legacy websites like PHP, ASP etc.,
I came up with a requirement like, there should be a provision to Login from the SharePoint 2013 portal to the partner website which is on PHP. The PHP requires the UPN and the mail ID from the SharePoint 2013 for the form post. This is something like a Single Sign On Concept.
Hence, we provided a link for the PHP site from our SharePoint Site’s Menu and on the click of the Link, we planned to do a Form Post to the PHP site along with the UPN and the MailID.
Here, the PHP site also required some modifications to read the UPN and MailID, which we are passing and validate them with their Databases. That is not our concern. Being a SharePoint Developer, Let us see, how to do a Form Post from our SharePoint Site.
Let us assume that we have a HyperLink. On click of the HyperLink, we require the PHP site needs to be opened. To have a HyperLink, I created a separate SitePage on which a Content Editor WebPart and a Script Editor WebPart has been added.
On the scripit Editor WebPart, am placing the below script. The below script is self explanatory.
<script>
$(document).ready(function () {
$('#btnPostData').click(function ()
{
var obj = new Object();
//This is the place, where we need to frame our Input parameters from the SharePoint
// site. The UPN and the MailID can be taken from the UserProfile Properties. Tis can
// be done either from the Server side or the javascript itself. Am planning to write a
//separate article to deal with the User Profile Properties.
var str = "UPN##Sathish@ss.loc###Mail##Nadarajan.Sathish@Gmail.com";
var strArray = str.split("###");
for (var i = 0; i < strArray.length; i++) {
var temp = strArray[i].split("##");
obj[temp[0].toString()] = temp[1].toString();
}
//Call the post method with the url to which this needs to be posted and the obj.
post_to_url("http://sathishserver/TargetApplication/PostedForm.aspx", obj);
});
});
function post_to_url(path, params, method) {
method = method || "post"; // Set method to post by default, if not specified.
//Creating a form element
var form = document.createElement("form");
//Deciding the method as POST
form.setAttribute("method", method);
//Passing the URL of the Target Application
form.setAttribute("action", path);
for (var key in params) {
if (params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
//Doing the actual FormPost
form.submit();
}
</script>
That’s it. The form will get posted and the PHP site is getting loaded.
Now, to verify, I had written a small .Net WebApplication which should read the posted values.
To read the posted values, please find the piece of code below.
protected void Page_Load(object sender, EventArgs e)
{
if (Page.Request.Form != null)
{
NameValueCollection FormItems = Page.Request.Form;
hdnPostedValues.Text = "{";
foreach (string key in FormItems.AllKeys)
{
hdnPostedValues.Text += key + ":";
hdnPostedValues.Text += FormItems[key] + ",";
}
hdnPostedValues.Text += "}";
}
}
Download the source from HERE.
Happy Coding.
Sathish Nadarajan.
Leave a comment