customize The add new item link in SharePoint

README.md

How can we create one to many relation by two or more lists in sharepoint

1- first you need two lists (please create them) neming: parent and child

2- in child list you need to have a look up field to ( to the parent column)

NOTE: PLEASE SELECT :ID field as extra field to your list

what we expected:

• the user want to see the related items of child when click on a parent item (in detail page)

3- in DispForm.aspx we need to edit page and add query string web part

4- edit this QueryStringWebPart and configure it to get "ID" from query string in url

5- then you should connect to QueryStringWebPart by getting filter parameter

6- we need to add custom link for adding child items to this parent item by myAddNewItemLink.js

7- when user click on new item (as child item) we need to set default value for this lookup field in NewForm.aspx by setLookupFieldValue.js

geItemsFromListForHTMLTag.js

// this file for getting link items for tiles in dashboard

<script type="text/javascript">
       $.ajax({
		 url: "/_api/web/lists/GetByTitle('indexPageLinks')/items",
		 type: "GET",
		 headers: {
		     "accept": "application/json;odata=verbose",
		 },
		success: function (data) {
			 $.each(data.d.results, function (index, item) {
			 var indexPageLinks ="<div class=\"col-md-3 col-sm-4  col-xs-12 site\">" +
		               "<div class=\"panel panel-info \">" +
		                    "<div class=\"panel-heading\">" + item.Title + "</div>" +
		                        "<div class=\"panel-body text-centers\">"+
		                           "<a href=\"" + item.LinkLocation.Url +"\" target=\"_blank\" title=\"" + item.Description + "\">"+
		                               "<img src=\""+ item.BackgroundImageLocation.Url + "\" style=\"width:35px;height:35px\" class=\"img-thumbnail\" />"+
		                           "</a>"+
		                         "</div>"+
		                     "</div>"+
		               "</div>";

		 $('#indexPageLinks').append(indexPageLinks);
			 //$('#indexPageLinks').append("<dl id='item" + item.columnID + "'><dt>" + item.Title + "</dt></dl>");
		 });
	 },
	 error: function (error) {
		 //alert(JSON.stringify(error));
	 }
});
</script>

myAddNewItemLink.js

<script>
console.log("logger saber");
function getParameterByName(name) {  
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var TafahomId = getParameterByName('ID');

window.onload = (event) => {
document.getElementById("myAddNewItemLink").href= "/tafahom/Lists/tarcking/NewForm.aspx?RootFolder=&ID="+TafahomId ;
};


</script>

<div>
<a href="" id="myAddNewItemLink" >new item</a>
</div>

setLookupFieldValue.js

<script>
console.log("logger saber");

function getParameterByName(name) {  
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var trackingId = getParameterByName('ID');

window.onload = (event) => {
  console.log('page is fully loaded');
document.getElementById("YOUR LOOK UP FIELD ID").value = trackingId ;
};

</script>