How to get host web list items using SharePoint Online Apps or Add-in

This SharePoint hosted app or add-in example, I am going to explain how to get list items from the host web and bind into a dropdown list in an app web using SharePoint hosted app or add-in in SharePoint Online.

Here I have a SharePoint list (Country) on my SharePoint Online site. And it also has some items in it. The list is presented in the host web.

Now I want to develop a SharePoint hosted add-in and want to bind this host web list data to a dropdown list in the App web.

The SharePoint Online with some items looks like below:

• Open visual studio 2017/2019 to create a SharePoint hosted Add-In. Go to the File menu, click on a new item, next click on Project item. It displays a new project
• Here, in the left side panel, go to office/SharePoint tab, here you select Add-in
• Now it displays the list Add-In’s, here you select SharePoint Add-In. Now enter your project name and location. Then click on OK.

• Next, it will display the new SharePoint Add-In window. Here select your SharePoint developer site URL and select SharePoint Hosted and click Next.

Now it will ask your credentials. Enter your username and password and click on sign-in.

Here you select SharePoint Online as shown below and click on Finish.

Once the SharePoint hosted App or add-in got created we can now add our HTML controls in the Default.aspx page and we can write the jsom SharePoint code in App.js file.

Go to Default.aspx page. Create a country label and dropdown as shown below.

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div>
<table>
<tr>
<td><label id ="Country">Country</label> </td>
<td><select id="dropDownCategory"></select></td>
</tr>
</table>
<%-- <p id="message">
<!-- The following content will be replaced with the user name when you run the app - see App.js -->
</p>--%>
</div>
</asp:Content>

App.js file code

Below is the App.js code which will retrieve SharePoint list items from the host web.

'use strict';
ExecuteOrDelayUntilScriptLoaded(RetrieveSpListItemToDD, "sp.js");
var listItems;
function RetrieveSpListItemToDD() {
var hostUrl = decodeURIComponent(getURLParameters("SPHostUrl"));
var clientContext = new SP.ClientContext.get_current();
var hostcontext = new SP.AppContextSite(clientContext, hostUrl);
var web = hostcontext.get_web();
var list = web.get_lists().getByTitle('Country');
var cmlquery = new SP.CamlQuery();
listItems = list.getItems(cmlquery);
load(listItems);
executeQueryAsync(onQuerySucceeded, onQueryFailed);
}
function onQuerySucceeded() {
var listItemEnumerator = listItems.getEnumerator();
while (listItemEnumerator.moveNext()) {
var currentItem = listItemEnumerator.get_current();
$("#dropDownCategory").append('<option>' + currentItem.get_item('Title') + '</option>');
}
}
function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}
function getURLParameters(param) {
var params = document.URL.split('?')[1].split('&');
var strParams = '';
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split('=');
if (singleParam[0] == param) {
return singleParam[1];
}
}
}

Go to the appmanifest.xml file and open it. Then go to the permission here you select scope: site collection and permission: Full Control.

• Go to your solution explorer, select your project name then right click on it and click on deploy option.
• Here the items are bounded to the dropdown list.

You may like following SharePoint Add-in tutorials:

• Display List items in HTML Table using JSOM in SharePoint Hosted App
• Error occurred in deployment step ‘Install SharePoint Add-in’: The remote server returned an error: (503) Server unavailable
• Create Site Column, Content type and List in SharePoint Hosted Appa or Add-in
• Error occurred in deployment step ‘Install SharePoint Add-in’: An instance of this App already exists at the specified location.
• Remove app from SharePoint Online using PowerShell
• Provider Hosted App in SharePoint Online using Visual Studio 2017
• The page you selected contains a list that does not exist
• Error occurred in deployment step Install App for SharePoint: Sideloading of apps is not enabled on this site
• Create remote event receiver in SharePoint Online step by step tutorial
• Create a Choice type Site Column in SharePoint Hosted Add-in using Visual Studio

In this SharePoint tutorial, we learned how to get list items from the host web in SharePoint hosted app and how to bind host web list data in a dropdown list in App web in SharePoint Online.