Linking HTML Form webpart

In SharePoint 2013 by rhodzyLeave a Comment

The below will allow you to copy across item information from one SharePoint list and display them within a task list for approval.

You will need to make sure you have “jquery-3.2.1.min.js” somewhere on your SharePoint site.

  • Add HTML Form Webpart and add the <iframe> code below. The ID value of “SelectedPage” is important as this is referenced in the jquery.
  • Add Content Editor with code below. You’ll need amend the URLs and GUIDs as appropriate.
​HTML Form webpart code
​<iframe id=”selctedPage” src=”” style=’width:650px; height:750px’></iframe>
​Code to link List to Task List
<script type=”text/javascript” src=”http://YOURSIRETOWHEREJQUERYIS/SiteAssets/Java/jquery-3.2.1.min.js”></script>

<script>
$(document).ready(function(){

//Get paramenter from URL
var id=GetParameterValues(‘ID’);

//passing the item id which is fetched from the url
//alert(id)
updateDraftOnEdit(id)

})

//function to get querystring parameter from the url, Based on the pasing paramenter it will fetch the value
function GetParameterValues(param) {
var url = window.location.href.slice(window.location.href.indexOf(‘?’) + 1).split(‘&’);

for (var i = 0; i < url.length; i++) {
var urlparam = url[i].split(‘=’);

if (urlparam[0] == param) {
return urlparam[1];
}
}
}

//Function to get related items from the TASK list, by passing id of the specific item retrieved above
function updateDraftOnEdit(id) {

$.ajax({
url: “http://SITEURL/_api/web/lists(guid’YOURLISTGUIDHERE’)/items(” + id + “)?$expand=ContentType&$seelct=RelatedItems”,
method: “GET”,
headers: { “Accept”: “application/json; odata=verbose” },
success: function (data) {
// Returning the results
//alert(‘success’)
console.log(‘success’)

//get all related items, ex-itemid, listID
var selectedRelatedItem=data.d.RelatedItems;

//Get only item id
var str=selectedRelatedItem.substr(5, 10);

//get item id value
var firstArray=selectedRelatedItem.split(“,”)

//split id alsone

var test=firstArray[0].split(“:”)

//set the source content of the iframe and pass through the related id
$(‘#selctedPage’).attr(‘src’, “http://YOURSITEHERE/Lists/YOURLIST/DispForm.aspx?ID=”+ test[1])
//alert(test[1])

//$(‘#savedId’).val(data.d.ID)

},

error: function (data) {
failure(data);
}
});
}
</script>