I have a content editor web part that is referencing an html page. How can I fill a dropdown on that html page with the contents of a sharepoint custom list column?
1 Answer
To achieve your requirement, You can use
- JSOM
- REST API.
Example
Consider you have select
control
<select id="SelectId">
<option value="" selected>Select</option>
</select>
Bind list column to this control using JSOM
<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(BindDropDown, "sp.js");
});
var collListItem;
function BindDropDown() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle("your list name");
var camlQuery = SP.CamlQuery.createAllItemsQuery();
collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onSucceed),
Function.createDelegate(this, this.onFailed));
}
function onSucceed(sender, args) {
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
$("#your Select control ID").append('<option>' + oListItem.get_item('Title') + '</option>')
}
}
function onFailed(sender, args) {
console.log(args.get_stackTrace());
}
}
Bind list column using REST API
Check this SE thread How to bind the REST API result