Отображение данных в области компонента 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.