CODEWITHSUNDEEP
javascriptjquerysharepoint
Nefri
Nefri

Reputation: 197

How to get a Sharepoint list's row's ID from click on a hyperlink in the list?

I have a sharepoint list where the users can create new items. Sometime the users create very similar items so they requested me to create an option to copy an existing item's data to the new item form and autofill with it (except unique/autogenerated fields). So they have to modify just few input to create a new item.

I added a new column and autofilled it with hyperlinks to the new item form (text:"copy"), but I don't know how to get the rowindexid or any unique field value of the clicked hyperlink's row and bring it to the next page. If I could do that I could easily search in the list and fill the new form. Sadly I am new to JavaScript so even after hours of research, I am not sure how to approach this, so pls lend me a hand. Thanks you very much for any idea!

Upvotes: 0

Views: 2001

Answers (1)

Joshua Rose
Joshua Rose

Reputation: 390

Since it is not mentioned in your original question, I am making the assumption you are using SharePoint 2013+.

To start with I would add a lookup column to the field list. This will allow them to select the item they want to copy. You will need to get the ID of this element and all the other input elements in the page. for my demo i am putting them into an object. You can use Developer tools (F12 in ie or Ctrl+Shift+i for chrome). 

var idsAndNames = {
"fieldName":"id of field",
....
}

Next create a function to read the data from that item and add it to the form. For the code below I am using to the Rest API. You can also use SharePoint's CSOM.

function addData(e) {
  var opt = e.target.options[e.target.selectedIndex];
  var idOfItem = opt.value;
   $.ajax({
       url: path/to/list/_api/lists/getByTitle('<name of list>')/items(idOfItem),
       type: "GET",
       headers: { "Accept": "application/json;odata=verbose" },
       success: function (data, textStatus, xhr) {
           for (var key in idsAndNames){
             $(idsAndNames[key]).html(data.d[key]);
           }
       },
       error: function (data, textStatus, xhr) {
           alert('failed to get data');
       }
   });
}

finally add an event listener to make the changes when the user selects a different item.

$(idOfSelect).on('change', addData);

or

document.getElementById(idOfSelect).addEventListener('change', addData)

or using ES6

document.querySelector(#idOfSelect).addEventListener('change',()=>addData(data));

Upvotes: 1

Related Questions