Текстовое поле формы списка SharePoint в раскрывающемся списке

Question

Я нашел видео с SharePointTech , в котором объясняется, как изменить текстовое поле на раскрывающийся список в форме списка, используя данные из открытого API. Я пытаюсь воссоздать его, но я сталкиваюсь с препятствиями с новой SharePoint Online. Вместо того, чтобы использовать «Страна / Регион», я создал новый пользовательский список с Company_Name. Я взял код человека и сделал небольшие изменения, которые сделали ссылку на «WorkCountry». Когда я сохраняю изменения (прекращаю редактирование), изменения не отражаются, и я получаю одно и то же текстовое поле. Мне пришлось использовать SharePoint Designer 2013 для создания новой TestNewForm для новой записи. Кто-нибудь смог воспроизвести это в SharePoint 2013 Designer? Если это так, вы могли бы привести пример?

Answer 1

Я использую jQuery ajax метод.

Обновлен код для вашей справки (вам нужно изменить имя списка на ваше имя списка, также InternalName):

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
var demo = window.demo || {};
demo.nodeTypes = {
    commentNode: 8
};
demo.fetchCountries = function ($j) {
$.ajax({      
      url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('Company_Name')/items",
      type: "get",
      headers: { "Accept": "application/json; odata=verbose" },         
      success: function (data) {
        $j('table.ms-formtable td.ms-formbody').contents().filter(function () {
            return (this.nodeType == demo.nodeTypes.commentNode);
        }).each(function (idx, node) {
            if (node.nodeValue.match(/FieldInternalName="Country_x002f_Region"/)) {

                // Find existing text field (<input> tag)
                var inputTag = $(this).parent().find('input');

                // Create <select> tag out of retrieved countries
                var optionMarkup = '<option value="">Choose one...</option>';
                $j.each(data.d.results, function (idx, company) {
                    optionMarkup += '<option>' + company.Title + '</option>';
                });
                var selectTag = $j('<select>' + optionMarkup + '</select>');

                // Initialize value of <select> tag from value of <input>
                selectTag.val(inputTag.val());

                // Wire up event handlers to keep <select> and <input> tags in sync
                inputTag.on('change', function () {
                    selectTag.val(inputTag.val());
                });
                selectTag.on('change', function () {
                    inputTag.val(selectTag.val());
                });

                // Add <select> tag to form and hide <input> tag
                inputTag.hide();
                inputTag.after(selectTag);
            }
        });
    },
      error: function (data) {
                  console.log(data)
      }
    });
                }
                if (window.jQuery) {
    jQuery(document).ready(function () {
        (function ($j) {
            demo.fetchCountries($j);
        })(jQuery);
    });
}
</script>

Мой список источников:

Результат теста:

Обновлено:

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
var demo = window.demo || {};
demo.nodeTypes = {
    commentNode: 8
};
demo.fetchCountries = function ($j) {
$.ajax({      
      url: 'https://restcountries.eu/rest/v1/all',
      type: "get",
      headers: { "Accept": "application/json; odata=verbose" },         
      success: function (data) {
        $j('table.ms-formtable td.ms-formbody').contents().filter(function () {
            return (this.nodeType == demo.nodeTypes.commentNode);
        }).each(function (idx, node) {
            if (node.nodeValue.match(/FieldInternalName="Country_x002f_Region"/)) {

                // Find existing text field (<input> tag)
                var inputTag = $(this).parent().find('input');

                // Create <select> tag out of retrieved countries
                var optionMarkup = '<option value="">Choose one...</option>';
                $j.each(data, function (idx, company) {
                    optionMarkup += '<option>' + company.name + '</option>';
                });
                var selectTag = $j('<select>' + optionMarkup + '</select>');

                // Initialize value of <select> tag from value of <input>
                selectTag.val(inputTag.val());

                // Wire up event handlers to keep <select> and <input> tags in sync
                inputTag.on('change', function () {
                    selectTag.val(inputTag.val());
                });
                selectTag.on('change', function () {
                    inputTag.val(selectTag.val());
                });

                // Add <select> tag to form and hide <input> tag
                inputTag.hide();
                inputTag.after(selectTag);
            }
        });
    },
      error: function (data) {
                  console.log(data)
      }
    });
                }
                if (window.jQuery) {
    jQuery(document).ready(function () {
        (function ($j) {
            demo.fetchCountries($j);
        })(jQuery);
    });
}
</script>

Разница в API не будет иметь большого эффекта, ключ здесь '$ j.each (data, function (idx, company) {'. Структура возвращаемого значения различных API различна , вам нужно найти полезные данные в возвращаемом значении.