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??

  • 1
    You could simply pass it as a URL. If you provider hosted app is set up correctly your view should be something like this -> localhost:44313/Home/View/121 Where "121" is my sharepoint list item id.
    – Dante R.
    Commented Sep 3, 2018 at 15:58
  • @DanteR. thanks for your reply. now my SP hosted app will have a url simialar to for its home page https://*****-f*****e.sharepoint.com/sites/SITENAME/SPHostedAppName/Pages/Default.aspx?SPHostUrl=h***** and i am not sure if this aspx page will allow me to pass parameters? can you explain your comment in more details?
    – John John
    Commented Sep 3, 2018 at 17:14
  • 1
    Looks like im pretty tired, just realized you're the one that i answered to regarding the modern webpart. I mistook your question as a "Sharepoint provider hosted addin" instead of SP hosted, my bad. I'll post this as an answer since it is pretty lengthy.
    – Dante R.
    Commented Sep 3, 2018 at 17:31

1 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();  
        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 ->


  • thanks for the reply..not sure if i got ur reply correctly, but what i am trying to do is to pass the ID to the SP-Hosted app and not to the Display Form. i will be passing the ID from the list view to the SP-Hosted app. for example when a user click on the item title inside a list view, i will pass the item ID to the SP-Hosted app, where the SP-Hosted app will render the Invoice and its details items inside a view which will have this url :-https://*****-f*****e.sharepoint.com/sites/SITENAME/SPHostedAppName/Pages/Default.aspx?SPHostUrl=h*****
    – John John
    Commented Sep 3, 2018 at 18:01
  • 1
    Thats pretty much it. The easiest (and probably the only one) way to pass the ID/any other info from one page to another (without using server side code ofc) is to send that info in query strings/parameters.
    – Dante R.
    Commented Sep 3, 2018 at 18:08
  • so you mean i can pass the item Id to my SP-Hosted app's default.aspx page ? my question was if it is possible or not. now if i can pass the item ID to the SP-Hosted app's default.aspx page using query string then i can capture this easily inside my app.js file..
    – John John
    Commented Sep 3, 2018 at 18:12
  • 1
    Yes, you can pass query string to anything, even to google. Google wont process it ofc, but nothing is stopping you from sending it :P.
    – Dante R.
    Commented Sep 3, 2018 at 18:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.