Отображение данных в области компонента Select

Формулировка задачи

Отобразить в области компонента Select список сущностей из базы данных. Например, вы можете отобразить в раскрывающемся списке названия товаров, которые существуют в базе данных.

Предварительные требования

В разрабатываемом проекте создан класс с описанием сущностей, например, товаров. Проект опубликован. В базу данных добавлены данные. Поле таблицы базы данных, которое должно отображаться в компоненте Select, называется name.

Рекомендуемое решение задачи

Рекомендуемый подход к решению описанной задачи включает следующие шаги:

1. Добавление компонента Select на экранную форму.

   Откройте файл описания экранной формы, например, index.mdcontainer и добавьте компонент Select.

2. Создание действия типа GraphQL.

   В то время, когда файл описания экранной формы с добавленным компонентом Select открыт, создайте действие, например, ListGoods, типа GraphQL. В конструкторе GraphQL сконструируйте запрос, который возвращает значения полей таблицы базы данных. Текст запроса представлен в следующем блоке кода:

   query{
    orders_goods {
    items {
      name
      Id
        }
      }
    }
   

3. Создание источника данных для компонента Select.

   Создайте источник данных, например, DS_Goods, в параметрах которого укажите созданное на предыдущем шаге действие ListGoods.

4. Настройка свойств компонента Select.

   1. На панели Свойства и события для свойства Model выберите значение var и в поле ввода укажите имя переменной (например, my_select) для установки значения по умолчанию компонента Select.
   2. Для свойства State выберите значение var и в поле ввода укажите массив элементов, который формируется с помощью источника данных DS_Goods. Укажите значение DS_goods.load.data.orders_goods.items путем выбора в окне, которое открывается по нажатию кнопки справа от поля ввода.
   3. Перейдите в кодовый режим Редактора Форм, найдите строку с описанием компонента Select и добавьте строки для описания следующих свойств:

    KeyField="Id"  // идентификатор отображаемого элемента
    ValueField="name"  // содержимое отображаемого элемента
   
   4. Если вы хотите, чтобы по умолчанию в компоненте Select было выбрано какое-либо значение, в секции Scripts добавьте следующий фрагмент кода:

    Scripts={[
   () => {
     setState({
       my_select: 1,  // значение идентификатора элемента, который используется по умолчанию
     });
   },
   ]}

   Если вы не добавите этот фрагмент кода, в компоненте Select по умолчанию не будет указано какое-либо значение.

Вместо выполнения описанных выше шагов вы можете импортировать проект Orders, который демонстрирует отображение данных в компоненте Select.