Загрузка данных для плеера/конструктора фреймов
Кроме статической настройки данных для плеера и конструктора, которая была описана в статье, загрузка данных может происходить в предзагрузке. В данном случае загрузка должна происходить в несколько этапов:
- Получение фрейма из БД.
- Получение списка всех доступных виджетов.
- Загрузка данных, необходимых для построения фрейма.
Первый этап осуществляется полностью прикладным программистом с помощью вызова метода БЛ, т.к. за хранение результатов конструирования отвечает прикладной программист.
Второй этап осуществляется параллельно с предыдущим этапом. Для получения списка виджетов необходимо вызвать платформенный хэлпер loadSupportedWidgets
, содержащийся в SiteEditorBase/Loader
. Данный метод на вход принимает массив идентификаторов групп виджетов и возвращает Promise, в результате которого будет получен список всех поддерживаемых виджетов.
Третий этап должен осуществляться с помощью метода loadDataAndDeps
, содержащегося в SiteEditorBase/Loader
.
Метод принимает следующие аргументы:
- mode — режим отображения (
runtime
илиdesigntime
). - loadedWidgets — массив виджетов, полученный на 1 этапе.
- supportedWidgets — массив поддерживаемых виджетов.
Данный метод для каждого виджета:
- Загружает шаблон указанные в поле templateName (Это необходимо для синхронного построения интерфейса.).
- Для виджетов, у которых есть поле sourceConfigGetter загружается и вызывается
js
метод, указанный в этом поле. Метод возвращает конфигурацию для загрузки данных (аналогично как предзагрузка для страниц сайта). Результат, которые вернет этот метод, должен быть передан в опцию widgetsData плеера/конструктора.
В sourceConfigGetter на вход передается 3 параметра:
- id - идентификатор инстанса виджета. Данный идентификатор выдается виджету конструктором, при добавлении виджета.
- props - настроенные свойства виджета.
- 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;
После выполнения всех этапов будут получены следующие поля, которые необходимо передать в качестве опций в плеер или конструктор:
- widgets (1 этап).
- supportedWidgets (2 этап).
- 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}}"
/>