0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.