Описание источника данных в коде экранной формы

В кодовом режиме Редактора Форм DevTools предоставляет расширенные возможности настройки источника данных.

Формат описания источника данных

Поскольку для каждой экранной формы может быть настроено несколько источников данных, в коде описания экранной формы источники данных представлены в виде массива объектов DataSources[], как демонстрирует следующий пример:

DataSources={[
  {
    name: "getDocs",
    load: { actionAlias: "getDocs", type: "graphQL" },
    subscribe: {},
  },
  {
    name: "DS_DocSetCount",
    load: { actionAlias: "DocSetCount", type: "graphQL" },
    subscribe: {},
  },
]}

Каждый элемент массива DataSources[] имеет следующие параметры и группы параметров:

• name: определяет имя источника данных.
• load: описывает действие, которое выполняется при загрузке экранной формы. В визуальном режиме Редактора Форм группа параметров load отображается на вкладке Общие.
• subscribe: описывает остальные действия, которые могут быть вызваны на экранной форме. В визуальном режиме Редактора Форм группа параметров subscribe отображается на вкладке События.

Формат описания действия, ассоциированного с источником данных

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

{
  type: ActionType; //
  actionAlias?: string; // псевдоним действия
  action?: (params: unknown) => Promise<unknown>;
  initialParams?: unknown;
  triggerOnInit?: boolean;
  postProcess?: InterceptorConfig;
  preProcess?: InterceptorConfig;
}

В кодовом режиме Редактора Форм можно управлять следующими параметрами действия:

• initialParams: определяет значения параметров для выполнения действия. Использование initialParams в коде описания экранной формы аналогично настройке значения элемента в блоке описания входного контракта InputModel в визуальном режиме Редактора Форм. При triggerOnInit: true действию, связанному с источником данных, необходимо передать параметры. Например, действию по изменению сущности необходимо указать, какую именно сущность нужно изменить. Следующий блок кода демонстрирует использование параметров triggerOnInit и initialParams при описании группы параметров subscribe:

  subscribe: {
    "edit": {
      actionAlias: "Action_EditBook", 
      triggerOnInit: true, 
      initialParams: {ID: 123}}, 
  }

• triggerOnInit: управляет вызовом действия, связанного с источником данных. Используется в группах параметров load и subscribe.

  Для load по умолчанию triggerOnInit: true. Если в описании источника данных есть выражение triggerOnInit: false, как показано в следующем примере, данные на экранной форме не будут загружаться автоматически.

  load: {actionAlias: "DS_name", triggerOnInit: false},

  В таком случае для загрузки данных в обработчике события или в секции Scripts должна быть следующая строка:

  getDataSource('DS_listProjects').load(),

  Для subscribe по умолчанию triggerOnInit: false. Для вызова действия, описанного в группе параметров subscribe, при загрузке экранной формы необходимо наличие выражения triggerOnInit: true, как показано в следующем примере:

  subscribe: {
    "edit": {
      actionAlias: "Action_ProjList", 
      triggerOnInit: true}, 
  }

  Вместо actionAlias может использоваться функция, как показано в следующем примере:

  DataSources={[
    {
      name: "DS_ListProjects",
      load: { actionAlias: "Action_ProjList", triggerOnInit: false },
      subscribe: {
        "edit": {
          action: async () => { 
            const a = await executeAction('edit', {Id: 123});
            return a.map(i => i.name + i.surname ); 
          }}
      },
    }]

• preProcess и postProcess: используются в группах параметров load и subscribe для описания параметров соответственно входного и выходного контракта данных. Обе эти группы параметров используют группу параметров map для установления соответствия между данными, отправляемыми действию (в случае load) или получаемыми в результате выполнения действия (в случае subscribe) и данными бэкенд-сервиса.

  Следующий блок кода демонстрирует параметры, которые могут использоваться в группе параметров map:

  {
    defaultValue?: unknown;
    source?: string;
    sourceType?: SourceType;
    key?: string;
    path?: PathType[];
    children?: InterceptorConfig[];
  }

Методы для вызова действий, ассоциированных с источником данных

Для вызова действий, описанных в группах параметров load и subscribe, используются разные методы источника данных:

• Действие из группы параметров load может быть вызвано с помощью метода load(). Следующий пример демонстрирует вызов действия Action_ProjList с помощью метода load().

  getDataSource('DS_ListProjects').load()

• Действие из группы параметров subscribe может быть вызвано с помощью метода emit(). Следующий пример демонстрирует вызов действия Insert с помощью метода emit().

  getDataSource('DS_ListProjects').emit('Insert', params)

  Использование метода emit() аналогично использованию метода executeAction() библиотеки FrontendCore. При использовании emit() преобразование контрактов данных, настроенное в визуальном режиме Редактора Форм, применяется автоматически. При использовании executeAction() нужно произвести дополнительные действия с передаваемыми параметрами и с полученным результатом.

  Следующий пример демонстрирует вызов действия Insert с помощью метода executeAction():

  const someVar = getValue('someVar'); // получение значения переменной состояния экранной формы
  const params = someVar.someField.someAnotherField; // преобразование переменной состояния согласно бизнес-логике
  const result = await executeAction('Insert', params); // вызов действия Insert, настроенного для экранной формы
  setState({ InsertResult: result.someField }); // запись результата выполнения действия в переменную состояния InsertResult

  Следующий пример демонстрирует вызов действия Insert с помощью метода emit():

  getDataSource('DS_ListProjects').emit('Insert');

Статусы действий, ассоциированных с источником данных

При написании кода экранной формы существует возможность отслеживать статус действий, которые связаны с запросами данных и указаны в параметрах источников данных. В переменные состояния экранной формы источник данных записывает структуру следующего вида:

status: {
  isLoading : true; // запрос выполняется
  isLoaded: true;   // запрос выполнен
  error {
    isError: true; // в процессе выполнения запроса произошла ошибка
    code: "string";
    message: "string";
    extra: "string";
  }
}

Связанные статьи

Методы JS-библиотеки FrontendCore