Passing the Item ID to my SharePoint Hosted App. is this possible

Question

I have to 2 lists inside my sharepoint online team site:-

1. Invoice
2. Invoice Details. which has a lookup column to the Invoice list.

now i want to show a summary of the Invoice and its details from one page, something as follow:-

**Invoice Info:-**

Invoice ID | Invoice Date | Invoice Number | Invoice Per

**Invoice Details info:-**

Item Number | Item Quantity | Price

+ Add New item

now to build this view i want to create a SharePoint hosted-app to create the above summary view. where i will follow an appraoch similar to this one https://www.c-sharpcorner.com/article/rest-crud-operations-using-sharepoint-hosted-app-office-365-part-two/ .

But i do not want to build everything from scratch, where the Invoice and Invoice Details lists will still be managed as-is using the built-in lists' forms (Create,Edit & Display). but i am planning to modify my list view, to redirect users to the SP-Hosted App, instead of redirected them to the item display form, when users clicks on the item title (i can do this by adding JS LINK to the web part).. but i am not sure if i can pass the item ID to my SharePoint hosted APP ? so i will pass the Invoice ID, then the SP-Hosted App will retrieve the Invoice item info + the Invoice Details info and render the above page.

so is it possible to pass the Item ID to my SharePoint Hosted App??

Answer 1

If you go the webpart route it will probably be easier (have no code to share since i haven't done it yet, but i bet its easier since its implemented in SPFX), but if you stick with the current way of doing this you can get the item id using JSLink ( ref How get item ID in JSLink on DisplayForm) and you can append your item id to your link. Example:

var url = "tenant.sharepoint.com?SPHostUrl=h****";
var viewitemurl = url + "&itemID=153";

Then when your "View Item" page loads, instead of passing the id as in the example you posted

    var id = $("#empID").val();  
    $.ajax({  
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + id + "')", // list item ID   

your var id will take the URL parameter so "id" will become "153".

var id = GetURLParameter('itemID');// Code from the ref below

If you haven't used query strings before you can take a look here at how to read query parameters ->

http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html