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

by
Complete SharePoint Training Course ($46 OFF)

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:

Display SharePoint List items in Dropdown List
sharepoint hosted app read list from host web
  • 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.
how to bind list item column to drop down list in sharepoint using jquery
how to bind list item column to drop down list in SharePoint using jquery
  • Next, it will display the new SharePoint Add-In window. Here select your SharePoint developer site URL and select SharePoint Hosted and click Next.
bind sharepoint list items to dropdownlist using javascript
bind SharePoint list items to dropdownlist using javascript

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.

bind sharepoint list items to dropdownlist by using javascript
bind sharepoint list items to dropdownlist by using javascript

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.

how to bind list item column to drop down list in sharepoint by using jquery
how to bind list item column to drop down list in sharepoint by using jquery
  • 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.
how to bind sharepoint list items to dropdownlist using javascript
SharePoint Add-in

You may like following SharePoint Add-in tutorials:

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.

>