0

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:

enter image description here

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.

2
  • Did you check if execution goes inside getEmpID() function? If Yes, check results inside success 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. Commented May 4, 2021 at 7:38
  • Thanks for the reply @GaneshSanap , I called the getEmpID() in document.ready and it now gives me an error SP not found which means , it enters the function. Also confirmed that the selector is correct too. When I call the function using $.getScript(scriptbase + "SP.RequestExecutor.js", getEmpID); the ID dropdown works but the Team dropdown becomes empty. Please advice
    – Vivek
    Commented May 4, 2021 at 7:56

1 Answer 1

1

Change your code like below & it should work for you:

$(document).ready(function () {          
  hostweburl =
      decodeURIComponent(
          getQueryStringParameter("SPHostUrl")
      );
  appweburl =
      decodeURIComponent(
          getQueryStringParameter("SPAppWebUrl")
      );
  console.log(appweburl);

  var scriptbase = hostweburl + "/_layouts/15/";

  $.getScript(scriptbase + "SP.RequestExecutor.js", executeAllFunctions);
});

function executeAllFunctions() {
  // Populate Team dropdown
  FilterTeam();

  // Populate Employee ID dropdown
  getEmpID();
}
3
  • Thanks a lot Ganesh , You've been a savior like always. I tried all the probability and combinations , However never thought of this suggestion :)
    – Vivek
    Commented May 5, 2021 at 9:24
  • 1
    Check this & this for more information. Commented May 5, 2021 at 10:22
  • Sure Ganesh would bookmark the links too
    – Vivek
    Commented May 5, 2021 at 10:24

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.