SharePoint JavaScript update choices field.set_choice does not exist

1.2k Views Asked by At

I am working with a SharePoint hosted add on that has a JavaScript component that I would like to use to update some of the choice values for one of the Site Columns I created. Everything I see indicates I should have access to a spChoiceField.Choices.Add(value), or spChoiceField.AddChoice(value), or spChoiceField.set_choices(value) but none of these are valid for me.

I am working with code that looks like:

if (clientContext != undefined && clientContext != null) {

        var web = clientContext.get_web();
        fieldTitle = "TQM Requesting:";
        fieldChoice = clientContext.castTo(web.get_availableFields().getByTitle(fieldTitle), SP.FieldChoice);
        TQMtoAdd = TQMToInsert.value;
        clientContext.load(fieldChoice);

I expect fieldChoice to provide one of the add functions but it does not.

I checked the following articles: How to update Choice column in SharePoint Update multiple choice field in sharepoint using rest api Sharepoint choice field

Thank you, Duncan

1

There are 1 best solutions below

5
Lee On

Tested script in my local to update choice field of host web in SharePoint hosted add-in.

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
    <meta name="WebPartPageExpansion" content="full" />

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- Add your JavaScript to the following file -->

    <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="../Scripts/App.js"></script>
    <script type="text/javascript">
        var appWebContext;
        var listResult;
        var hostweburl;

        $(document).ready(function () {
            UpdateChoice();
        });

        function UpdateChoice() {
            appWebContext = new SP.ClientContext.get_current();
            hostweburl = decodeURIComponent($.getUrlVar("SPHostUrl"));
            var hostwebContext = new SP.AppContextSite(appWebContext, hostweburl);
            var web = hostwebContext.get_web();
            var fieldTitle = "MyChoice";
            var fieldChoice = appWebContext.castTo(web.get_availableFields().getByTitle(fieldTitle), SP.FieldChoice);
            appWebContext.load(fieldChoice);
            appWebContext.executeQueryAsync(function () {
                var newValues = "NewOption";//strStatusValues.split(",");
                var currentChoices = fieldChoice.get_choices();
                //for (var i = 0; i < newValues.length; i++) {
                //    currentChoices.push(newValues[i]);
                //}
                currentChoices.push(newValues);
                fieldChoice.set_choices(currentChoices);
                fieldChoice.updateAndPushChanges();
                debugger;
                appWebContext.executeQueryAsync(function () {
                    console.log("Added new choice values to the column");
                }, function (sender, args) {
                    deferred.reject(args.get_message());
                });
            },
                function (sender, args) {
                    deferred.reject(args.get_message());
                });
        }


        // jQuery plugin for fetching querystring parameters  
        jQuery.extend({
            getUrlVars: function () {
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for (var i = 0; i < hashes.length; i++) {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            },
            getUrlVar: function (name) {
                return jQuery.getUrlVars()[name];
            }
        });
    </script>
</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Page Title
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div>
        <p id="message">
            <!-- The following content will be replaced with the user name when you run the app - see App.js -->
            initializing...
        </p>
    </div>

</asp:Content>