I am new to Provider Hosted Apps and starting off with the basics.
Was able to save the data to the list, However facing challenges with edit, update and delete.
Scenario:
Created a simple form with the fields below:
The challenge here is that I'm unable to populate the ID column on the form load, However the field Team works as expected using SP.RequestExecutor.js
The ID dropdown is blank without any errors in the console.
Code inside document.ready():
$(document).ready(function () {
hostweburl =
decodeURIComponent(
getQueryStringParameter("SPHostUrl")
);
appweburl =
decodeURIComponent(
getQueryStringParameter("SPAppWebUrl")
);
console.log(appweburl);
var scriptbase = hostweburl + "/_layouts/15/";
$.getScript(scriptbase + "SP.RequestExecutor.js", FilterTeam);
});
Code for teams dropdown:
function FilterTeam() {
var executor = new SP.RequestExecutor(appweburl);
executor.executeAsync(
{
url:
appweburl +
"/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('Team')/items?$select=Title,ID&@target='" +
encodeURIComponent(hostweburl) + "'",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
var jsonObject = JSON.parse(data.body);
var results = jsonObject.d.results;
console.log(results);
$.each(results, function (key, value) {
$("#team").append('<option value="' + value.ID + '">' + value.Title + '</option>');
});
},
error: function (error) {
alert(JSON.stringify(error));
}
}
);
}
Code for ID Dropdown:
function getEmpID() {
var executor = new SP.RequestExecutor(appweburl);
executor.executeAsync(
{
url:
appweburl +
"/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('Employee')/items?$select=ID&@target='" +
encodeURIComponent(hostweburl) + "'",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
var jsonObject = JSON.parse(data.body);
var results = jsonObject.d.results;
console.log(results);
$.each(results, function (key, value) {
$("#eid").append('<option value="' + value.ID + '">' + value.ID + '</option>');
});
},
error: function (error) {
alert(JSON.stringify(error));
}
}
);
}
If we call getEmpID()
in document.ready()
or use $.getScript(scriptbase + "SP.RequestExecutor.js", getEmpID)
, the ID Dropdown is empty.
Researched a lot on SP.RequestExecutor.js
for code samples, However could not find any articles for this issue.
Update
Calling getEmpID , would give an error ReferenceError: SP is not defined
and writing $.getScript(scriptbase + "SP.RequestExecutor.js", getEmpID); in document.ready works as expected , However the Team dropdown is blank
Would appreciate if anyone could help me with the correct way of doing this. Please let me know if any other details are needed.
getEmpID()
function? If Yes, checkresults
insidesuccess
by adding breakpoint & see if it returns correct data. If it is returning data correctly, you might be using wrong selector (#eid
) for ID dropdown.