Загрузка данных для плеера/конструктора фреймов

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

1. Получение фрейма из БД.
2. Получение списка всех доступных виджетов.
3. Загрузка данных, необходимых для построения фрейма.

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

Второй этап осуществляется параллельно с предыдущим этапом. Для получения списка виджетов необходимо вызвать платформенный хэлпер loadSupportedWidgets, содержащийся в SiteEditorBase/Loader. Данный метод на вход принимает массив идентификаторов групп виджетов и возвращает Promise, в результате которого будет получен список всех поддерживаемых виджетов.

Третий этап должен осуществляться с помощью метода loadDataAndDeps, содержащегося в SiteEditorBase/Loader.

Метод принимает следующие аргументы:

1. mode — режим отображения (runtime или designtime).
2. loadedWidgets — массив виджетов, полученный на 1 этапе.
3. supportedWidgets — массив поддерживаемых виджетов.

Данный метод для каждого виджета:

1. Загружает шаблон указанные в поле templateName (Это необходимо для синхронного построения интерфейса.).
2. Для виджетов, у которых есть поле sourceConfigGetter загружается и вызывается js метод, указанный в этом поле. Метод возвращает конфигурацию для загрузки данных (аналогично как предзагрузка для страниц сайта). Результат, которые вернет этот метод, должен быть передан в опцию widgetsData плеера/конструктора.

В sourceConfigGetter на вход передается 3 параметра:

1. id - идентификатор инстанса виджета. Данный идентификатор выдается виджету конструктором, при добавлении виджета.
2. props - настроенные свойства виджета.
3. filter - фильтр, по которому нужно загрузить данные.

Пример метода sourceConfigGetter:

// sourceConfigGetter.ts
import {ILoadDataConfig} from 'Controls/dataSource';
interface IMyWidgetProps {
   ...
}
interface IMyFilter {
   ...
}
function sourceConfigGetter(
   id: string,
   props: IMyWidgetProps,
   filter: IMyFilter
): Record<string, ILoadDataConfig> {
    const items = {
        type: 'list',
        filter,
        ...
    };
    const customLoader = {
        type: 'custom',
        loadDataMethod: () => {...}
    };
    return {items, customLoader};
}

export default sourceConfigGetter;

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

1. widgets (1 этап).
2. supportedWidgets (2 этап).
3. widgetsData (3 этап).

Пример:

// TypeScript

import {SbisService} from 'Types/source';
import {loadDataAndDeps, loadSupportedWidgets} from 'SiteEditorBase/Loader';

const loadWidgets = () => {
    const widgetsSource = new SbisService({
        endpoint: 'CustomWidgets'
    });
    return Promise.all([widgetsSource.call('getWidgets'), loadSupportedWidgets(['my-widgets-group'])]).then(([widgets, supportedWidgets]) => {
        return loadDataAndDeps('runtime', widgets, supportedWidgets).then((widgetsData) => {
            return {
                widgets,
                supportedWidgets,
                widgetsData
            };
        });
    });
};

const sourceConfigGetter = () => {
   const loadedWidgets = {
      type: 'custom',
      loadDataMethod: loadWidgets
   };

   return [loadedWidgets];
};

export default sourceConfigGetter;

// WML
<SiteEditorBase.player:View
    widgetsData="{{prefetchResult.loadedWidgets.widgetsData}}" 
    widgets="{{prefetchResult.loadedWidgets.widgets}}"
    supportedWidgets="{{prefetchResult.loadedWidgets.supportedWidgets}}"
/>